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

How to create a Color Generator using HTML CSS and JavaScript ?

In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color

How to create a Landing page using HTML CSS and JavaScript ?

A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v

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 Snackbar using HTML, CSS & JavaScript?

Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.Approach:First, create a basic HTM

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

Create a Guestbook using HTML CSS and JavaScript

This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest's information

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 fullscreen search bar using HTML , CSS and JavaScript ?

In this article, you will learn how to create a full-screen search Bar. Here You will be required to create two divs. One for the overlay container and the other for the overlay content container. HTML Code: The first step is to create an HTML file. Here we will create the basic structure for the se