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.
You May Also Like:
- CSS Circular Menu
- HTML CSS JavaScript Calendar
- Text Animate & Divide On Scroll
- Detect Browser Using JavaScript
- Basic Calculator In JavaScript
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:
1 2 3 4 5 6 7 8 9 10 |
<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> |
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:
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/** 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.
Thanks for that,just what i was looking for.love your site.As a developer this is a great resource
Thanks, Stay connected.
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
Your most welcome bro.
Thank…..keep it up
Thanks for your comment, Stay connected.
Where i Could See Those Submissions? like can i connect Mailchimp with this? Or How can i know someone subscribed? In WordPress please
How can you get plum blossoms without any cold and bone?
ssss
jkkj
wow
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!
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?
antoniojryy575@gmail.com
radha.dhekane@gmail.com
Hi, thanks for the great scripts!
danial00costa1990@hotmail.com
Yes