Home » Blog Branding, Blog Promotion, How-to

How to Customize the FeedBurner Email Subscription Form for your Blog

19 January 2008 52 Comments

I have been receiving requests from many readers to tell them how to customize the FeedBurner Email Subscription Form and today I came across a Blog Catalog discussion by a friend who wanted to know the same. So I decided to compile a How-To about the same.

So here’s it. Let us look at the HTML code of the Feedburner Email Subscription Form


{form style="border: 1px solid #cccccc; padding: 3px; text-align: center" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/
emailverifySubmit?feedId=1514663', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Subscribe to Inspirit Blog's RSS Feed via Email:{input style="width: 160px" name="email" value="http://feeds.feedburner.com/~e?ffid=1514663" type="text" /}{/form}

Replace all curly brackets { and } to pointed brackets < and > please; Do a find and replace.

Explanation of the code:

form style="border: 1px solid #cccccc; padding: 3px; text-align: center

Change the border by changing the value against border; px implies width in pixel. In above line of code, the border is 1 pixel-wide.

Change the color of form by varying #HTML color. The color is specified as #RRGGBB where R is red, G is green, B is blue. The combinations can be set by using the hexadecimal values for each R G B i.e 0 to 9 and A to F.

Change the padding of the form, again measured in pixel width, by varying the value against padding in the above line of code.

Change the text alignment by varying the value against text-align in the above piece of code. You can chose : left, right or center.

action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/
emailverifySubmit?feedId=1514663', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

Keep this part exactly the same, just replace the feedId shown in red color with your own feedId that is same as the number in the end of the link to your dashboard at Feedburner. This part of code opens a separate Pop-up window measuring 550×520 px.

{input style="width: 160px" name="email" value="http://feeds.feedburner.com/~e?ffid=1514663" type="text" /}{/form}

This part tells you the width of the input form as displayed on your blog. Change the parameter against width in the above piece of code to vary the width of input form.

*****

Go Ahead! Play with the HTML code and customize it appropriately for use on your blog. Don’t forget to change the feedId; and replace { with < & } with >.

If you liked my post then :::

Subscribe to Inspirit Blog’s RSS Feed via Email:

52 Comments »

  • A u d e e said:

    :) try image replacement CSS techniques as well. You can find it in my blog and right click to see the code script.

  • Abhinav Sood said:

    There is no image in a default email subscription form, so indeed it is a good idea to add an innovative image directing your readers to the subscription form

  • Jirel said:

    Very useful article Abhi,
    Thank you for the post. I have customized the form of my blog.

  • Double Your FeedBurner RSS Numbers Overnight | So You Want To Teach? said:

    [...] Make email subscriptions available [...]

  • 4 tips to increase your Feed Readers (written by DailyBlogTips Writing Projects Participants) | JackBook.Com said:

    [...] Make email subscriptions available [...]

  • Fare Soldi said:

    I have been having some problems with the feedburner email subscription form.
    Now, everytime a reader push the button to comment, he gets the feedburner subscription.
    How can I avoid it?
    I do not understand what I am missing!

    Please help!
    Francesco

  • Fare Soldi said:

    Problem solved.
    I realized I did not close the form tags!!!

    Thanks anyway for the great tips!

    Francesco

  • Abhinav Sood said:

    You are most welcome, Francesco. Glad that you’re problem is fixed and wish you good luck that you may move on smoothly and hassle free.

  • SaiF said:

    Hey Abhinav! REALLY HELPFUL post here! Well done, keep it up! =)

    Btw, I need to ask you if we can insert a custom field for name so that we can send out E-mails to subscribers like an autoresponder..

    That would really help me reduce the cost of running my blog!

    Thanks! =)

  • Abhinav Sood said:

    There’s no way you can do that because even if you insert a custom field for name (that’s easy HTML!), FeedBurner won’t use that while sending your RSS via email.

    This is a nice idea though! I can try writing to Feedburner suggesting the inclusion of this feature in a future update.

    Thanks for commenting :)

  • Predeep said:

    Very useful tutorial indeed i was thinking of putting an email subscription form at the end of my post since ages but never figured out how to do it.

    But thanks to your tutorial now all my post have a footer signature asking for email subscription.

    Predeeps last blog post..The Extinction of Dinosaur Marketers Part 1 [Digg]

  • Syndication & RSS | Really hot mail said:

    [...] Customize the subscription form [...]

  • Robert Mann said:

    The e-mail entered in your Feedburner email form does not carry over into the pop-up window. User must re-enter e-mail, so the form is actually worse than a link. I’ve yet to see the feedburner e-mail form function on a hosted WordPress.org site (there are 1,000 posts on how the form won’t function on WordPress.com sites, but zero explanation for hosted site, other than it should work). Even the Feedburner email form on ProBlogger.net doesn’t function correctly! We need a hero! (Sorry if I’m a littly crabby, I actually really appreciate your blog).

  • eruttVaHwhashfah said:

    Good advice is something a man gives when he is too old to set a bad example.–Louis La Rochefoucauld (1777–1815)

  • pisles said:

    Buy land, they’re not making it any more.–Mark Twain (1835-1910), U.S. writer

  • Should you know Programming, if you are Blogging? said:

    [...] to do the most basic things for your blog – like how to make a link open in a new window or tab or How to customize Feedburner RSS Email Subscription Form. If you get stuck somewhere, search the internet and you’ll always find something [...]

  • Chelle@Pittsburgh Hauling said:

    That’s a really useful tutorial. I never really liked the feedburner email box so I will have to try that. Thanks for the tips :)

    One of the other things I’d like to learn how to do is write your own contact form – I’ll have to see what other tutorials you have on here :)

  • Chelle@Pittsburgh Hauling said:

    P.S.- You might want to check your plug-ins, especially if you’ve recently upgraded to wordpress 2.6 & make sure they’re all up to date – I got a long list of database errors after posting my last comment instead of going back to the page, but the comment did post.

  • Abhinav Sood said:

    I was playing around with the Permalinks here, and those were the errors showing up there for some time. I believe all my plugins are working fine, but I’ll see if any other commentator faces this issue. If there will be any problem, I’ll work to fix that asap!

  • Jigsawman said:

    Not bad,im gonna customize mine right now

    Jigsawmans latest published blog-post ………. DropJack:Will this be the next Digg

  • Shafar said:

    Check out my new post about Customizing Feedburner Email Subscription Box:
    http://jumbleblogger.blogspot.com/2008/09/customize-your-feedburner-email.html

    Shafars latest published blog-post ………. 5 Tips or Techniques to Generate Free Traffic to your site

  • Steve@alternative music chart said:

    woo thanks for that, getting to work right now!

  • Justin@make money blogging said:

    Thanks for covering this. It took me a while to mess with this stuff and get it right when i first started blogging. this post will definitely save people tons of time.

  • Pratish said:

    Abhinav – thanks for a very helpful post! I’m using WordPress as well and would like to know how you get the email subscription box to come up under each of your posts.. that’s brilliant! (Sorry am a bit new at this so don’t know where to put the code.. please help!)

    Thanks!

    Pratishs latest published blog-post ………. September 5, Teachers Day in India

  • Monetary Scientist said:

    Very helpful post! Thank you so much. I am using it with my WordPress blog. The only thing I need to figure out now is where to put it in the theme.

  • Troy Pentico said:

    Very useful post for non-techies like myself. Thanks.

    Troy Penticos latest published blog-post ………. Always Use Juicy Snippet Text

  • Vincent said:

    I have tweaked the original code a bit to get gray text prefilled within the form field, and when you click on it the text disappears. It lets the form be a lot smaller. Check it out in action at http://offmanhattan.com

    The code for this can be found here:

    http://vcrossley.com/2008/12/customize-the-feedburner-email-subscription-form/

  • kevin@Web Hosting Ireland. said:

    Nice post. The fact you took the time to show the code for feedburner email subscription and how to change it for each thing makes this easy for anyone who wants to try it.

    I liked your post on targeting certain people for sites with adsense also.

  • Shane Hudson said:

    This is very useful, I am about to do this right now!

    Thanks!
    Shane

    Ps. Be sure to check out my blog (click my name)!

  • Night said:

    Good night, bloggers =)

  • Pink said:

    what a real story..

  • seo tips said:

    awesome information.iam pretty good at coding but never got this idea.thanks .

    seo tipss latest published blog-post ………. Best Wallpaper for people aiming to earn money through the net ?

  • steve@Debt Settlement Program said:

    Great advice here, sucks i didnt close the form tags either, this definitely helped.

    steves latest published blog-post ………. You MUST Read This Article To Find Out Whether Your Credit Card Debt Relief Company Is A Scam Or Not!

  • Bill@cheap airfares said:

    “Don’t forget to change the feedId”

    You could have left this out & maybe other blogs would be signing people up as subscribers for you :)

    Also, you can wrap your html in tags, so that you don't have to use { } braces in your code demos. But this is just nit-picking, thanks for the tips.

  • Abhinav Sood said:

    Yeah, I could have – but when I wrote this post earlier I hadn’t styled code tags so well to look good here. Thanks for the heads up. Inspirit Blog is under renovation and everything has been taken care of in the redesign..

    Abhinav Soods latest published blog-post ………. Inspirit Blog condemns November 2008 Mumbai Terror Strike

  • Dade said:

    I’ve never given this a try, but I think it’s about time I do.

  • Bera said:

    Hey, is there a section just for latest news

  • WordPress Paypal said:

    Hi, Nice post… I have got a question that is slightly related but off topic. Any idea why the feedburner emails that I receive in my gmail doesn’t have any images?

  • Abhinav Sood said:

    The feed publisher decides whether he wishes to send images through the feed or just the content so that the subscriber has to visit the blog to come see those!

    If the emails that you receive from Feedburner have no images, that’s none of your faults – its only because the publisher has not chosen to send them via their email RSS feed.

    Abhinav Soods latest published blog-post ………. CSSJockey in Alexa Top Million!!

  • johan said:

    when people subscribe, they get an activation email from “FeedBurner Email Subscriptions”. can i change that so it comes from “MySite Email Subscriptions”

    thanks

  • TechChunks@Tech Chunks - Chunks of Tech Tips, Tricks and Tweaks said:

    Wonderful. I had been looking for this for such a long time. Thanks to Google, finally I found it here. You have got a nice tech blog here. Cheers!
    .-= TechChunks@Tech Chunks – Chunks of Tech Tips, Tricks and Tweaks´s last blog ..World’s First Motion Sensitive Headphones from Sony Ericsson – MH907 =-.

  • Ezuca said:

    Thanks for the tutorial. It’s easy to comprehend, the amateurs would understand it quickly.
    .-= Ezuca´s last blog ..80 Ultimately Beautiful Macro Photography Shots =-.

  • Money Academy said:

    this customization help but i want to add a box as yours for rss
    .-= Money Academy´s last blog ..Select blinds is your window blinds choice =-.

  • ledley @ best wireless headphones said:

    Good post…nice simple tutorial on how to convert to html.You can play around with the html code in a simple free website builder like NVU if you want to understand html more.
    .-= ledley @ best wireless headphones´s last blog ..Buy Wireless Headphones – You Can’t Go Wrong With These Two Options =-.

  • emil@internet marketing ireland said:

    This sounds to be a pretty easy codes to follow,thanks and I hope to learn more here.Kudos to you!

  • sundeep machado said:

    Thank you, I just added my custom code to my blog. It works great.
    .-= sundeep machado´s last blog ..How the seven lessons from KungFu Panda are applicable to a person who wants to earn money online. =-.

  • hasan said:

    Low Interest Student Loan

    Whether you’re looking for your first student loan, or your trying to figure out how to pay off the ones you have this article will have all the information you need to make the process easier

  • Pittsburgh Reviews said:

    Great article! Please contact me regarding a possible link exchange.

  • WP Themes said:

    Amiable post and this mail helped me alot in my college assignement. Say thank you you seeking your information.

  • MrBarns said:

    Super-Duper site! I am loving it!! Will come back again – taking your feeds too now, Thanks.

  • Top poker software said:

    This is really more effective for life span take on the concept. I never thought of it that way. I came across this site recently which I think will be of great use http://toppokersoftware.com/ Have a look!
    .-= Top poker software´s last blog ..Frontpage_02032010 =-.

  • The Internet Marketer of Today Needs to Incorporate Blogging Into Their Business In Order To Stay Competitive said:

    [...] How to Customize the FeedBurner Email Subscription Form for your Blog [...]

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.