Add a Stylish Email Subscription Form below Blog posts

Without any readers and subscribers blogs are meaningless. In order to increase your readers and subscribers you should have an option to let people subscribe for your updates. Placing an Email Subscription form is an amazing idea to increase your subscribers. You can place a form anywhere in your blog layout and one of the most effective position is just under your blog posts.

Most of the bloggers use FeedBurner in order to send updates to readers or subscribers. Adding a stylish FeedBurner email subscription formbelow your posts can bring you a good amount of Subscribers. And you will get double benefits if you add your social profiles along with the form. This can also increase your Facebook fans, Twitter followers, Google+ circles. Check out the form below that comes with Social profiles.

Before adding this Subscription box in your blog make sure you have an FeedBurner account and other social media accounts.

How to Add Stylish Feedburner Email Form Below Blog Posts

You can do this by editing your single.php file. But that’s a difficult way to do this. Moreover you may mess up your codes and your blog will be broken.
So here is an easy way to get this done. You can use Post Layout Plugin to do this. On one of my previous posts, I wrote on how to use Post layout WordPress plugin.

Here is the code you will have to use to Insert Stylish Feedburner Form below your posts:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://roadtoblogging.com/adimages/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:2px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px; '>Get Updates on Your Email!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=roadtoblogging;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='roadtoblogging'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt="" class='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 12px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/roadtoblogging' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://roadtoblogging.com/adimages/rss.png'/></a>

<a href='http://www.facebook.com/roadtoblogging' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://roadtoblogging.com/adimages/fb.png'/></a>

<a href='http://twitter.com/istiaak' rel='nofollow' target='_blank' title='Follow me on Twitter'><img src='https://roadtoblogging.com/adimages/twitter.png'/></a>

<a href='https://plus.google.com/104279174365203057634/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://roadtoblogging.com/adimages/g.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='https://roadtoblogging.com/add-a-stylish-email-subscription' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

Now follow these steps:

  • Install Post layout plugin.
  • Go to Settings > Post Layout
  • Paste the code in the box named After the Content
  • Save the settings.

Important changes in the code:

  1. http://feeds.feedburner.com/roadtoblogging – Replace this with your feedburner link.
  2. http://twitter.com/istiaak – Replace with your twitter profile link
  3. http://www.facebook.com/roadtoblogging – Your Facebook page or profile link here
  4. https://plus.google.com/104279174365203057634/ – Replace with your Google+ profile link

You are done. Now check your blog. All of your posts will have a Stylish Feedburner email subscription form along with social media profiles. Let me know if you face any difficulties implementing this code.

  • ankur says:

    thanks now i have this added in my blog chk this:

    http://saitanzvilla.com/2012/09/lets-understand-100mbps-network-port.html

  • jhon SEO says:

    how to add a Stylish “Email Subscription Form” like you have in this page, below this post. email me instructions

  • Abdur Rakib says:

    Your form style is good. But I want to add a form like yours. Can you give the code for it to me?

    Thanks in advance

    • Istiak Rayhan says:

      Check your email.

      • Abdur Rakib@ Tips on blogging says:

        Thanks. Got it.

  • Maximillion says:

    Hello,
    I was looking for a cool and simple Subscription Form, and find it in your website.
    May You give me the code for your Email Subscription Form below post?

    Thank you

  • Charm says:

    Yours is great. Can you email me the code too?

  • Himanshu says:

    Thanks i will surely use it in my blog and will subscribe to your blog

  • Toufiq says:

    Nice Website indeed! I used Thesis 1.8.6 but now i used genesis with Yoast. The main drawback of thesis is you cant use yoast!

  • Rahul Zajari says:

    thanks for it dude but i want widget that you are currently using can you provide it to me

  • Hari Varrier says:

    How do I do this if I want to implement a signup form? I tried using Magic Action box plugin but it isnt what I want. Any ideas?

  • Lalit says:

    How to add this on my tech blog posts at http://www.elkeesmedia.com

  • Mohammed Saimon says:

    Hello Istiak, Could you please tell me how can I add a email newsletter box after each and every post? Here is my blog http://www.blogmat.net

    • Istiak Rayhan says:

      Did you follow above steps?

  • Sharon says:

    Like this! I notice that it’s missing the Pinterest social media icon. Is there anyway to include it?

  • Nice Widget,
    This is really amazing widget for me, i have used this widget on my blog
    thanks

  • Nice Rayhan
    This is really amazing widget i have used this on my blg\og
    Thanks for sharing