How to Customize your Feedburner Email Subscription Form (Part-1)



All of us like to have a good template with matching design and widgets. Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

  1. Your Original Code would be like this:

    <form style="border:1px solid #ccc;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=Your feed ID here‘, ‘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="http://feeds.feedburner.com/~e?ffid=Your feed ID here" name="url"/><input type="hidden" value="your blog name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

  2. Change Background Colour:

    To change the background colour, add:

    background: #00BB11

    just after,

    text-align:center;

    So the Code would be:

    <form style=”border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;“

    (For RGB Color Codes Chart, click here)

  3. Add a Background Image:

    To add a background image, add:

    background: url(your image url here);

    just after,

    text-align:center;

    So the Code would be:

    <form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;background: url(your image url here);"

    (Change the image URL to add your own)

  4. Change the Width of the Textbox:

    To change the width of the Textbox, you need to alter the code:

    width:140px

    (You can just increase or reduce the size according to your requirements)

    For example:

    <input type="text" style="width:250px" name="email"/>

  5. Add Default Text in the Textbox:

    You can add a default text in the textbox to make it more attractive to the visitors. Just use this simple technique:

    Remove the code:

    <p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

    and replace it with

    <input type="text" style="width:240px" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;"/>

Need some more customization? Read Part-2 here!



You May Also Like:

Article by Shafar.
About the Author: Tech Freak, Android Lover, Wordpress Addict, Social Media Junkie and the Founder of TipsBlogger.
To submit guest posts to TipsBlogger, please read the Guidelines.

30 Responsesto “How to Customize your Feedburner Email Subscription Form (Part-1)”

  1. jj-momscashblog says:
    September 10, 2008 at 3:33 am

    Hi Shafar, You always give us an informative post. I had no idea that one could customize our feedburner. I’m having or did have problems just getting into my feedburner awhile back that right now I have no desire to customize anything to do with my feedburner right now. But I am glad to know that we have that choice to pimp our feedburner if we want. Thanks for the info. Your friend…

  2. Shafar says:
    September 10, 2008 at 1:02 pm

    @jj-momscashblog
    Hi JJ, this post contains just simple and minimal tips to customize feedburner email box. Still more tricks are there to make its design more colourful and attractive.I’ll come with more posts on this topic.Thanks for your comments.Keep in touch.

  3. football Mania says:
    December 14, 2008 at 4:33 am

    nice tips

  4. Vincent says:
    December 21, 2008 at 8:25 pm

    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.comThe code for this can be found here:http://vcrossley.com/2008/12/customize-the-feedburner-email-subscription-form/

  5. Capital Rider says:
    February 18, 2009 at 7:42 am

    More Useful post,Thanks lot

  6. Fetra says:
    April 21, 2009 at 7:01 pm

    i’ve looking for this tips…good work i like it…. now i can edit my feedburner on my blog http://blogfetra.blogspot.com

  7. Funny Pics Picture says:
    May 9, 2009 at 8:10 am

    great tips! I have just started blogging and i will apply this technique soon

  8. test says:
    May 27, 2009 at 12:44 am

    great post. may I ask how I get my feed ID and insert in the feedburner email subscribe box?thanks

  9. Shafar says:
    May 27, 2009 at 3:50 pm

    @test
    You can find your FEED ID from your email widget code provided by Feedburner. Refer this post to get the email widget code:How to Add Feedburner Email Subscription Widget to your BlogRegards

  10. Maurice says:
    July 7, 2009 at 6:05 am

    Its work!. http://wisencare.blogspot.com

  11. Anonymous says:
    October 7, 2009 at 9:40 pm

    Thanx it is working in my Bloghttp://esydownloads.blogspot.com

  12. gisnap says:
    December 23, 2009 at 1:15 pm

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

  13. federico says:
    May 15, 2010 at 3:12 am

    Thanks a bunch! I have finally been able to tweak my email subscription box.

    Federico
    maitravelsite.com

  14. Alamin says:
    July 15, 2010 at 6:25 pm

    Thanks i just like it but jow can i add it below every post?

  15. Shafar@TipsBlogger says:
    July 16, 2010 at 11:06 am

    @Alamin
    Refer the post given below and replace the social bookmark links code with your feedburner email widget code.
    http://www.tipsblogger.com/2008/12/add-social-bookmark-widgetlinks-to-blogger/

    Sorry to solve this way. I don’t have a post about it yet. :)

  16. bang zul says:
    August 22, 2010 at 7:53 pm

    i like it

  17. Gamedope says:
    September 26, 2010 at 11:41 pm

    Inspiring questions! I would like to see more.

  18. Glenny says:
    October 6, 2010 at 1:41 am

    You have no idea how long i had to search for something like this! Many thanks! Have used the tips on my blog

  19. Tiffany @ The Gracious Pantry says:
    October 29, 2010 at 12:06 pm

    I changed the bg color of my form to a light gray. But now, the text boxe and submit button are also gray. Is there some way to make JUST the text box and submit button have a white background?

  20. Tiffany @ The Gracious Pantry says:
    October 29, 2010 at 12:12 pm

    Also wondering if there is a way to get the “Enter your email address” text to disappear once somebody clicks in the box so they don’t have to erase it themselves.

    thanks!

  21. Shafar says:
    November 5, 2010 at 5:34 pm

    @Tiffany-The Gracious Pantry
    Refer the 2nd part of this post given below to deal with background colors:
    http://www.tipsblogger.com/2008/09/how-to-customize-your-feedburner-email-subscription-form-part-2/

    Regarding “Enter your email address”, the code given in the 5th step is in such a way that when the user clicks on the text box, the default text disappears! Try again now. :)

  22. tech says:
    February 26, 2011 at 5:25 am

    very nice tip!

    Thanks

  23. gadget review says:
    March 23, 2011 at 11:38 pm

    nice trips, i need this, thanks

  24. Ayush Gupta says:
    September 20, 2011 at 9:53 am

    Thanks that was a nice info. Now I will try to modify my widget

  25. Shan Ali says:
    October 19, 2011 at 8:22 pm

    Thanks Shafat for the tutorial. i guess it would be better understood if you post a demo link to the subscription box… anyways nice post.. do visit my blog.. it would be my pleasure to hear from you

  26. dollar mill says:
    October 25, 2011 at 2:10 pm

    thanks, I will try adding a custom text to the subscribe field (e-mail address input field) to make it more attractive. Nice and concise stuff!

  27. FH says:
    November 7, 2011 at 1:04 am

    The code you’ve given in the 5th section doesn’t allow the text to disappear when someone clicks on it. For some reason, it isn’t working on my blog…

    Can you help me out, please? If you want, I can email you the code.

    Thanks!

  28. Mydul says:
    November 11, 2011 at 10:31 pm

    This was very helpful. Thanks a lot :)

  29. Shafar says:
    November 13, 2011 at 2:54 pm

    @FH
    Try this:
    <input type="text" style="width:240px" name="email" value="Enter your email address" onclick="value=''" />

  30. FH says:
    November 16, 2011 at 2:04 am

    It worked! Thank you so much, Shafar!

Leave a Reply