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.
<!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">
<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">
<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>