Learn how to create a subscription form or newsletter with personalized messaging using HTML, CSS and JavaScript. Increase your conversion rate and engage your audience with this step-by-step tutorial.
Table of Contents
A subscription form is a key tool for any website that wants to build a strong email list. However, creating a generic form is not enough to ensure maximum conversions. By customizing the messaging and design of your subscription form, you can engage your audience and encourage them to sign up.
In this tutorial, we will show you how to create a subscription form with personalized messaging using HTML, CSS and JavaScript. By following this step-by-step guide, you will learn how to create a functional and aesthetically pleasing subscription form that will increase your conversion rate.
The tutorial assumes that you have a basic understanding of HTML, CSS and JavaScript, but no prior experience in building subscription forms is required. We will provide code snippets and screenshots to aid understanding and guide you through the process of creating a subscription form that stands out from the crowd.
By the end of this tutorial, you will have the skills to create a personalized subscription form that will help you build a strong email list and increase your website's conversion rate. So let's get started!
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our subscription form.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The document begins with a <!DOCTYPE> declaration indicating the document type as HTML, followed by the opening <html> tag with the language attribute set to "en" for English.
The document head section contains various meta-information and links to external resources required by the web page. The title tag specifies the title of the web page displayed on the browser tab. The meta tags define the character set encoding and viewport width for the web page. Additionally, the document links to an external stylesheet and Google font using the <link> tag.
The body section of the web page contains two main sections within a container element. The first section with a class "one" displays a logo, a heading, a short message, and a form. The form includes an input field for the user to enter their email address and a button labeled "subscribe."
The second section with a class "two" displays a message thanking the user for subscribing, along with an empty div element with a class "close."
Finally, the web page includes two external script files, one for the jQuery library and the other for the custom script to handle the form submission and display the second section on successful submission.
Overall, this code represents a simple subscribe form UI that can be used to collect email addresses from users for a mailing list or newsletter.
This is the basic structure of our subscription form using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the subscription form is in place, the next step is to add styling to the subscription form using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our subscription form.
The first block of code applies a box-sizing property to all elements on the webpage. This ensures that padding and borders are included in the total width and height of an element, rather than being added on top of it. This can prevent unexpected layout issues.
The next block of code sets some basic styles for the entire webpage, such as a background color and a font family. The "Open Sans" font is used, which is a popular sans-serif font often used in web design.
The ".container" class sets some styles for a specific element on the webpage, which likely serves as a container for other elements. It sets a specific width and height, a white background, a margin, and a border radius. It also includes a box shadow effect, which creates a shadow behind the container element.
The ".one" and ".two" classes are used to style two different sections of the container element, which appear to be sliding in and out of view with a transition effect. They are set to have absolute positioning within the container, and a specific height and width. The transition property is used to specify a smooth animation effect when the sections are moved.
The "h3" tag within the ".two" section sets a specific style for a heading element, with a white color and some padding.
The ".logo" class styles an image within the container, setting it to a specific width and height and centering it using flexbox.
The "input[type='text']" selector styles a text input field, setting a specific width and height, a border, and removing the default browser styling. It also includes some specific styles for when the input is active, focused, or hovered over.
The "::placeholder" pseudo-element styles the placeholder text within the input field, setting a specific font size and color. It also includes a transition effect when the input is focused.
The ".btn" class styles a button element, with a specific background color, padding, border radius, font size, and font color. It also includes some specific styles for when the button is active, focused, or hovered over.
The ".close" class styles an element used to close the container. It positions the element in the top left corner of the container, and includes some specific styles for two lines that create an "X" shape to indicate the element can be closed.
This will give our subscription form/newsletter an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body, html{
background:#dbf0f7;
font-family: 'Open Sans', sans-serif;
}
.container{
width:400px;
height:500px;
background:#fff;
margin:20px auto;
border-radius:4px;
text-align:center;
position:relative;
-moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
box-shadow: 0px 0px 28px rgba(0,0,0,.3);
overflow:hidden;
}
.one , .two{
display:block;
height:500px;
width:400px;
margin:0px auto;
position:absolute;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.one{
top:0;
background:#fff;
margin-top:20px;
}
.two{
top:500px;
background:#2141a0;
}
.two h3{
color:#fff;
padding-top:240px;
}
.container .logo{
width:40%;
height:auto;
display:flex;
justify-content: center;
align-items: center;
margin:20px auto;
}
img{
width: 150px;
}
.one .heading{
color:#607d8b;
text-transform:capitalize;
font-size:20px;
font-weight:900;
margin-top:40px;
}
.container p{
font-size:12px;
color:#b7b7b7;
font-weight:lighter;
text-transform:capitalize;
}
input[type='text']{
width:85%;
height:60px;
margin-top:20px;
margin-bottom:20px;
padding-bottom:-80px;
border:none;
border-bottom:3px solid #2141a0;
overflow:auto;
position:relative;
}
input[type='text']:active:focus,
input[type='text']:focus,
input[type='text']:hover{
outline : none;
font-size:20px;
}
input[type='text']:focus::-webkit-input-placeholder,
input[type='text']:active:focus::-webkit-input-placeholder
{
font-size:12px;
display:block;
-webkit-transform:translateY(-20px);
transform:translateY(-20px);
}
::-webkit-placeholder{
font-size:14px;
color:#b7b7b7;
text-transform:capitalize;
-webkit-transform:translateY(0px);
transform:translateY(0px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
::placeholder{
font-size:14px;
color:#b7b7b7;
text-transform:capitalize;
-webkit-transform:translateY(0px);
transform:translateY(0px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.one .btn{
width:85%;
background:#2141a0;
padding:15px;
border:none;
border-radius:5px;
font-size:14px;
color:#fff;
text-transform:capitalize;
font-family: 'Open Sans', sans-serif;
}
.one .btn:active:focus,
.one .btn:focus,
.one .btn:hover{
outline : none;
}
.one .btn:hover{
cursor:pointer;
}
.close{
position:relative;
top:0;
left:0;
display:block;
cursor:pointer;
}
.close:before{
content:"";
position:absolute;
top:-240px;
right:50px;
display:block;
width:22px;
height:3px;
background:#fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.close:after{
content:"";
position:absolute;
top:-240px;
right:50px;
display:block;
width:22px;
height:3px;
background:#fff;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
} Step 3 (JavaScript Code):
Finally, we need to create a JavaScript code that handles the animation of two different elements with class names "one" and "two".
The first part of the code is an event listener that waits for a button click inside an element with class "one" and then animates that element to move up 500 pixels while animating the element with class "two" to move down to a position where it's top is at 0 pixels. The return false statement at the end is used to prevent the default action of the button.
The second part of the code waits for a click event on an element with class "close" inside an element with class "two". It then animates the element with class "two" to move up 500 pixels while animating the element with class "one" to move down to a position where its top is at 0 pixels. The return false statement at the end is used to prevent the default action of the "close" element.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(function () {
$('.one form .btn').on('click', function () {
$(this).parents('.one').animate(
{
top: '-500px',
},
500
);
$(this).parents('.one').siblings('.two').animate(
{
top: '0px',
},
500
);
return false;
});
$('.two .close').on('click', function () {
$(this).parent().animate(
{
top: '-500px',
},
500
);
$(this).parent().siblings('.one').animate(
{
top: '0px',
},
500
);
return false;
});
});Final Output:
Conclusion:
In conclusion, creating a personalized subscription form with HTML, CSS and JavaScript can significantly increase your website's conversion rate. By following this tutorial, you have learned how to create a subscription form with custom messages and design elements that engage your audience and encourage them to sign up.
Remember, the key to creating an effective subscription form is to make it easy for users to understand and complete. Use clear and concise language for form labels and error messages, and keep the form design simple and user-friendly.
In addition, personalized messaging can make your subscription form stand out from the competition. By using JavaScript to display dynamic messages based on user input, you can create a unique and engaging experience for your audience.
Finally, don't forget to test your subscription form thoroughly to ensure that it functions correctly and is optimized for different devices and screen sizes. By doing so, you will maximize your conversion rate and build a strong email list that will help you grow your business.
We hope that this tutorial has been helpful and that you feel confident in your ability to create a personalized subscription form using HTML, CSS and JavaScript. If you have any questions or feedback, please feel free to leave a comment below. Good luck!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
