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>

feedburner-email-subscription

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.

feedburner-email-subscription

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.

How To Add Email Subscription Widget To Blogger

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.

- Advertisement -
c5d094d2086cdf56ad5c1380e5317d2e?s=96&r=g - Add a Stylish Feedburner Email Subscription Form to your Blog
Adeel Younashttps://techwafer.com
Editor-in-Chief at TechWafer (previously The Tech) an Entrepreneur, Blogger, Developer, and Freelancer.

Recent Articles

OPPO launches Enco W51 headphones loaded with exciting features

Hoping to connect users' lives in a smarter way, OPPO launches a new entrant as part of its IoT strategy – OPPO Enco W51....

realme C17 launched with 90Hz Display, 6GB RAM and 128GB Storage

realme has finally launched the most affordable realme C17 with 6 GB + 128 GB large storage & 90Hz ultra-smooth punch-hole display at an...

HUAWEI Y9a – the Midrange King Goes on Sale across Pakistan Today

The HUAWEI Y series continues to exceed expectations of young consumers all over Pakistan. It is touted as a worthy digital companion that flouts...

TECNO’s has launched its Hero Phone Spark 6 in Pakistan

TECNO has launched its awaited Hero Phone Spark 6 – a mid-range phone with 6 upgraded features at the BOL game show- hosted by...

realme C17 6 GB + 128 GB smartphone is launching online 23rd Sep

realme introduced the C12 back in August. Now the company is set to further expand its C series with the launch of...

Trending

93,157FansLike
2,569FollowersFollow
515FollowersFollow
4,916FollowersFollow
900SubscribersSubscribe

4 Comments

  1. You can do it by going into Widgets > adding Custom HTML and pasting the code above after making changes, let me know if you face any problem

Leave A Reply

Please enter your comment!
Please enter your name here