How To Customize FeedBurner Email Subscription Form for Your Blog

by Rajib Kumar

Are you a blogger who wants to use advantage of your rss feeds by giving alternatives to your visitors to be able to subscribe your blog’s update by email? If yes, then go feedburner to use free Email Subscription form.

I have been receiving requests from many readers to tell them how to customize the FeedBurner Email Subscription Form and today I am going to share how to customize FeedBurner Email Subscription form. Let’s see how to do this.

Normal FeedBurner Email Subscription form code

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techncom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="techncom" 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 Form Preview

 

Enter your email address:
Delivered by FeedBurner

 

Explanation of the codes
style="border:1px” means width of the border. Change the width of the border with 1,2,3..
solid #ccc” means color of borber, You can use your own customized color code.
text-align:center” means position of the text-align. You can use left, right or center.

action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techncom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"

Keep this portion same.

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="techncom" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" />

style=”width:140px” means width of the email subscription box. You can change with your desire width.

Change the above parameter as your demand. You can also use my customized form.

Customized form Preview

FeedBurner Email Subscription

Here is the code of Customize FeedBurner Email Subscription Form

<div class='email-com'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=techncom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='textarea' name='email' onblur='if (this.value == "") {this.value = "Enter email address here";}' onfocus='if (this.value == "Enter email address here") {this.value = "";}' type='text' value='Enter email address here'/>
<input name='uri' type='hidden' value='techncom'/>
<input name='title' type='hidden' value=''/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailsubmit' type='submit' value='Submit'/>
</form>

Only change “techncom” with your feed name to use this cool FeedBurner Email Subscription Form.

I hope you will like this. Then join Facebook Fan Page and follow on twitter @rajib882 to support my blog.

None found.
1 SEO Reseller February 22, 2011 at 3:58 am

>Cool, I used Feedburner when I wrote my 5 blogs. The reason why my blogs are receiving a high amount of web traffic is because of Feedburner. A lot of my site visitors are subscribing to my blogs through this.

2 IMOOOOO February 26, 2011 at 8:10 pm

>nice….
a must try stuff

3 Azmee @ Buka-rahasia March 4, 2011 at 11:06 am

>hey thanks for the easy step by step tips. I will have to apply this trick soon.

4 Rajesh March 9, 2011 at 5:31 pm

Hi Rajib, Supper Post. I liked your Code but i am having some difficulty. If you see Subscribe Column on my website at stockssavvy.com letter Icon doesn’t show up in it. Even Submit shows different in my Website. Can you pleas kindly help me in resolving this issue

5 mobile phone blog June 8, 2011 at 1:02 am

>it is in my blog now… thanks a lot….

6 Red @ Virtual Business Matters September 14, 2011 at 3:38 pm

>nice tutorial. will implement this. thanks.

7 Nwosu Desmond June 5, 2012 at 1:25 pm

Great piece …nice tips. You’ve just won a new reader i;ll definitely subscribe to your RSS feeds. I like your angle on this, you’ve just solved a problem i have been searching all the web for.

Thanks Thanks Thanks again…..

Nice blog though…..well optimized.

8 jes December 27, 2012 at 8:19 am

i tried this code and it didn’t look anything like your custom sample on my site.
no image, and much longer altogether. too bad.

Comments on this entry are closed.




Previous post:

Next post:

. Border