Add a Stylish Feedburner Email Subscription Form to your Blog

You may have started to receive some good traffic flow on your website do you want to increase more? Whether you are a professional blogger or blogging for a hobby there are some folks who always stick to your blog and love your writings. Since you blog more often the main goal should be building a community of peoples and that is what converting visitors to subscribers is. Readers who love your blog will be looking for a way to get latest updates straight in their inbox. So by adding an email subscription form people who are interested will start subscribing and automatically receive content whenever you update your blog.

Feedburner is a service by Google that lets visitors subscribe to your blog feeds. by adding this stylish Feedburner Email subscription box in your sidebar people start to subscribe by entering their email address. After they subscribe, a verification email will be sent to them in which they have to confirm the subscription and when done Feedburner automatically starts delivering the latest content. Feedburner email subscription widget will help you to build a mailing list effectively, so if you don’t have a subscription form on your website then it’s time to add one. Hold on! First, do you have a Feedburner account if not its simple to setup one? Here is how to setup Feedburner feeds for WordPress and here is the guide to setup Feedburner for Blogger. In this post, we will see how to add Stylish Feedburner Email Subscription Form in WordPress and Blogger.

How To Add Email Subscription Widget To Blogger

In both those tutorials, we have mentioned our users to enable email subscription so that they can offer feed updates via email. Here are some other Feedburner tutorials which would be helpful for you in later. Setting up Feedburner email subscription form is very simple and for those who can’t figure out here is the quick tutorial to setup a basic Feedburner email.

Setting up Feedburner email subscription form

Before you can setup the email opt-in you have to enable email subscriptions. Login to your Feedburner account, navigate to publicize tab and then enable email subscriptions. Next, in subscriptions management you will see a code like this, just copy that and follow the instructions below to add in WordPress and in Blogger.

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=TheTech’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><p>Enter your email address:</p><p><input type=”text” name=”email”/></p><input type=”hidden” value=”TheTech” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

WordPress:

Login to your WordPress dashboard, go to Appearance > Widgets, drag the HTML text widget to your sidebar and then save it. scroll down if you want to add Stylish subscription box.

Blogger:

Login to your Blogger account, choose your blog and from dashboard go to Layouts. Now click on add a gadget, select HTML / JavaScript gadget and then place the code in that’s it.

After adding the code go and check your blog sidebar where you can see the Feedburner subscription form which looks very plain.

Customizing Subscription Box

The HTML code which Feedburner provides as the email subscription form code is pretty basic without any kind of style or cuteness. So I’ve added some style in it to make it more attractive and catchy for the readers to subscribe to the newsletter.

Here’s the customized stylish code add it in Blogger or WordPress using same way mentioned above

<style type="text/css"> .hbzsub {     background-color: rgb(87, 98, 105);     width: 100%;     height: 100%;     padding: 5px;     box-shadow: 0px 0px 5px rgb(87, 98, 105); }  .hbzform-inner {     text-align: center;     color: rgb(255, 255, 255);     font: bold 16px "trebuchet MS","Tahoma"; }  .hbzemailform {     width: 240px;     margin: 10px auto; }  #hbzemailbox {     background-color: #798187;     color: #FFF;     width: 208px;     border: 1px solid #697780;     padding: 15px;     text-align: center;     height: 18px;     box-sizing: content-box; }  #hbzemailbutton {     background-color: rgb(243, 93, 92);     border: 1px solid rgb(215, 84, 83);     color: rgb(255, 255, 255);     width: 240px;     font: bold 16px "trebuchet MS","Tahoma";     padding: 15px;     text-align: center;     height: 50px;     margin: 10px auto;     cursor: pointer; }  #hbzemailbutton:hover {     background-color: #E64C4B;     border: 1px solid #BF4A49; }  .hbzsignup-form {     margin-top: 15px; }  .hbzsocial-icons {     overflow: hidden;     text-align: center;     border-bottom: 1px solid rgb(133, 133, 133);     width: 230px;     display: block;     margin: 20px auto; }  .hbzsocial-icons ul {     margin: 0px auto !important;     text-align: center;     padding: 0px !important;     display: inline-block; }  .hbzsocial-icons ul li {     background: transparent none repeat scroll 0% 0% !important;     border: medium none !important;     float: left;     list-style-type: none !important;     padding: 0px !important;     margin: 0px 2px !important; }  .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after {     display: none !important; }  .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {     background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;     -moz-border-radius: 50%;     -webkit-border-radius: 50%;     border-radius: 50%;     display: block;     height: 34px;     overflow: hidden;     text-indent: -999px;     transition: all 0.25s linear 0s;     width: 34px; }  .hbzsocial-icons ul li.social-facebook a {     background-position: -62px 1px; }  .hbzsocial-icons ul li.social-facebook a:hover {     background-color: #3b5998;  }  .hbzsocial-icons ul li.social-twitter a {     background-position: -254px 1px; }  .hbzsocial-icons ul li.social-twitter a:hover {     background-color: #00aced;  }  .hbzsocial-icons ul li.social-gplus a {     background-position: -95px 0px; }  .hbzsocial-icons ul li.social-gplus a:hover {     background-color: #dd4b39;  }  .hbzsocial-icons ul li.social-pinterest a {     background-position: -159px 1px; }  .hbzsocial-icons ul li.social-pinterest a:hover {     background-color: #cb2027;  }  .hbzsocial-icons ul li.social-rss a {     background-position: -190px 0px; }  .hbzsocial-icons ul li.social-rss a:hover {     background-color: #F87E12;  }  </style>  <div class="hbzsub">  <div class="hbzsocial-icons">   <ul>    <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>    <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>    <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>    <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>    <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>   </ul>  </div>   <div class='hbzsignup-form'>   <div class='hbzform-inner'>    <h4>Subscribe to my Newsletter</h4>   </div>   <div class='hbzemailform'>    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>     <input name='uri' type='hidden' value='[Your Blog uri]'/>     <input name='loc' type='hidden' value='en_US'/>     <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>     <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>    </form>   </div>  </div> </div>

Don’t Forget to change the values highlighted in above code with your own Facebook, Twitter, Google+, Pinterest, RSS URLs and Feedburner username, That’s all you have to do if you face any problem during the process ask in the comment section below.