Popup Form with HTML, CSS, and JavaScript

Introduction

A popup form appears on the screen when triggered by an action, such as clicking a button. It's a great way to collect user input without navigating away from the current page. In this tutorial, you'll learn how to create a popup form using HTML, CSS for styling, and JavaScript to control the form's visibility.

Development Steps

Create Basic HTML Structure: Set up the popup form and button that triggers it.
Style the Popup Form with CSS: Use CSS to style the form and make it appear as a popup.
Add JavaScript to Control the Popup: Use JavaScript to show and hide the form when triggered.

Step 1: Create a Basic HTML Structure

We'll start by creating a button that opens the popup form and the structure of the form itself.

<!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>
</head>
<body>

    <!-- Step 1: Button to trigger the popup -->
    <button id="openPopupBtn" class="btn">Open Form</button>

    <!-- Step 1: Popup form structure -->
    <div id="popupForm" class="popup-form">
        <div class="form-content">
            <span class="close-btn" id="closePopupBtn">&times;</span>
            <h2>Contact Us</h2>
            <form id="popupContactForm">
                <div class="input-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="Enter your name" required>
                </div>
                <div class="input-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" placeholder="Enter your email" required>
                </div>
                <div class="input-group">
                    <label for="message">Message</label>
                    <textarea id="message" placeholder="Enter your message" required></textarea>
                </div>
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </div>

</body>
</html>

Explanation:

Button: The button (#openPopupBtn) is used to trigger the opening of the popup.
Popup Form: The popup form (#popupForm) contains the form fields and a close button (.close-btn) that hides the form when clicked.

Next, we'll style the popup form so that it appears as a modal window. We’ll use CSS to hide the form by default and display it in the center of the screen when triggered.

<head>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        /* Button to open the popup */
        .btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        /* Popup form styles */
        .popup-form {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .form-content {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            color: #333;
            cursor: pointer;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }
    </style>
</head>

Explanation:

Popup Styling: The .popup-form is hidden by default (display: none) and uses position: fixed to overlay the entire screen. When triggered, it will be displayed in the center of the viewport.
Close Button: The .close-btn is an "X" button positioned at the top-right corner of the popup form to close the form.

Now, we'll add JavaScript to control when the popup form is shown and hidden. The form will open when the "Open Form" button is clicked and close when the "X" button is clicked.

<body>
    <script>
        // Get the popup form and the button elements
        const popupForm = document.getElementById('popupForm');
        const openPopupBtn = document.getElementById('openPopupBtn');
        const closePopupBtn = document.getElementById('closePopupBtn');

        // Show the popup form when the button is clicked
        openPopupBtn.addEventListener('click', function() {
            popupForm.style.display = 'flex'; // Use flex to center the popup
        });

        // Hide the popup form when the close button is clicked
        closePopupBtn.addEventListener('click', function() {
            popupForm.style.display = 'none';
        });

        // Hide the popup form when clicking outside the form content
        window.addEventListener('click', function(event) {
            if (event.target == popupForm) {
                popupForm.style.display = 'none';
            }
        });
    </script>
</body>

Explanation:

Show Popup: When the "Open Form" button is clicked, we set the popup form’s display to flex so it appears in the center of the screen.
Hide Popup: When the close button (.close-btn) is clicked or the user clicks outside the form, we hide the popup by setting its display back to none.

Complete Example

Here is the complete code that combines the HTML, CSS, and JavaScript to create a functional popup form.

<!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>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        /* Button to open the popup */
        .btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        /* Popup form styles */
        .popup-form {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .form-content {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            color: #333;
            cursor: pointer;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .input-group input, .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;


            border-radius: 5px;
            font-size: 16px;
        }

        .input-group textarea {
            height: 100px;
            resize: vertical;
        }
    </style>
</head>
<body>

    <!-- Step 1: Button to trigger the popup -->
    <button id="openPopupBtn" class="btn">Open Form</button>

    <!-- Step 1: Popup form structure -->
    <div id="popupForm" class="popup-form">
        <div class="form-content">
            <span class="close-btn" id="closePopupBtn">&times;</span>
            <h2>Contact Us</h2>
            <form id="popupContactForm">
                <div class="input-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="Enter your name" required>
                </div>
                <div class="input-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" placeholder="Enter your email" required>
                </div>
                <div class="input-group">
                    <label for="message">Message</label>
                    <textarea id="message" placeholder="Enter your message" required></textarea>
                </div>
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </div>

    <script>
        // Get the popup form and the button elements
        const popupForm = document.getElementById('popupForm');
        const openPopupBtn = document.getElementById('openPopupBtn');
        const closePopupBtn = document.getElementById('closePopupBtn');

        // Show the popup form when the button is clicked
        openPopupBtn.addEventListener('click', function() {
            popupForm.style.display = 'flex'; // Use flex to center the popup
        });

        // Hide the popup form when the close button is clicked
        closePopupBtn.addEventListener('click', function() {
            popupForm.style.display = 'none';
        });

        // Hide the popup form when clicking outside the form content
        window.addEventListener('click', function(event) {
            if (event.target == popupForm) {
                popupForm.style.display = 'none';
            }
        });
    </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.:

Conclusion

In this tutorial, you learned how to create a popup form using HTML, CSS, and JavaScript. The popup form opens when a button is clicked and can be closed either by clicking the close button or by clicking outside the form. This approach is useful for creating modal forms for tasks like contact forms, login forms, or any kind of user input.

Java Guides

Search This Blog