codemediaweb.com

Code Media

hire me

Popup Subscription Form using HTML and JavaScript

by

Popup Subscription Form is a common web element. This type of HTML CSS Popup Subscription Form is now available on almost all websites.

In this article, you will learn how to create a Popup Form using HTML, CSS, and javascript. Email Subscription Form helps your users to connect with your website via email. This will allow all your updates to reach subscribers via email.

Popup Subscription Form
Demo
Download

Various websites use automatic pop-up subscription forms. However, I have to open this subscribe popup HTML manually. 

Earlier I shared another tutorial on creating an automatic popup window. Combining these two designs allows you to create an automatic popup newsletter form.

CSS Popup Subscription Form

This Onclick pop-up subscription form is created using Simple HTML CSS and JavaScript. All the information to create a subscribe form using HTML has been added. I designed it with CSS and implemented the JavaScript popup.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

In this case, the entire popup window will be hidden. Only a button can be found on the web page. This pop-up subscription form will appear when you click on the button. The subscription form includes an image, some text, an input box, a submit button, and a cancel button.

How To Create a Popup Subscription Form

Here is a step-by-step tutorial on how to create a simple Popup Subscription Form. If you are a beginner then follow this tutorial.

Step 1: Create a popup button

A pop-up button has been created using the following HTML and CSS codes that can be found on that page. The width of this button: 150px, height: 50px and background color is green.

<div class=”center”>
  <button id=”open-subscribe-form”>
      Subscribe
  </button>
</div>
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
body {
  background:#f5f5f5;
  font-family:”Roboto”,sans-serif;
}
.center {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#open-subscribe-form{
  width: 150px;
  height: 50px;
  background-color: rgb(7, 117, 73);
  color: #fff;
  font-size: 20px;
  border: none;
  border-radius: 3px;
}
Create a popup button

Step 2: Information of Popup Subscription Form

Now I have added all the information in this subscription form. First, there is an image and then an input box for some basic text and input.

<div class=”subscribe-form”>
  <div class=”left”>
     <img src=”https://bit.ly/3wEWPDj” alt=”” width=”100%”>
  </div>
  <div class=”right”>
     <h2>Subscribe to our newsletter!</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
     <div class=”form”>
       <div class=”input”>
         <label for=”email”>Your Email</label>
         <input type=”email” id=”email” placeholder=”alex@gmail.com”>
       </div>
       <div class=”button”>
         <button>Subscribe</button>
       </div>
      </div>
    </div>
    <button class=”close-btn”>
      &times;
    </button>
</div>
Information of Popup Subscription Form

Step 3: Design the Popup Subscription Form

More of this subscription form has been designed by CSS below. I have used max-width: 650px and white background in this subscription form. 

Here opacity: 0 is used. As a result, we will not be able to see this popup window under normal circumstances.

.subscribe-form {
  position:fixed; 
  top:-100%; 
  left:50%; 
  transform:translate(-50%,-50%) scale(1.15); 
  width:calc(100% – 20px);
  max-width:650px;
  background:#fff;
  border-radius:10px;
  display:grid;
  gap:10px;
  padding:50px 40px 40px;
  box-shadow:0px 2px 2px 2px rgba(0,0,0,0.05);
  z-index:2;
  opacity:0; 
  transition:top 0ms ease-in-out 300ms,
             transform 300ms ease-in-out 0ms,
             opacity 300ms ease-in-out 0ms;
}

What happens when the popup button is clicked is determined by the css below. Here opacity: 1 is used. As a result, when you click on the pop-up button, the form will have ‘opacity: 1’ and we will see this subscription form.

.subscribe-form.active {
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:top 0ms ease-in-out 0ms,
  transform 300ms ease-in-out 0ms,
  opacity 300ms ease-in-out 0ms;
}
Design the Popup Subscription Form

Now all the text of this pop-up subscription form, the image is designed by the CSS below.

.subscribe-form .left {
  display:flex;
  align-items:center;
}
.subscribe-form .right h2 {
  font-size:28px;
  font-family:”Montserrat”,sans-serif;
  line-height:1.15;
  margin-bottom:10px;
  color:#111;
}
.subscribe-form .right p {
  font-size:16px;
  color:#555;
  margin-bottom:15px;
}
Subscription Form using HTML

The size of the input box will depend on the padding: 12px and a border has been used with it.

.subscribe-form .right .form label {
  display:block;
  margin-bottom:5px;
  font-size:15px;
}
.subscribe-form .right .form .input {
  margin-bottom:10px;
}
.subscribe-form .right .form input {
  width:100%;
  padding:12px;
  border:2px solid rgb(25, 117, 142);
  font-size:17px;
  border-radius:5px;
}
Subscription Form

Step 4: Design the subscribe and cancel buttons

Now, the submit button has been designed for this Popup Subscription Form. 

.subscribe-form .right .form button {
  width:100%;
  padding:10px;
  font-size:18px;
  border-radius:5px;
  border:none;
  outline:none;
  cursor:pointer;
  background:#0e5f77;
  color:#fff;
  box-shadow:0px 2px 2px #ddd;
}
submit button has been designed

The button to cancel the Popup Subscription Form has been designed. Button width: 35px, height: 35px and background color green. Clicking on this button will hide the popup window.

.subscribe-form .close-btn {
  position:absolute;
  top:10px;
  right:10px;
  font-size:25px;
  color:rgb(255, 255, 255);
  background-color: rgb(5, 133, 97);
  border:none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor:pointer;
}
Popup Subscription Form using HTML and JavaScript

Now is the time to make HTML Email Signup Modal Box Responsive. As a result, this design can be used on all devices.

@media(min-width: 680px){
  .subscribe-form {
    grid-template-columns:repeat(2, 1fr);
  }
}

Step 5: Activate the Popup Subscription Form

I have activated the popup window using the JavaScript below. Clicking on the swollen popup button will see the window and clicking on the Cancel button will hide the window.

The popup button has been activated using the JavaScript line below. The onclick method is used here.

document.querySelector(“#open-subscribe-form”).addEventListener(“click”,function(){
  document.querySelector(“.subscribe-form”).classList.add(“active”);
});

The cancel button has been activated by the JavaScript below. As a result, when you click on that button, the subscription form will be hidden again.

document.querySelector(“.subscribe-form .close-btn”).addEventListener(“click”,function(){
  document.querySelector(“.subscribe-form”).classList.remove(“active”);
});
CSS Popup Subscription Form

Hope you learned how to create a pop-up subscription form using HTML CSS JavaScript. You can see this design if you want to create an automatic popup window. 

Earlier I shared the design of many HTML Email Signup forms. Please comment on how you like this CSS Popup Subscription Form.

Leave a comment