Fully Functional Email Sign up Form Code
Web admins & bloggers use different kinds of animated email sign up forms to increase their reader base.
There are lots of advancement in the web designing field, that keeps the interest of readers towards the WebPages. Most famous social media sites like FB, Twitter, LinkedIn, GooglePlus keep on adding new features to their pages, so that the users does not get bored.
In this article we are not only going to design a signup form, but also, we are going to make it popup at end of page.
Creating a Email Subscription Form
In many blogs the webs admins add opt in forms that popup at end of page. This end of page signup forms gets more attention than the one at top. This way a blog gets more subscribers, which is a important aspect for growing the traffic for a website or blog.
Thanks to http://codepen.io for lot of stylish CSS forms with source code. I have taken one of the simple sign up from this website and using it in my site too.
To make a signup form work, we need to design the below list of items.
- HTML for Webpage + HTML for Signup Form
- CSS for Signup Form
- jQuery code to animate the form.
I have combined all three in the below code. Copy this code; paste it in a notepad, save it as ‘Signup_Form_Testing.html”.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
jQuery(window).scroll(function() {
if(jQuery("#sidiv").css('width') === '340px'){
if(jQuery(window).scrollTop() + jQuery(window).height() > (jQuery("#sicontent").height()-25)) {
$("#sidiv").fadeIn(2000);
$("#sidiv").css({'position':'fixed','display':'block'});
}else
{
$("#sidiv").fadeOut();
}
}
});
</script>
</head>
<body>
<style>
#sidiv{
width:340px;
height:185px;
left:950px;
top:250px;
position:absolute;
float:right;
background: #3B5998;
color: #FDFCFB;
text-align: center;
border-radius:5px;
font:15px/1.4 Georgia;
display:none;
}
.siform {
width: 90%;
margin: auto;
}
.siheader {
font-size: 40px;
}
.siinput {
display: flex;
align-items: center;
margin:20px 0px 0px 0px;
}
.sibutton {
height: 44px;
border: none;
}
#siemail {
width: 75%;
background: lightgoldenrodyellow;
font-family: inherit;
color: darkblue;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
}
#sisubmit {
width: 25%;
height: 46px;
background: lightsalmon;
font-family: inherit;
font-weight: bold;
color: darkblue;
letter-spacing: 1px;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
#sifullwidth {
width: 1250px;
}
#sicontent {
width:750px;
margin:35px 10px 0px 100px;
}
</style>
<div id="sifullwidth">
<div id="sicontent">
<p>Signup Form Testing page</p>
<p>Signup form in this test page is actual Signup form for Officetricks.com</p>
<p>1</p><p>2</p><p>3</p><p>4</p>
<p>1</p><p>2</p><p>3</p><p>4</p>
<p>Signup Form Testing page</p>
<p>Signup form in this test page is actual Signup form for Officetricks.com</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
</div>
<div id="sidiv">
<form class="siform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=OfficeTricksUpd',
'popupwindow','scrollbars=yes,width=550,height=520');return true">
<div class="siheader">
SIGN UP
</div>
<div class="sidesc">Get Notified With Article Summary in Your Inbox When We Publish Anything New
</div>
<div class="siinput">
<input type="text" class="sibutton" id="siemail" name="email" placeholder="EmailID@Gmail.COM"
onclick="if ( this.value == 'Email Address' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Email Address'; }">
<input type="hidden" value="OfficeTricksUpd" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" class="sibutton" id="sisubmit" value="Subscribe">
</div>
</form>
</div>
</div>
</body>
</html>
Functioning of Email Subscription Test Page
Open this file in Firefox or chrome (because I have not tested this code in browsers other than these).
The webpage will have some sample text. Press page down or down arrow key and scroll to end of page. Once you reach the end of page, the Signup form will appear as how we have seen animation in olden day Powerpoint presentations.
Once you scroll up, the form will disappear again.
How to make Email Sign up form with jQuery animation?
Within the jQuery script, we are first checking for the window scroll parameters with this code ‘jQuery(window).scroll(function()’. Inside this, we are checking whether the user has scrolled to “html document height – 100px’.
If the condition matches, then we are making the Sign up form to fadeIn. This is taken care by $(“#sidiv”).fadeIn(2000); If the condition did not match, then we are making the signup form to fadeout.
How to Run a jQuery Code?
A jQuery or JavaScript code which are embedded inside the tags <script> </script> can be executed by the Internet browser itself. Yes. That’s right. You Firefox and Chrome have the capability to execute the code. Just press F12 if you are using Firefox & ‘CTRL + Shift + J’ if in Chrome.
Type alert(“Hello World”) and press enter key. A message box will appear with the message given inside the alert function. Yes. You have just now completed a crash course in jQuery on how to write a hello world program.