In this tutorial we will learn how to create a modern email subscription form using HTML and CSS. This subscription form is an easy way to help users connect to your website and get updates. We will design it as a clean card with font awesome icons and a stylish button. The input field will be easy to use and have a focus effect that will guide the user. There is no JavaScript required here, we will only use HTML for the structure and CSS for the design. This project will be fun and at the end of the project you will have a professionally usable subscription form.
Below is a live demo that will help you understand how the work email subscription form.
Live demo:
HTML:
First we will create a project structure, where we will have both html and css files. If you don't know how to create a project folder, pls you can go here.
Starting with HTML we will use the Font Awesome library, which gives us access to hundreds of ready to use icons for our projects. With this library, we can easily add icons like envelopes, paper airplanes and even social media symbols without creating or downloading images. If you want to know how to generate images with Javascript, you can watch here. In this tutorial we are using Font Awesome version 6.5.0 which comes with the latest version styles. To make this work we simply add the following code to the "head" section of our HTML file. Once added we can use any icon with its class name.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">After adding the CDN link we will start by creating a div element and give it the class name "subscription-card". This will act as the main container for our subscription section.
Inside this container we will first add another div with the class name "icon" that contains a icon element of an open envelope. Next we create a header with the text "Stay Updated" and below it a small paragraph encouraging users to subscribe to the newsletter. We create a form component with class name "subscription-form". Finally we add a submit button with a paper plane icon and the label "Subscription".
<div class="subscription-card">
<div class="icon">
<i class="fas fa-envelope-open-text"></i>
</div>
<h2>Stay Updated</h2>
<p>Subscribe to our newsletter and never miss our latest updates and offers.</p>
<form class="subscription-form">
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Enter your email" required="">
</div>
<button type="submit"><i class="fas fa-paper-plane"></i> Subscribe</button>
</form>
</div>Are you interested in Javascript Tools? Broken Link Checker Tool
Stylesheet(CSS):
Content Centering:
We will style the body tag so that whatever is placed inside is always perfectly centered on the screen. To do this we used the flexbox method. We align the content both horizontally and vertically by first setting the justify-content and align-items css proprietys values to "center".
The font is set to a simple sans-serif family to give a clean look. A diagonal linear gradient is applied to the background. The gradient blends a soft light blue (hex code #c6e3ff) with a deep blue color (hex code #5563DE).
Finally the height is set to full viewport and the default margins are removed so that everything is perfectly centered with no extra spacing around the edges.
body {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background: linear-gradient(135deg, #c6e3ff, #5563DE);
height: 100vh;
margin: 0;
}
Now we will design the subscription card in a centered way. First we used a white background (hex code #fff) for the main container with a lot of padding (padding value 40px 30px) to give the content inside enough breathing room. To keep it responsive we set the width to 420px and allowed it to shrink to fit smaller screens with a width of 100%. I have set a subtle animation on the subscription card so that the card appears smoothly when the page is loaded.
Next we styled the "icon" element inside the card with a large font size 3rem and a blue color(hex code #5563DE) to draw attention. The heading is bold and easy to read using dark gray color (hex code #333) and font size 1.8rem.
Finally we set the flex-direction css propriety to "column" for the "subscription-form" element to arrange its input field. Added a gap of 15px between elements to make the layout easier to navigate.
.subscription-card {
background: #fff;
padding: 40px 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
max-width: 420px;
width: 100%;
animation: fadeIn 0.8s ease-in-out;
}
.subscription-card .icon {
font-size: 3rem;
color: #5563DE;
margin-bottom: 15px;
}
.subscription-card h2 {
margin: 10px 0;
color: #333;
font-size: 1.8rem;
}
.subscription-card p {
margin-bottom: 25px;
color: #555;
font-size: 0.95rem;
line-height: 1.5;
}
.subscription-form {
display: flex;
flex-direction: column;
gap: 15px;
}
The input group is set up with display as flex and align-items as center so that the icons and inputs are aligned. The icon itself is placed completely to the left with a soft gray color and a slightly larger font size for clarity.
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group i {
position: absolute;
left: 12px;
color: #888;
font-size: 1.1rem;
}
.subscription-form input[type="email"] {
width: 100%;
padding: 12px 12px 12px 40px;
border: 2px solid #ccc;
border-radius: 10px;
outline: none;
font-size: 1rem;
transition: border-color 0.3s;
}
.subscription-form input[type="email"]:focus {
border-color: #5563DE;
}
.subscription-form button {
padding: 12px;
border: none;
background: #5563DE;
color: #fff;
font-size: 1rem;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.subscription-form button i {
margin-right: 6px;
}
.subscription-form button:hover {
background: #4450b8;
transform: translateY(-2px);
}Here the email input is designed to occupy the full width of its container to make it easier to use. Additional padding on the left side makes room for icons. On the other hand rounded corners and a light gray border keep the field simple. The border color changes to blue when the user clicks inside.
The bottom button has been set to a solid blue background with bold text and is styled with white letters so that it stands out as the main verb. Rounded corners match the input field, and transitions are added so that background colors and slight movements feel smooth. On hover the button darkens and rises up a bit which creates an interesting feel.
Are you interested in CSS art? CSS Fish Animation | CSS Art
With keyframes we created a smooth fade-in animation for our element. At the beginning of the animation, we set the element opacity to 0 and set the scale value of the transform css property to 0.95. This results in a slight reduction in element size to 95%.
Then we set the opacity to 1 at the end of the animation and set the scale to its normal size. We then set the scale value to 1 again, which makes the element fully visible and restores it to its normal size.
@keyframes fadeIn {
from {opacity: 0; transform: scale(0.95);}
to {opacity: 1; transform: scale(1);}
}Answering common questions, ‘How to use Font Awesome 2025 Edition with HTML and CSS?’
– In 2025 you can use Font Awesome by adding a stylesheet (CDN or locally) to your HTML head, then placing icons with their class names in your HTML.
Today we are ending the email subscription form design tutorial here, and if you have any questions about the email subscription form, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial by saying Nomoskar🙏 to the you.
Post a Comment