Create Email Subscription Form With Social Buttons

In this tutorial, we will be discussing on how to create an email subscription form with social buttons.Every blog must have an email subscription box so that readers can stay connected with it. Every user who subscribes to your blog using an email subscription form will get an email notification in his email account on every blog update.

You can also include social media buttons like Facebook, Google+, Twitter, Linkedin etc. in it.

You May Like To Read:

1. Add Thesis Email Subscription Widget To Your Blogger Blog
2. Add A Beautiful Subscription Box To Your Blogger Blog
3. Stylish Subscription Widget For Blogger And WordPress

Screenshot Demo Below:

How to Create Email Subscription Form With Social Icons

Learn how to create a custom subscription form for your WordPress or Blogger blog.You can also use this code for your website.

Add Subscription Box Widget To Blogger

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget

Add Subscription Box Widget To WordPress

1. Go to Dashboard > Appearance > Widgets > Available Widgets
2. Drag Text Widget Into a Sidebar.
3. Paste In The Code.
4. Save Widget & Its Done

Code For Subscription Box Widget

<style>
.subsemail{
border:none;
margin-left:auto;
margin-right:auto;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRm6B1re9Z1O_K1mVcuNPdPXrngNahWv_2Xn__fGeLk3v3WJyZGlTvQQg1ydY2gulIkHeflV-euUypn5vNu2uJmEuYwnCQ5NgTyN6lBk0SM2nBvJtK__56-iCjCSqbcKqr9MmrrCrYWOyj/s1600/blogsdaddy.com-subscribe-form.png') no-repeat top left;
width:280px;
height:245px;
}
.linkfacebook{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:24px;
cursor:pointer;
background:none;
border:none;
}
.linktwitter{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:88px;
cursor:pointer;
background:none;
border:none;
}
.linkgplus{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:152px;
cursor:pointer;
background:none;
border:none;
}
.linkrss{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:215px;
cursor:pointer;
background:none;
border:none;
}
.substextarea{
position:absolute;
overflow:hidden;
border:none;
border-right:none;
width:206px; height:23px;
margin-top:177px;
margin-left:50px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#666666;
font-style:italic;
}
.subsemailsubmit{
position:absolute;
overflow:hidden;
cursor:pointer;
border:1px solid gray;
width:70px;
height:20px;
background:none;
border:none;
margin-top:210px;
margin-left:188px;
}
</style>
<!--Begin Subscription-->
<div class="subsemail">
<form method="link" action="http://www.facebook.com/BlogsDaddy" target="_blank">
<input class="linkfacebook" type="submit" value="" title="Join BlogsDaddy On Facebook" />
</form>
<form method="link" action="http://twitter.com/BlogsDaddy" target="_blank">
<input class="linktwitter" type="submit" value="" title="Follow BlogsDaddy On Twitter" />
</form>
<form method="link" action="https://plus.google.com/106217413057730068740" target="_blank">
<input class="linkgplus" type="submit" value="" title="Follow BlogsDaddy On Google Plus" />
</form>
<form method="link" action="http://feeds.feedburner.com/BlogsDaddy" target="_blank">
<input class="linkrss" type="submit" value="" title="BlogsDaddy RSS Feed" />
</form>
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="substextarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address here&quot;;}" onfocus="if (this.value == &quot;Enter your email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email address here" type="text" />
<input class="subsemailsubmit" value="" type="submit" />
<input type="hidden" value="BlogsDaddy" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
</form>
</div>
<!--End Subscription-->

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

More Widgets:

1. Add Beautiful Email Subscription Box V2 In Blogger Blog
2. New Stylish Subscription Box For Blogger/Wordpress Sidebar
3. Blogs Daddy's Social Subscription Widget For Blogger & WordPress

If you want to add the widget on a specific place, then use the separate HTML and CSS and if you want the widget to appear somewhere in your sidebar, then jump directly at the Alternative section at the bottom.

If you need our help then ask me via comments.See you soon with more amazing widgets and tutorials.Keep in touch! Happy Blogging & Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.