Popup Subscription Form using HTML CSS & JS

by Letscode - October 4,2023

Hello readers, Today in this blog you’ll learn how to create a Popup Subscription Form or Modal Box using HTML CSS & Javascript. Earlier I have shared a Minimal To-Do List using HTML CSS & Javascript, now it’s time to create a Popup Email Subscription Form.

An email subscription is an option on a website that allows visitors to receive news and updates through email by specifying their email addresses in a subscription form.

As you can see in the image, this is a Popup Email Subscription Form based on HTML CSS & Javascript. At first, there is only a button shown but when you clicked on that button then this subscription form will appear. There is a smooth sliding effect too that’ means when you clicked on the button this form will slide from the top side.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Popup Subscription Form).

Popup Subscription Form or Modal Dialog Box [Source Codes]

To create this program (Popup Subscription Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

HTML

                                          
<!DOCTYPE html>
<!-- Created By Letscodeweb -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Sliding Modal Box Style</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   <body>
      <div class="start-btn">
         <a href="#">View Modal</a>
      </div>
      <div class="center modal-box">
         <div class="fas fa-times"></div>
         <div class="fas fa-envelope icon1"></div>
         <header>Don't miss updates from us!</header>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers
         </p>
         <form action="">
            <div class="fas fa-envelope icon2"></div>
            <input type="email" required placeholder="abc@example.com">
            <button>Subscribe</button>
         </form>
         <div class="icons">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-youtube"></i>
         </div>
      </div>
      <script>
         $(document).ready(function(){
           $('.start-btn').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
           $('.fa-times').click(function(){
             $('.modal-box').toggleClass("show-modal");
             $('.start-btn').toggleClass("show-modal");
           });
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS

                                              
@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background: #44d1ee;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: white;
  background: #48DBFB;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: white;
  color: #48DBFB;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: white;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #50dcfb;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #48DBFB;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: white;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #48DBFB;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 31px;
  font-family: 'Lobster Two';
  margin-bottom: 10px;
}
.modal-box p{
  /* margin-bottom: 10px; */
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #1ed2fa;
  caret-color: #48DBFB;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
form button{
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  font-size: 25px;
  border: 1px solid #1ed2fa;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #1ed2fa;
  border: 1px solid #05cdfa;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #48DBFB;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #05cdfa;
}@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background: #44d1ee;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: white;
  background: #48DBFB;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: white;
  color: #48DBFB;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: white;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #50dcfb;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #48DBFB;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: white;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #48DBFB;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 31px;
  font-family: 'Lobster Two';
  margin-bottom: 10px;
}
.modal-box p{
  /* margin-bottom: 10px; */
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #1ed2fa;
  caret-color: #48DBFB;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
form button{
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  font-size: 25px;
  border: 1px solid #1ed2fa;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #1ed2fa;
  border: 1px solid #05cdfa;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #48DBFB;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #05cdfa;
}

That’s all, now you’ve successfully created a Multi-Step Form with Step Progress Bar in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Popup Subscription Form using HTML CSS & JS

by Letscode - October 4,2023

Popup Subscription Form or Modal Dialog Box [Source Codes]

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023