Hello all of you, today in this blog I’m going to create an Email Subscription Box by using only HTML & CSS. In my earlier blog, I have shared the How to Create a Responsive Footer Section and it’s time to design a subscription box.
In simple language, an email subscription form means a form where users need to enter his/her email address to subscribe to a particular website for getting notification of the latest updates from the particular website. Nowadays we can found this type of programming [Email Subscription] on various websites. It is literally important and system for the viewers to give the newest updates information to the users by messaging their email account with the help of this type of subscription.
As you can see on the given image on the webpage about this program [Newsletter Subscription Form], on the top there is one logo of email, downward of the logo there are some text and one input field for entering user email id and one button named as “Subscribe”. Actually, in this programming [Email Subscription Form ], I have added some effect in the input field, which appears when we click on the input field, and also I have to give hover animation on the button.
If you want to see all animation in this program [Subscription box], I have given a full video tutorial of this programming. You can watch the given tutorial, and I am sure all your confusion will clear after watching the tutorial video of this program [Subscription form by entering Email ID].
Video Tutorial of Email Subscription Box using HTML & CSS
As you have seen on the given video of this program [Subscription Box], First an email field’s border color is dim, and when that input section is clicked the border is changed into bright color like blue. When we click outside without typing any word that color again changed into dim color like light black. When I have entered some text and click outside the border color still appears, I have made this with the help of CSS. Have you noticed that when I have hovered on the subscribe button, its color brightness increased, which looks really attractive isn’t it ?. I have only used HTML & CSS to build this program and I had not to use JavaScript
If you have basic knowledge about HTML & CSS you can easily make this program [Subscription Form or Box], and also I want to tell you that if you have knowledge about JavaScript you can also add more functions. Those friends who are feeling difficulty building this program [Newsletter Subscription Form or Box], don’t worry I have provided all source code files of this program below:
You Might Like This:
Email Subscription Box [Source Code]
To copy-paste the following codes of the subscription form, first, you need to create two files one in an HTML file and another in a CSS file, after creating these two files you can copy-paste the following code of this program [Email Subscription Box]. You can also download all source code files of the subscription form from the given “Download Button” directly.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Subscription Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="top">
<i class="fas fa-envelope-open-text"></i>
</div>
<div class="bottom">
<div class="info">
Subscribe to our channel and<br>get the latest updates
</div>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your email" required>
</div>
<div class="input-box">
<input type="submit" value="Subscribe">
</div>
</form>
<div class="footer">
Don't worry, we don't spam
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
html,body{
height: 100vh;
width: 100%;
background: #6665ee;
}
.wrapper{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
background: #fff;
width: 400px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.wrapper .top{
display: flex;
justify-content: center;
align-items: center;
background: #1414b8;
height: 140px;
position: relative;
border-radius: 12px 12px 0 0;
}
.wrapper .top::before{
position: absolute;
content: "";
height: 20px;
width: 20px;
background: #1414b8;
bottom: -10px;
transform: rotate(45deg);
}
.wrapper .top i{
font-size: 70px;
color: #ccc;
}
.wrapper .bottom{
padding: 30px;
word-spacing: -1px;
}
.wrapper .bottom .info{
font-size: 20px;
font-weight: 500;
}
.wrapper .bottom .input-box{
height: 45px;
margin: 15px 0 10px 0;
}
.wrapper form .input-box input{
height: 100%;
width: 100%;
padding-left: 14px;
outline: none;
font-size: 18px;
border-radius: 25px;
transition: all 0.4s ease;
}
.wrapper .bottom input[type="text"]{
border: 2px solid #ccc;
}
.wrapper .bottom input[type="text"]:focus,
.wrapper .bottom input[type="text"]:valid{
border-color: #6665ee;
}
.wrapper .bottom input[type="submit"]{
border: none;
cursor: pointer;
background: #6665ee;
color: #fff;
letter-spacing: 1px;
}
.wrapper .bottom input[type="submit"]:hover{
background: #1414b8;
}
.wrapper .bottom .footer{
font-size: 16px;
margin-top: 12px;
}
If you face any difficulties while creating your Email Subscription Form or your code is not working as expected, you can download the source code files for this Email Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
