How to create a popup form with CSS and JavaScript.

How To Create a Popup Form

Step 1) Add HTML

Use a <form> element to process the input.

 <div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="submit" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

Step 2) Add CSS:

 {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Step 3) Add JavaScript:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

Complete Code will look like this:

<br /> See the Pen <a href='https://codepen.io/adaptabiz/pen/bGBBEWN'>create a popup form with CSS and JavaScript.</a> by adaptabiz<br /> (<a href='https://codepen.io/adaptabiz'>@adaptabiz</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

How to create a popup form with CSS and JavaScript.

How to add Typing Effect / Type Writer Effect to your text Using JavaScript

By Richard / June 5, 2022

How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...

How to Create a full screen video background using HTML, CSS

By Richard / May 22, 2022

Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...

How to Create an Off-Canvas Menu / Side Bar Navigation

By Richard / April 29, 2022

How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...

How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript

By Richard / April 19, 2022

How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding...

How to Create Weight Converter using HTML and JavaScript

By Richard / April 2, 2022

How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...

How to create a Scroll indicator with CSS and JavaScript

By Richard / February 19, 2022

How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...

How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)

By Richard / February 15, 2022

Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...

How to Create a JavaScript Countdown Timer

By Richard / February 4, 2022

There are many a times, when you’re going to need a countdown clock for your project. You may have an...

How to Create an Avatar image with CSS

By Richard / January 20, 2022

How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...

How to Change Background Images on Scroll with CSS.

By Richard / January 13, 2022

How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...