Email Subscription Form using HTML & CSS

In this article, you will learn how to create an Email Subscription Form using HTML CSS, and JavaScript. The newsletter subscription form is an important and widely used project. It helps the website user to connect with that website. 

Using this form the user will be able to subscribe to the website with his email id. The user will be notified whenever some content is updated and uploaded to the website.

Although I haven't seen this system work here. Here only I have designed HTML CSS with the help of JavaScript. This is basically a pop-up subscriber form. 

A small button can be found instead. When the user clicks on that button, the complete design can be seen. There is a cancel button in this form which if clicked will hide this form again.

Newsletter Subscription Form HTML CSS

The first of the newsletter subscription form HTML has a cancel button. It has a small logo on it. Here you can use your own website logo. 

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Then there is some text and some headings. Below that is a place to input an email ID. Below everyone is a button to subscribe. Below I have shared the complete step-by-step tutorial.

Step 1: Create a popup button

I created a button at the top of the web page using the HTML and CSS codes below. The form can be seen by clicking on it. I have added the necessary information using the following HTML. 

<div class="start-btn">

  <a href="#">Subscribe</a>

</div>

I have designed the web page using the following codes.

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body{

  text-align: center;

  background: #048bd9;

  font-family: 'Poppins',sans-serif;

}

Now the following codes have helped to design this button. I have used the background color white and the text color black. I have used font-size: 22px to increase the text size a bit.

.center,.start-btn{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.start-btn a{

  font-size: 22px;

  background: white;

  color: #02242b;

  padding: 15px 18px;

  border-radius: 5px;

  text-decoration: none;

  text-transform: uppercase;

  font-weight: 600;

  letter-spacing: 1px;

}

Step 2: Basic structure of Email Subscription Form

Now I have created the basic structure of the subscription form. Box width: 400px is used and background color is white. I have used opacity: 0 and visibility: hidden to hide this form in its normal state.

Finally, we used opacity: 1 and visibility: visible in the 'show-modal' tag. Later I connected this 'show-modal' to the form with the help of JavaScript.

<div class="center modal-box">

</div>

.modal-box{

  top: 40%;

  opacity: 0;

  visibility: hidden;

  background: white;

  height: auto;

  width: 400px;

  padding: 38px 30px;

  border-radius: 5px;

  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;

}

Step 3: Cancel button in Email Newsletter

Now I have created a cancel button in the Email Subscription Form. This will help to hide the form again. I have used the width, height 40px and background color blue of the button.

<div class="fas fa-times"></div>

.modal-box .fa-times{

  position: absolute;

  top: 0;

  right: 0;

  background: #0569d4;

  height: 40px;

  width: 40px;

  line-height: 40px;

  margin: 10px;

  color: white;

  font-size: 18px;

  border-radius: 100%;

  cursor: pointer;

}

.fa-times:hover{

  font-size: 22px;

}

Step 4: Add a profile image

Now I have added an icon you can use the profile image here. I have used the icon length and height of 120 px.

<div class="fas fa-bell icon1"></div>

.modal-box .icon1{

  font-size: 60px;

  background: #0b8cd7;

  height: 120px;

  width: 120px;

  color: white;

  border-radius: 50%;

  line-height: 120px;

  text-align: center;

  margin-bottom: 10px;

} 

Step 5: Add basic text and titles

Now I have added some headings and information in this subscribe form HTML CSS.

    <header>Subscribe For Newsletter</header>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit,</p>

.modal-box header{

  font-size: 28px;

  font-family: sans-serif;

  margin-bottom: 10px;

}

.modal-box p{

  line-height: 20px;

  color: grey;

}

Step 6: Create a place to input email

Now is the time to do the most important work in this subscription form using HTML and CSS. Now I have created a place to the input email ID and a subscribe button. 

I used the background color blue of the button and used font-size: 25px to increase the size of the text here.

<form action="">

  <div class="fas fa-envelope icon2"></div>

  <input type="email" required placeholder="Email Id">

  <button>Subscribe</button>

</form>

form input, form button{

  height: 50px;

  width: 95%;

  border-radius: 3px;

}

form .icon2{

  position: absolute;

  height: 50px;

  width: 50px;

  margin-top: 15px;

  background: #0b8cd7;

  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 #0b8cd7;

}

input::placeholder{

  color: #8c8c8c;

}

form button{

  margin-top: 15px;

  background: #0b8cd7;

  color: white;

  font-size: 25px;

  border: 1px solid #0b8cd7;

  letter-spacing: 1px;

  cursor: pointer;

  outline: none;

  transition: .3s;

}

form button:hover{

  background: #1ed2fa;

  border: 1px solid #05cdfa;

  letter-spacing: 2px;

}

Step 7: Activate the newsletter subscription form

Now we have implemented this design with the help of JQuery. Here you have to activate the button and cancel button on the home page.

JQuery is JavaScript's external library. The code is given here very simply. First I activated the popup button. As a result, when you click on the button on the homepage, you can see the full subscribe form HTML template.

 $(document).ready(function(){

    $('.start-btn').click(function(){

        $('.modal-box').toggleClass("show-modal");

        $('.start-btn').toggleClass("show-modal");

    });

Now I activated the cancel button. As a result, the form will be hidden again.

  

    $('.fa-times').click(function(){

        $('.modal-box').toggleClass("show-modal");

        $('.start-btn').toggleClass("show-modal");

    });

 });

Hopefully, you have learned from this tutorial how I created this project (Email Subscription Form using HTML & CSS). If there is any problem, you can definitely let me know by commenting. Earlier I shared many more tutorials on the Newsletter Subscription Form.

The download will start automatically