reg-form.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form Using JavaScript</title>
   
    <link rel="stylesheet"  href="css/reg-form.css">
    
   
</head>
<body>
    <div class="container">
        
        <form onsubmit="openPopup(); reset(); return false;">
            <h3>REGISTER FOR INSURANCE </h3>
            <input type="text id=name" placeholder="Your Name" required>
            <input type="text id=text" placeholder="Date of Birth" required>
            <input type="text id=phone" placeholder="Phone Number" required>
            <input type="text id=gender" placeholder="Gender" required>
            <textarea id="category" rows="4" placeholder="Applying for?"></textarea>
            <button type="submit" class="btn" onclick="openPopup()" >Send</button>

        </form>   
    </div>
    <!-- adding popup message confirmation in form -->
    <div class="popup" id="popup">
        <img src="img/tick.png">
        <h2>Thank You</h2>
        <p>Your details has been successfully submitted. Thanks</p>
        <a href="index.html">
            <button type="button" onclick="closePopup()">OK</button>
        </a>
        

    </div>
    <script>
        let popup = document.getElementById("popup");

        function openPopup(){
            popup.classList.add("open-popup")
        }
        function closePopup(){
            popup.classList.remove("open-popup")
        }
    </script>
   

</body>
</html>