Home Web Development JavaScript Newsletter Signup Form HTML CSS JavaScript | Animated With Validation

Newsletter Signup Form HTML CSS JavaScript | Animated With Validation

June 9, 2019

20051

Want to create a newsletter sign up form using HTML CSS & JavaScript? Solution: Newsletter Signup Form Using HTML CSS JavaScript. With animation and validation.

You have seen different types of newsletter email sign up forms before. Some are with minimal design and some are with animation effect. Almost every form use validation for safe to spam. The email newsletters are used for email new updates to users. In other words, if are using newsletter then your users will get notified on your updates.

Today I will show you a newsletter or email sing up form with animation and validation also. The whole system is in HTML, CSS, & JavaScript but for validation using jQuery. Because with jQuery we can create validation easily. After combining all features you can say this is a perfect email sign up form design.

So, Today I am sharing Newsletter Signup Form Using HTML CSS JavaScript. This email subscription form has little animation effect with validation. I used jQuery to create a validation function, all others left are in pure JS. This design of this form is inspired by a video of a subscription form shared by a developer on Facebook.

If you are thinking now how this email subscription form actually is, then see the preview given below.

Preview Of Animated Email Subscription or Newsletter Signup Form

See this video preview to getting an idea of how this field looks like.

Now you can see this visually. If you like this, then get the source code of its.

Discussion About This HTML Email Subscribe Field

Before sharing source code, let’s talk about how this can be created. As you know for creating this email subscription form I used HTML, CSS, JavaScript, & jQuery. I said before, jQuery only for validating email we can create it on pure javascript but I am lazy. Let’s talk about all parts separately.

HTML

First, discuss HTML’s part, I created a div and put a form inside it. Before input, I placed a button for subscribing then I placed an input for email field with a button for submitting. After that, I created a div for giving massage congrats after email submit. The whole tree looks like this:

<div class="main">
        <form id="singular-form">
            <button class="shown" type="button" id="subs">Subscribe</button>
            <div id="email-input">
                <input type="text" placeholder="E-mail" id="email">
                <button type="button" class="addbut1" disabled="disabled">Add Me</button>
            </div>
            <div id="success">Congrats!</div>
        </form>
    </div>

<button class="shown" type="button" id="subs">Subscribe</button>

</div>

<div id="success">Congrats!</div>

</form>

</div>

And I linked CSS, JS, jQuery, & a font link inside HTML. I used a google font for giving an attractive UI.

CSS

First I have the style to the whole body, Gave display: flex; and height:100vh;. 100vh height is using for the full height of the screen. Basically, the meaning of 100vh is 100% height of the viewport. & I used the cubic-bezier() function defines a Cubic Bezier curve. & all left works about giving color, font, & transition. I can’t explain fully in the text, You will understand after seeing the codes.

JavaScript

JavaScript doing the main work in the whole function. Mainly I used JS Constants function, Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through reassignment, and it can’t be redeclared (more info). After that get all HTML document value using query selector.

After that, I put many conditions, like if button pressed then email field appears with 0.6s delay animation, etc. There is also a function to detect enter key, if you press enter key after putting email address then it will work as submit button. Other all left functions about show hide content and create the animation effect.

jQuery

As you know I used jQuery for creating validation. First I created an email pattern with declaring valid conditions. Like must have 4 characters before @, and must have @, after @ minimum 3 characters required, the after .(dot) minimum of 2 characters required. The pattern looks like this:

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

1	var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

The put if else condition for checking valid email. If email is invalid then text color become red and submit button will be disabled. & if the email is valid then text color will be green & you can click on sign up button.

Newsletter Signup Form Source Code

Now if you have confusion. then understand the whole program after getting the codes. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick.com ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Newsletter From With Validation | Webdevtrick.com</title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css"> 
</head>

<body>

  <div class="main">
        <form id="singular-form">
            <button class="shown" type="button" id="subs">Subscribe</button>
            <div id="email-input">
                <input type="text" placeholder="E-mail" id="email">
                <button type="button" class="addbut1" disabled="disabled">Add Me</button>
            </div>
            <div id="success">Congrats!</div>
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Newsletter From With Validation | Webdevtrick.com</title>

</head>

<body>

<button class="shown" type="button" id="subs">Subscribe</button>

</div>

<div id="success">Congrats!</div>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick.com ( https://webdevtrick.com ) **/
* {
    font-size: 2rem;
    font-family: 'Righteous', cursive;
    font-weight: bold;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #333;
}
.main {
    width: 19rem;
    height: 5rem;
    padding: 12px;
    background-color: white;
    text-align: center;
    border-radius: 3rem;
    overflow: hidden;
    transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.main>#singular-form {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}
.main>#singular-form button {
    width: 9rem;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 3rem;
    cursor: pointer;
}
.main>#singular-form>button#subs {
    padding: 0;
    width: 100%;
    color: #fbb016;
    background-color: transparent;
    z-index: 3;
}
.main>#singular-form>#email-input {
    z-index: 2;
}
.main>#singular-form>#email-input>input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0 26% 0 3%;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#email-input>button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #fbb016;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all .6s ease .4s;
}
.main>#singular-form>#success {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbb016;
    font-weight: bold;
    z-index: 1;
}
.main>#singular-form>button#subs,
.main>#singular-form>#email-input,
.main>#singular-form>#success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}
.main>#singular-form>button#subs {
    transition: all .6s ease;
}
.main>#singular-form>#email-input {
    transform: scale(1);
    opacity: 1;
    transition: all .6s ease .4s;
}

.main>#singular-form>#success {
    transition: all .2s ease .6s;
}
.main>#singular-form>button#subs.shown,
.main>#singular-form>#email-input.shown,
.main>#singular-form>#success.shown,
.main>#singular-form>#email-input>button.shown,
.main>#singular-form>#email-input>input.shown {
    transform: scale(1);
    opacity: 1;
}

100

101

102

103

104

105

106

107

108

109

110

111

/** code by webdevtrick.com ( https://webdevtrick.com ) **/

* {

font-size: 2rem;

font-family: 'Righteous', cursive;

font-weight: bold;

}

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

margin: 0;

background-color: #333;

}

.main {

width: 19rem;

height: 5rem;

padding: 12px;

background-color: white;

text-align: center;

border-radius: 3rem;

overflow: hidden;

transition: width .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}

.main>#singular-form {

position: relative;

width: 100%;

height: 100%;

background-color: white;

}

.main>#singular-form button {

width: 9rem;

padding: 0;

border: none;

outline: none;

border-radius: 3rem;

cursor: pointer;

}

.main>#singular-form>button#subs {

padding: 0;

width: 100%;

color: #fbb016;

background-color: transparent;

z-index: 3;

}

.main>#singular-form>#email-input {

z-index: 2;

}

.main>#singular-form>#email-input>input {

display: inline-block;

height: 100%;

width: 100%;

background-color: white;

box-sizing: border-box;

border: none;

outline: none;

padding: 0 26% 0 3%;

opacity: 0;

transform: scale(0);

transition: all .6s ease .4s;

}

.main>#singular-form>#email-input>button {

position: absolute;

top: 0;

right: 0;

height: 100%;

background-color: #fbb016;

color: white;

opacity: 0;

transform: scale(0);

transition: all .6s ease .4s;

}

.main>#singular-form>#success {

display: flex;

justify-content: center;

align-items: center;

color: #fbb016;

font-weight: bold;

z-index: 1;

}

.main>#singular-form>button#subs,

.main>#singular-form>#email-input,

.main>#singular-form>#success {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

transform: scale(0);

opacity: 0;

}

.main>#singular-form>button#subs {

transition: all .6s ease;

}

.main>#singular-form>#email-input {

transform: scale(1);

opacity: 1;

transition: all .6s ease .4s;

}

.main>#singular-form>#success {

transition: all .2s ease .6s;

}

.main>#singular-form>button#subs.shown,

.main>#singular-form>#email-input.shown,

.main>#singular-form>#success.shown,

.main>#singular-form>#email-input>button.shown,

.main>#singular-form>#email-input>input.shown {

transform: scale(1);

opacity: 1;

}

function.js

The final step, Create a JS file named ‘function.js‘ and put the codes.

/** code by webdevtrick.com ( https://webdevtrick.com ) **/
var validateEmail = function(elementValue) {
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(elementValue);
}
$('#email').keyup(function() {

    var value = $(this).val();
    var valid = validateEmail(value);

    if (!valid) {
        $(this).css('color', 'red');
		$('.addbut1').prop('disabled', true);
    } else {
        $(this).css('color', '#2bb673');
		$('.addbut1').prop('disabled', false);
    }
});

const newsletter = {};

newsletter.main = document.querySelector('.main');
newsletter.form = document.querySelector('.main > #singular-form');
newsletter.subs = document.querySelector('.main > #singular-form > button#subs');
newsletter.input = document.querySelector('.main>#singular-form>#email-input>input');
newsletter.submitButton = document.querySelector('.main > #singular-form > #email-input > button');
newsletter.successMessage = document.querySelector('.main > #singular-form > #success');

newsletter.submitDelay = 1000;

newsletter.clickHandler = (e) => {
    switch (e.target) {
        case newsletter.subs:
            console.log('case subs');
            newsletter.main.style.width = '37rem'
            e.target.classList.remove('shown');
            newsletter.input.classList.add('shown');
            newsletter.submitButton.classList.add('shown');
            newsletter.input.focus();
            break;
        case newsletter.submitButton:
            newsletter.submitForm();
            break;
    }
}
newsletter.handleInputKeypress = (e) => {
    if (e.keyCode === 13) {
        e.preventDefault();
        newsletter.submitForm();
    }
}
newsletter.submitForm = () => {
    newsletter.input.style.transition = 'all .6s ease';
    newsletter.submitButton.style.transition = 'all .6s ease';
    newsletter.input.classList.remove('shown');
    newsletter.submitButton.classList.remove('shown');
    newsletter.main.style.transition = 'all .6s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s';
    newsletter.main.style.width = '';
    newsletter.successMessage.classList.add('shown');
    let submission = setTimeout(() => newsletter.form.submit(), newsletter.submitDelay);
}

newsletter.input.addEventListener('keypress', (e) => newsletter.handleInputKeypress(e));
document.addEventListener('click', (e) => newsletter.clickHandler(e));

/** code by webdevtrick.com ( https://webdevtrick.com ) **/

var validateEmail = function(elementValue) {

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

return emailPattern.test(elementValue);

}

$('#email').keyup(function() {

var value = $(this).val();

var valid = validateEmail(value);

if (!valid) {

$(this).css('color', 'red');

$('.addbut1').prop('disabled', true);

} else {

$(this).css('color', '#2bb673');

$('.addbut1').prop('disabled', false);

}

});

const newsletter = {};

newsletter.main = document.querySelector('.main');

newsletter.form = document.querySelector('.main > #singular-form');

newsletter.subs = document.querySelector('.main > #singular-form > button#subs');

newsletter.input = document.querySelector('.main>#singular-form>#email-input>input');

newsletter.submitButton = document.querySelector('.main > #singular-form > #email-input > button');

newsletter.successMessage = document.querySelector('.main > #singular-form > #success');

newsletter.submitDelay = 1000;

newsletter.clickHandler = (e) => {

switch (e.target) {

case newsletter.subs:

console.log('case subs');

newsletter.main.style.width = '37rem'

e.target.classList.remove('shown');

newsletter.input.classList.add('shown');

newsletter.submitButton.classList.add('shown');

newsletter.input.focus();

break;

case newsletter.submitButton:

newsletter.submitForm();

break;

}

newsletter.handleInputKeypress = (e) => {

if (e.keyCode === 13) {

e.preventDefault();

newsletter.submitForm();

}

newsletter.submitForm = () => {

newsletter.input.style.transition = 'all .6s ease';

newsletter.submitButton.style.transition = 'all .6s ease';

newsletter.input.classList.remove('shown');

newsletter.submitButton.classList.remove('shown');

newsletter.main.style.transition = 'all .6s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s';

newsletter.main.style.width = '';

newsletter.successMessage.classList.add('shown');

let submission = setTimeout(() => newsletter.form.submit(), newsletter.submitDelay);

}

newsletter.input.addEventListener('keypress', (e) => newsletter.handleInputKeypress(e));

document.addEventListener('click', (e) => newsletter.clickHandler(e));

That’s It. Now you have successfully created HTML, CSS, JavaScript Newsletter Signup Form. In other words, Email subscription form with animation and jQuery validation. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

18 COMMENTS

Robert June 10, 2019 At 11:28 am

Thanks for that,just what i was looking for.love your site.As a developer this is a great resource

Reply
- shaan June 10, 2019 At 12:58 pm
  
  Thanks, Stay connected.
  
  Reply
- Pow June 11, 2019 At 4:54 pm
  
  Thank very much shaan,I’m new of this field and I’m eager to learn about coding.I’m very lucky that I stamble on your website🤩.thanks for sharing your knowledge to us.keep sharing
  
  Reply
  - shaan June 11, 2019 At 5:05 pm
    
    Your most welcome bro.
    
    Reply
Shiv June 11, 2019 At 6:35 am

Thank…..keep it up

Reply
- shaan June 11, 2019 At 9:27 am
  
  Thanks for your comment, Stay connected.
  
  Reply
Taranjeet August 4, 2019 At 3:18 pm

Where i Could See Those Submissions? like can i connect Mailchimp with this? Or How can i know someone subscribed? In WordPress please

Reply
- Ellen.Vivian January 2, 2020 At 11:51 am
  
  How can you get plum blossoms without any cold and bone?
  
  Reply
deck August 28, 2019 At 5:54 pm

ssss

Reply
sd September 28, 2020 At 8:57 pm

jkkj

Reply
asdasd February 14, 2021 At 6:00 am

wow

Reply
Mike March 5, 2021 At 4:08 am

Hi, thanks for the great scripts! I have included them in the footer section of my website and the button seems to work fine! I have one question though, seems I am dumb and a complete rookie: after the congrats message, how to handle the newsletter, where do the email addresses which subscribe go?
Thank you so much!

Reply
Fouad October 18, 2021 At 2:46 pm

This is amazing. It’s just what I’ve been looking for. Very efficient and space is very optimized. Great work!

But how can we grab the email address entered? Which variable is it stored in?

Reply
anto November 1, 2021 At 6:32 pm

antoniojryy575@gmail.com

Reply
Radha March 20, 2022 At 10:10 pm

radha.dhekane@gmail.com

Reply
Costa Danial November 15, 2022 At 10:48 am

Hi, thanks for the great scripts!

Reply
Costa Danial November 15, 2022 At 10:48 am

danial00costa1990@hotmail.com

Reply
Ariyan May 26, 2023 At 12:53 am

Yes

Reply