Beautiful Subscribe Form With JavaScript Validation

Hi guys today i am writing about subscribe form, 90% of websites using subscribe form this feature use for user get weekly or monthly updated with latest post or whats new.
You have visit most of websites out of that some websites show you popup ans some give you option enter your email get weekly update and subscribe our newsletter.

So today i am sowing you a very simple beautiful subscribe form using htm, css, bootstrap with javascript validations. This subscribe form you can use any where and with any kind of website such as news, tutorial, product base, e-commerce, organization, property etc.

HTML Code of Subscribe Form

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Beautiful subscribe form</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
</head>

<body>
<section id=”subscriber_sec”>
<div class=”container”>
<div class=”col-lg-12 section-title”>
<h2>Subscribe Our Newsletter</h2>
</div>
<form method=”post” name=”subscribenewsletter” onsubmit=”return subscribeValidations();”>
<div class=”col-md-5″>
<input type=”text” class=”form-control” name=”subscriber_name” id=”subscriber_name” placeholder=”Your Name” />
</div>
<div class=”col-md-5″>
<input type=”text” class=”form-control” name=”subscriber_email” id=”subscriber_email” placeholder=”Your Email” />
</div>
<div class=”col-md-2″>
<input type=”submit” class=”form-control” name=”subscribenewsletter” value=”Subscribe” />
</div>
</form>
</div>
</section>
</body>
</html>

CSSCode of Subscribe Form

<style>
#subscriber_sec{
background: #304352;
color: #ffffff;
padding:50px 0px;
}

#subscriber_sec .form-control {
background: transparent;
box-shadow: none;
border: 1px solid #f9f9f9;
color: #ccc;
font-size: 20px;
margin-top: 10px;
margin-bottom: 14px;
transition: all 0.4s ease-in-out;
}

#subscriber_sec .form-control:focus {
border-color: #e44c65;
color: #ffffff;
}

#subscriber_sec input {
height: 55px;
}

#subscriber_sec input[type=”submit”] {
background: #e44c65;
border:none;
color: #ffffff;
font-weight: 400;
letter-spacing: 1px;
}

#subscriber_sec input[type=”submit”]:hover {
background: #222;
color: #ffffff;
}
</style>

JavaScript Code of Subscribe Form

<script>
function subscribeValidations()
{
 var emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
 
 var subscriber_name = document.getElementById("subscriber_name").value;
 var subscriber_email = document.getElementById("subscriber_email").value;
 subscriber_name = subscriber_name.trim();
 subscriber_email = subscriber_email.trim();
 
 if(subscriber_name=="" || subscriber_name==" ")
 {
 document.subscribenewsletter.subscriber_name.focus();
 document.getElementById("subscriber_name").style.borderColor="#CE0505";
 alert("Enter Your Name!");
 return false;
 }
 if(subscriber_email=="")
 {
 document.subscribenewsletter.subscriber_email.focus();
 document.getElementById("subscriber_name").style.borderColor="rgb(15, 171, 15)";
 document.getElementById("subscriber_email").style.borderColor="#CE0505";
 alert("Enter Your Email!");
 return false;
 }
 
 if (emailReg.test(subscriber_email) == false) 
 {
 document.subscribenewsletter.subscriber_email.focus();
 document.getElementById("subscriber_name").style.borderColor="rgb(15, 171, 15)";
 document.getElementById("subscriber_email").style.borderColor="#CE0505";
 alert("Enter Valid Email!");
 return false;
 }
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts: You may like

Responsive Coming Soon Template

Stylish responsive sidebar menu navigation

Social sharing button sidebar widget

Pure css dropdown navigation bar

404 error page template

Lively Chat Pricing Plans Table Bootstrap Responsive Widget

Snow Jquery Countdown Timer Widget

Modern Contact Us Page Template Free Download

Beautiful bootstrap contact us page template free download

Stylish transparent services box template free download

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Free online tool to download Instagram videos, photos and save Instagram videos, photos to your device. It's free & easy to use.

Download Now

CURRENCY CONVERTER

Our real time currency converter calculator will convert your money based on current values from around the world. It's free & easy to use.

Convert Now

ROBOST.TXT GEN.

Create robots txt file that help search engines to crawling and indexing your site with help of our free online Robots.txt Generator tool.

Create Now

HTML MINIFIER

Free online tool to minify or compress html code and reduce the size of html code in few clicks. It's free & easy to use.

Minify Now

CSS MINIFIER

Free online tool to minify or compress css code and reduce the size of css code in few clicks. It's free & easy to use.

Minify Now

JAVASCRIPT MINIFIER

Free online tool to minify or compress javascript code and reduce the size of javascript code in few clicks. It's free & easy to use.

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.