How to create a Popup Form using HTML CSS and JavaScript ?

Last Updated : 01 Feb, 2024

To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webpage without cluttering the main content.

Preview

Screenshot-2024-02-01-111528

Approach

Create the basic HTML structure with a button to trigger the popup and a hidden overlay containing the form.
Style the overlay and form using CSS, ensuring a visually appealing and responsive design.
Write JavaScript functions, “openPopup” and “closePopup”, to toggle the visibility of the overlay when the button is clicked.
Implement form fields and validation within the overlay, ensuring a seamless user experience.
Integrate the HTML, CSS, and JavaScript to create a functional and aesthetically pleasing popup form on your webpage.

Example: Implementation to design popup from.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0"> 
    <title>Popup Form</title> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            background-color: #f0f0f0; 
            font-family: Arial, sans-serif; 
        } 
  
        .btn-open-popup { 
            padding: 12px 24px; 
            font-size: 18px; 
            background-color: green; 
            color: #fff; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
            transition: background-color 0.3s ease; 
        } 
  
        .btn-open-popup:hover { 
            background-color: #4caf50; 
        } 
  
        .overlay-container { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.6); 
            justify-content: center; 
            align-items: center; 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 
  
        .popup-box { 
            background: #fff; 
            padding: 24px; 
            border-radius: 12px; 
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
            width: 320px; 
            text-align: center; 
            opacity: 0; 
            transform: scale(0.8); 
            animation: fadeInUp 0.5s ease-out forwards; 
        } 
  
        .form-container { 
            display: flex; 
            flex-direction: column; 
        } 
  
        .form-label { 
            margin-bottom: 10px; 
            font-size: 16px; 
            color: #444; 
            text-align: left; 
        } 
  
        .form-input { 
            padding: 10px; 
            margin-bottom: 20px; 
            border: 1px solid #ccc; 
            border-radius: 8px; 
            font-size: 16px; 
            width: 100%; 
            box-sizing: border-box; 
        } 
  
        .btn-submit, 
        .btn-close-popup { 
            padding: 12px 24px; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
            transition: background-color 0.3s ease, color 0.3s ease; 
        } 
  
        .btn-submit { 
            background-color: green; 
            color: #fff; 
        } 
  
        .btn-close-popup { 
            margin-top: 12px; 
            background-color: #e74c3c; 
            color: #fff; 
        } 
  
        .btn-submit:hover, 
        .btn-close-popup:hover { 
            background-color: #4caf50; 
        } 
  
        /* Keyframes for fadeInUp animation */ 
        @keyframes fadeInUp { 
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            } 
  
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
  
        /* Animation for popup */ 
        .overlay-container.show { 
            display: flex; 
            opacity: 1; 
        } 
    </style> 
</head> 
  
<body> 
  
    <button class="btn-open-popup" onclick="togglePopup()"> 
      Open Popup Form 
      </button> 
  
    <div id="popupOverlay" 
         class="overlay-container"> 
        <div class="popup-box"> 
            <h2 style="color: green;">Popup Form</h2> 
            <form class="form-container"> 
                <label class="form-label" 
                       for="name"> 
                  Username: 
                  </label> 
                <input class="form-input" type="text" 
                       placeholder="Enter Your Username" 
                       id="name" name="name" required> 
  
                <label class="form-label" for="email">Email:</label> 
                <input class="form-input"
                       type="email" 
                       placeholder="Enter Your Email"
                       id="email" 
                       name="email" required> 
  
                <button class="btn-submit" 
                        type="submit"> 
                  Submit 
                  </button> 
            </form> 
  
            <button class="btn-close-popup" 
                    onclick="togglePopup()"> 
              Close 
              </button> 
        </div> 
    </div> 
  
    <script> 
        function togglePopup() { 
            const overlay = document.getElementById('popupOverlay'); 
            overlay.classList.toggle('show'); 
        } 
    </script> 
</body> 
  
</html>