How to Create a Popup Form with HTML, CSS and JavaScript

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A popup form is a great way to capture user input, such as contact details, without redirecting users to another page. You can use a button to trigger the form and display it as a modal window. This is done using a combination of HTML, CSS, and JavaScript to manage the form's visibility and responsiveness.

In this tutorial, you'll learn how to create a popup form using CSS and JavaScript.

Development Steps

Use HTML for the Structure: Create the form and the button to trigger the popup.
Use CSS for Styling: Style the form, popup background, and button.
Use JavaScript for Interaction: Handle the form's visibility using JavaScript (open/close).

Popup Form HTML, CSS and JavaScript Example

<!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>
        /* Step 1: Style the popup background */
        .popup-overlay {
            display: none; /* Hidden by default */
            position: fixed; /* Stays fixed on screen */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Transparent dark background */
            z-index: 1000; /* On top of other content */
        }

        /* Step 2: Style the popup form */
        .popup-form {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            width: 300px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1001; /* On top of the background */
        }

        /* Step 3: Style form elements */
        .popup-form input[type="text"],
        .popup-form input[type="email"],
        .popup-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .popup-form button {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .popup-form button:hover {
            background-color: #2980b9;
        }

        /* Step 4: Style the close button */
        .close-btn {
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .close-btn:hover {
            background-color: darkred;
        }

        /* Button to open the popup */
        .open-popup-btn {
            padding: 12px 20px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .open-popup-btn:hover {
            background-color: #27ae60;
        }
    </style>
</head>
<body>

    <!-- Button to Open the Popup Form -->
    <button class="open-popup-btn" onclick="openPopup()">Open Form</button>

    <!-- The Popup Form -->
    <div class="popup-overlay" id="popupOverlay">
        <div class="popup-form">
            <!-- Close Button -->
            <button class="close-btn" onclick="closePopup()">X</button>
            
            <h2>Contact Us</h2>
            <form>
                <!-- Name Field -->
                <input type="text" name="name" placeholder="Enter your name" required>
                
                <!-- Email Field -->
                <input type="email" name="email" placeholder="Enter your email" required>
                
                <!-- Message Field -->
                <textarea name="message" rows="4" placeholder="Your message" required></textarea>

                <!-- Submit Button -->
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>

    <script>
        // Function to open the popup form
        function openPopup() {
            document.getElementById("popupOverlay").style.display = "block";
        }

        // Function to close the popup form
        function closePopup() {
            document.getElementById("popupOverlay").style.display = "none";
        }

        // Close the popup if the user clicks outside the form
        window.onclick = function(event) {
            var popup = document.getElementById("popupOverlay");
            if (event.target == popup) {
                closePopup();
            }
        }
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

The .popup-overlay class creates a semi-transparent background that covers the entire screen. It is initially hidden using display: none, and when the user clicks the "Open Form" button, it will be shown using JavaScript.

.popup-overlay {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1000;
}

position: fixed: Ensures that the overlay covers the entire screen, even when scrolling.
background-color: rgba(0, 0, 0, 0.5): Adds a semi-transparent dark background to focus the user's attention on the form.

The .popup-form class styles the popup form with a white background, padding, and a box-shadow to give it a card-like appearance. It is centered using the transform: translate(-50%, -50%) technique.

.popup-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the form */
    background-color: white;
    padding: 30px;
    border-radius: 10px; /* Rounded corners */
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
}

Step 3: Form Elements

The form fields (name, email, and message) are styled with padding, borders, and rounded corners for a clean, user-friendly design.

.popup-form input[type="text"],
.popup-form input[type="email"],
.popup-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Step 4: Close Button

The .close-btn class styles the close button. It is positioned in the top-right corner of the form using position: absolute.

.close-btn {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

JavaScript Functions

The openPopup() and closePopup() functions handle the visibility of the popup by changing the display property of the .popup-overlay div.

// Function to open the popup form
function openPopup() {
    document.getElementById("popupOverlay").style.display = "block";
}

// Function to close the popup form
function closePopup() {
    document.getElementById("popupOverlay").style.display = "none";
}

// Close the popup if the user clicks outside the form
window.onclick = function(event) {
    var popup = document.getElementById("popupOverlay");
    if (event.target == popup) {
        closePopup();
    }
}

openPopup(): Shows the popup by setting display to block.
closePopup(): Hides the popup by setting display to none.
Click outside to close: If the user clicks outside the form (on the overlay), the form will close.

Customization

Add More Form Fields

You can easily add more input fields (e.g., phone number, dropdowns) by following the same pattern:

<!-- Phone Number Field -->
<input type="text" name="phone" placeholder="Enter your phone number">

Validation

To add validation to the fields, you can use HTML5 validation attributes like required or pattern:


html
<input type="email" name="email" placeholder="Enter your email" required>

Add Animations

You can add CSS animations to make the popup form appear smoothly:

.popup-form {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

To adjust the popup's size, modify the width and padding in the .popup-form class:

.popup-form {
    width: 400px; /* Wider form */
    padding: 40px;
}

Conclusion

Creating a popup form with CSS and JavaScript is an effective way to capture user input without redirecting users to another page. This simple design allows for flexibility, enabling you to customize the form to fit your website's style while maintaining functionality. You can add additional features, validation, and animations for a more polished user experience.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog