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?

Popups are useful for displaying alerts, forms, notifications, or additional information. Here are three common methods to create a popup box:1. Using Display PropertyThis method toggles the popup's visibility by changing its CSS display property.HTML<html> <head> <style> .popup {

How to create a FAQ page using JavaScript ?

The frequently Asked Questions (FAQ) section is one of the most important sections of any website, especially if you are providing services. If you want to learn how to make it by yourself then welcome! today we'll learn how to create a FAQ page using JavaScript. Functionalities required in a FAQ pa

How to create Twitter Login Page using HTML CSS JavaScript ?

In this article, we will see How To Make a Twitter Login Page Like Using HTML CSS JavaScript. The code produces an attractive login page with a design similar to the Twitter login interface. The JavaScript incorporates straightforward validation for the email input field upon submitting the form.Pre

How to create Cookie Consent Box using HTML CSS and JavaScript ?

In this article, we will see how cookies are stored using the cookie consent box using HTML, CSS, & JavaScript.Cookies are small pieces of data that are stored on a user's device while browsing the website. Cookies are used to store information for faster access to data and provide a better user

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t

How to Create a Stacked Form using CSS ?

A Vertically Stacked Form places labels and inputs on top of each other. To create a stacked form using CSS, we will first define a container with a maximum width, padding, and border radius for styling. Preview: Approach:Begin by creating the basic HTML structure, including the form container and f