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

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

Last Updated : 25 Jul, 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>

Output:

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

P

pankaj_gupta_gfg

Improve

Article Tags :

Similar Reads

How to create Popup Box using HTML CSS and JavaScript?

Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a

How to Create a Modal Box using HTML CSS and JavaScript?

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m

Create a Contact Form using HTML CSS & JavaScript

A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission

How to Create a Form with Multiple Steps using CSS and JavaScript ?

A multi-step form divides a long form into smaller, more manageable sections or steps. This makes it easier for users to fill out and makes the form less intimidating. We will explore the approach to building a multi-step form using CSS and JavaScript. ApproachCreate a form container. Inside the for

How to Create Popup Box using HTML and CSS?

Popup boxes are widely used in web design, with nearly 80% of modern websites utilizing them for alerts, forms, confirmations, or user guidance. They enhance interactivity and improve user experience. Below are three common methods to create a popup box using only HTML and CSS:1. Using Display Prope