How to Create a Popup Form with CSS and JavaScript

Popup forms are a great way to have dialogs on your website. You can create popup login forms, contact forms or any other types of forms for your site.

The popup button will be just under the visitor’s eye. When a user clicks on the popup button, the form will appear on the screen.

Here, learn how to create a popup form with CSS and JavaScript step by step.

1) Add HTML

Use the HTML <form> tag add a form for user input. Then, create your <input> fields for your form. Give a class to your form to add a style for it, and id for connecting to the script.

Example

<div class="form-popup" id="popup-Form">
  <form action="/action_page.php" class="form-container">
    <h2>Please Log in</h2>
    <label for="email">
    <strong>E-mail</strong>
    </label>
    <input type="text" placeholder="Your Email" name="email" required>
    <label for="psw">
    <strong>Password</strong>
    </label>
    <input type="password" placeholder="Your Password" name="psw" required>
    <button type="submit" class="btn">Log in</button>
    <button type="submit" class="btn cancel" onclick="closeForm()">Cancel</button>
  </form>
</div>

2) Style with CSS

Give styles to your popup form and set display: none; in order to hide it before the user will click the “Open Form” button.

Style your input fields, Login and Cancel buttons, and position the popup form where it is needed to be. Here, it is placed to be center.

* {
box-sizing: border-box;
}
body {
font-family: Roboto, Helvetica, sans-serif;
}
/* Fix the button on the left side of the page */
.open-btn {
display: flex;
justify-content: left;
}
/* Style and fix the button on the page */
.open-button {
background-color: #1c87c9;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0.8;
position: fixed;
}
/* Position the Popup form */
.login-popup {
position: relative;
text-align: center;
width: 100%;
}
/* Hide the Popup form */
.form-popup {
display: none;
position: fixed;
left: 45%;
top:5%;
transform: translate(-45%,5%);
border: 2px solid #666;
z-index: 9;
}
/* Styles for the form container */
.form-container {
max-width: 300px;
padding: 20px;
background-color: #fff;
}
/* Full-width for input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 10px;
margin: 5px 0 22px 0;
border: none;
background: #eee;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Style submit/login button */
.form-container .btn {
background-color: #8ebf42;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Style cancel button */
.form-container .cancel {
background-color: #cc0000;
}
/* Hover effects for buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}

3) Add JavaScript

Use the display = "block" for the openForm() and style.display = "none" for the closeForm() functions to show and close the form when clicked.

function openForm() {
document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
document.getElementById("popupForm").style.display = "none";
}

Now, let’s see how a Popup Login Form will look like:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
      box-sizing: border-box;
      }
      body {
      font-family: Roboto, Helvetica, sans-serif;
      }
      /* Fix the button on the left side of the page */
      .open-btn {
      display: flex;
      justify-content: left;
      }
      /* Style and fix the button on the page */
      .open-button {
      background-color: #1c87c9;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      }
      /* Position the Popup form */
      .login-popup {
      position: relative;
      text-align: center;
      width: 100%;
      }
      /* Hide the Popup form */
      .form-popup {
      display: none;
      position: fixed;
      left: 45%;
      top:5%;
      transform: translate(-45%,5%);
      border: 2px solid #666;
      z-index: 9;
      }
      /* Styles for the form container */
      .form-container {
      max-width: 300px;
      padding: 20px;
      background-color: #fff;
      }
      /* Full-width for input fields */
      .form-container input[type=text], .form-container input[type=password] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 22px 0;
      border: none;
      background: #eee;
      }
      /* When the inputs get focus, do something */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
      background-color: #ddd;
      outline: none;
      }
      /* Style submit/login button */
      .form-container .btn {
      background-color: #8ebf42;
      color: #fff;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.8;
      }
      /* Style cancel button */
      .form-container .cancel {
      background-color: #cc0000;
      }
      /* Hover effects for buttons */
      .form-container .btn:hover, .open-button:hover {
      opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>Popup Form</h2>
    <p>Click on the "Open Form" button to open the Popup form.</p>
    <div class="open-btn">
      <button class="open-button" onclick="openForm()"><strong>Open Form</strong></button>
    </div>
    <div class="login-popup">
      <div class="form-popup" id="popupForm">
        <form action="/action_page.php" class="form-container">
          <h2>Please Log in</h2>
          <label for="email">
          <strong>E-mail</strong>
          </label>
          <input type="text" id="email" placeholder="Your Email" name="email" required>
          <label for="psw">
          <strong>Password</strong>
          </label>
          <input type="password" id="psw" placeholder="Your Password" name="psw" required>
          <button type="submit" class="btn">Log in</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        </form>
      </div>
    </div>
    <script>
      function openForm() {
        document.getElementById("popupForm").style.display="block";
      }
      
      function closeForm() {
        document.getElementById("popupForm").style.display="none";
      }
    </script>
  </body>
</html>

It is also possible to separate the modal box and close it by clicking anywhere outside of the box. For that, you just need to use target event property which returns the element that triggered the event.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
      box-sizing: border-box;
      }
      body {
      font-family: Roboto, Helvetica, sans-serif;
      }
      #loginPopup {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }
      /* Fix the button on the left side of the page */
      .open-btn {
      display: flex;
      justify-content: left;
      }
      /* Style and fix the button on the page */
      .open-button {
      background-color: #1c87c9;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      }
      /* Hide the Popup form */
      .form-popup {
      border: 2px solid #666;
      z-index: 9;
      max-width: 300px;
      margin: 0 auto;
      }
      /* Styles for the form container */
      .form-container {
      max-width: 300px;
      padding: 20px;
      background-color: #fff;
      }
      /* Full-width for input fields */
      .form-container input[type=text], .form-container input[type=password] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 22px 0;
      border: none;
      background: #eee;
      }
      /* When the inputs get focus, do something */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
      background-color: #ddd;
      outline: none;
      }
      /* Style submit/login button */
      .form-container .btn {
      background-color: #8ebf42;
      color: #fff;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.8;
      }
      /* Style cancel button */
      .form-container .cancel {
      background-color: #cc0000;
      }
      /* Hover effects for buttons */
      .form-container .btn:hover, .open-button:hover {
      opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>Popup Form</h2>
    <p>Click on the "Open Form" button to open the Popup form.</p>
    <p>Then, you can click anywhere outside of the box to close it.</p>
    <div class="open-btn">
      <button class="open-button" onclick="openForm()">
      <strong>Open Form</strong>
      </button>
    </div>
    <div id="loginPopup">
      <div class="form-popup" id="popupForm">
        <form action="/action_page.php" class="form-container">
          <h2>Please Log in</h2>
          <label for="email">
          <strong>E-mail</strong>
          </label>
          <input type="text" id="email" placeholder="Your Email" name="email" required>
          <label for="psw">
          <strong>Password</strong>
          </label>
          <input type="password" id="psw" placeholder="Your Password" name="psw" required>
          <button type="submit" class="btn">Log in</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        </form>
      </div>
    </div>
    <script>
      function openForm() {
        document.getElementById("loginPopup").style.display="block";
      }
      
      function closeForm() {
        document.getElementById("loginPopup").style.display= "none";
      }
      // When the user clicks anywhere outside of the modal, close it

      window.onclick = function(event) {
        var modal = document.getElementById('loginPopup');
        if (event.target == modal) {
          closeForm();
        }
      }
      
    </script>
  </body>
</html>

How to Set Multiple Popup Forms in One Page

It is not too difficult to have several Popup Forms use the data-* global attribute. The data-* attribute is used to store custom data private to the page. Here, we use a data-modal attribute.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* Popup Box */
      /* The Modal (background) */
      .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 8888; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }
      /* Modal Content/Box */
      .modal-content {
      background-color: #fefefe;
      margin: 10vh auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 60%; /* Could be more or less, depending on screen size */
      }
      @media (min-width: 1366px) {
      .modal-content {
      background-color: #fefefe;
      margin: 10vh auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 30%; /* Could be more or less, depending on screen size */
      }
      }
      h2, p {
      margin: 0 0 20px;
      font-weight: 400;
      color: #666;
      }
      span{
      color: #666;
      display:block;
      padding:0 0 5px;
      }
      form {
      padding: 25px;
      margin: 25px;
      box-shadow: 0 2px 5px #f5f5f5; 
      background: #eee; 
      }
      input, textarea {
      width: calc(100% - 18px);
      padding: 8px;
      margin-bottom: 20px;
      border: 1px solid #1c87c9;
      outline: none;
      }
      .contact-form button {
      width: 100%;
      padding: 10px;
      border: none;
      background: #1c87c9; 
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      }
      button:hover {
      background: #2371a0;
      }    
      /* The Close Button */
      .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      }
      .close:hover,
      .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
      }
      button.button {
      background:none;
      border-top:none;
      outline: none;
      border-right:none;
      border-left:none;
      border-bottom:#02274a 1px solid;
      padding:0 0 3px 0;
      font-size:16px;
      cursor:pointer;
      }
      button.button:hover {
      border-bottom:#a99567 1px solid;
      color:#a99567;
      }
    </style>
  </head>
  <body>
    <h2>Multiple Popup Forms</h2>
    <p>
      <button class="button" data-modal="modalOne">Contact Us</button>
    </p>
    <p>
      <button class="button" data-modal="modalTwo">Send a Compliant Form</button>
    </p>
    <div id="modalOne" class="modal">
      <div class="modal-content">
        <div class="contact-form">
          <a class="close">&times;</a>
          <form action="/">
            <h2>Contact Us</h2>
            <div>
              <input class="fname" type="text" name="name" placeholder="Full name">
              <input type="text" name="name" placeholder="Email">
              <input type="text" name="name" placeholder="Phone number">
              <input type="text" name="name" placeholder="Website">
            </div>
            <span>Message</span>
            <div>
              <textarea rows="4"></textarea>
            </div>
            <button type="submit" href="/">Submit</button>
          </form>
        </div>
      </div>
    </div>
    </div>
    <div id="modalTwo" class="modal">
      <div class="modal-content">
        <div class="contact-form">
          <span class="close">&times;</span>
          <form action="/">
            <h2>Complaint form</h2>
            <div>
              <input class="fname" type="text" name="name" placeholder="Full name">
              <input type="text" name="name" placeholder="Email">
              <input type="text" name="name" placeholder="Phone number">
              <input type="text" name="name" placeholder="Website">
            </div>
            <span>Message</span>
            <div>
              <textarea rows="4"></textarea>
            </div>
            <button type="submit" href="/">Submit</button>
          </form>
        </div>
      </div>
    </div>
    <script>
      var modalBtns = [...document.querySelectorAll(".button")];
      modalBtns.forEach(function(btn){
        btn.onclick = function() {
          var modal = btn.getAttribute('data-modal');
          document.getElementById(modal).style.display = "block";
        }
      });
      
      var closeBtns = [...document.querySelectorAll(".close")];
      closeBtns.forEach(function(btn){
        btn.onclick = function() {
          var modal = btn.closest('.modal');
          modal.style.display = "none";
        }
      });
      
      window.onclick = function(event) {
        if (event.target.className === "modal") {
          event.target.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Do you find this helpful?

Related articles