09 January 2010 ~ 28 Comments

FeedBurner Email Subscription Form Gets A Facelift

Web Design Tips


Are you using FeedBurner email subscription service for your blog or website? Are you happy with the design of the original email subscription form shown below? Does it really blends well with your blog theme or webpage template?

FeedBurner Email Subscription Form

Do you think it needs a facelift? Yes, I personally think so. If you think the same as me, please read on as I’m going to show you how to facelift your FeedBurner Email Subscription Form in 5 easy steps.

Here, I assume you already knew where and how to copy and paste the original subscription form code into your blog. If you are not sure, please let me know.

Below is my sample code. Please don’t copy it to your blog unless you want your readers to subscribe to my feed which I don’t mind!

<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=UndeniableProfits', '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="UndeniableProfits" 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>

 

Step #1: Set Form Width

If you want to set the Form Width to size, say 300, just add the following code to the <form style="…"> tag.

width:300;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;">

 

Step #2: Add Background Color

If you want the FeedBurner email subscription form to have a background color, say your favorite color code is #F4F4F4, then just add the following code to the <form style="…"> tag.

background-color:#F4F4F4;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;">

and the form will look like this…

FeedBurner Email Subscription Form

If you need a free color picker software that you can simply point the mouse cursor anywhere on the screen and tell you the color code, I would recommend ColorPic.

Step #3: Add Background Image

If you think you need a Background Image for the form, again just add the following code to the <form style="…"> tag.

background-image:url('IMAGE URL');

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');">

Let’s see how the form will look like if I use image below as the background image.

Background Image of Feedburner Email Subscription Form

Now, the form is being filled with the background image… but with repeated images.

FeedBurner Subscription Form

Step #4: Set Background Image to “No-Repeat”

If you don’t want the form to be filled up with repeated images, please add the following code to the <form style="…"> tag.

background-repeat:no-repeat;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');background-repeat:no-repeat;">

and the form will look like this…

FeedBurner Email Subscription Form

Step #5: Set Background Image to “Top-Right” Position

Do you think the form will look nicer if I can move the background image to the “Top-Right” position? So, here again I’m going to add the following code to the <form style="…"> tag.

background-position:top right;

Now, the tag will become this…

<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;background-color:#F4F4F4;background-image:url('IMAGE URL');background-repeat:no-repeat;background-position:top right;">

Yeah! FeedBurner Email Subscription Form has just got a facelift! It looks much more better now, isn’t?

FeedBurner Email Subscription Form

FeedBurner
Photo by Lisa Brewster

Have you added your own customized FeedBurner email subscription form to your blog or webpage? Hope you enjoyed!

Popularity: 27% [?]

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: , , ,

28 Responses to “FeedBurner Email Subscription Form Gets A Facelift”

  1. VISHAL 19 January 2010 at 6:02 am Permalink

    Thanks for the useful post :)
    VISHAL´s last blog ..Download High Quality Desktop Wallpapers : Set 4 ( Jan 2010 ) My ComLuv Profile

  2. Alvin Tan 19 January 2010 at 9:34 pm Permalink

    Thanks for reading through this post.

  3. Shivani 11 February 2010 at 4:08 pm Permalink

    thnx buddy for the nice tip :)

  4. Alvin Tan 11 February 2010 at 11:02 pm Permalink

    You’re most welcome!

  5. online payday advances 12 February 2010 at 12:07 am Permalink

    I am to a great extent impressed with the article I have just read. I wish the author of http://www.undeniableprofits.com can continue to provide so much useful information and unforgettable experience to http://www.undeniableprofits.com readers. There is not much to state except the following universal truth: Simplicity is the highest form of complexity, as we cannot explain it any further. I will be back.

  6. Alvin Tan 12 February 2010 at 10:09 am Permalink

    Appreciate your comments and also glad to hear that you will be back.

  7. Funtoosh 10 March 2010 at 6:46 am Permalink

    You have tested it and writing form your personal experience or you find some information online?

  8. Alvin Tan 10 March 2010 at 11:54 am Permalink

    Of course I’ve test it myself and writing from my personal experience.

  9. Techa1 14 March 2010 at 5:29 am Permalink

    Nice Post. Keep Visiting http://techa1.com

  10. Alvin Tan 14 March 2010 at 10:01 am Permalink

    Thanks for your visit.

  11. Video Game Violence 15 April 2010 at 3:48 am Permalink

    I never knew how much information there was on this! Thanks for making this easy to take in

  12. Bolaji 22 April 2010 at 10:07 pm Permalink

    Thanks, but i dont know where to paste the code. Kindly help me out.

  13. Alvin Tan 23 April 2010 at 2:49 pm Permalink

    Are you referring to WordPress blog? For WordPress blog, just drag a ‘Text’ Widget to your sidebar and paste the code there.

  14. Riri 6 May 2010 at 9:24 am Permalink

    Does anyone know how to make the “Subscribe” button inline with the form, so that they are next to each other? Cheers.

  15. Alvin Tan 6 May 2010 at 2:29 pm Permalink

    Hi Rini, is this what you mean?

    Enter your email address:

    Delivered by FeedBurner

    If yes, then try this 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=UndeniableProfits', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/><input type="hidden" value="UndeniableProfits" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></p><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

  16. Riri 7 May 2010 at 3:13 am Permalink

    Yes, thank you so much, it works! Thanks for the help :)

  17. Loren Galka 18 May 2010 at 2:02 am Permalink

    Totally digg your website thanks a lot for the info

  18. Alica Loop 24 May 2010 at 3:01 pm Permalink

    Wow, this is extremely helpful info, much appreciated.

  19. George Koroma 25 May 2010 at 10:01 am Permalink

    amazing

  20. smoke free online 27 May 2010 at 12:00 pm Permalink

    great post, thanks. theres great stuff in this blog

  21. Federico Stavrides 10 June 2010 at 6:04 am Permalink

    Very good blog.Really thank you! Much obliged.

  22. Click Here 12 June 2010 at 2:59 am Permalink

    Say, you got a nice post.Much thanks again.

  23. Vacation Guide 15 June 2010 at 9:12 am Permalink

    I Will have to come back again when my class load lets up – nevertheless I am taking your RSS feed so I can read your site offline. Thanks.

  24. wedding photography 16 June 2010 at 3:33 am Permalink

    Appreciate you sharing, great blog article.Really thank you! Want more.

  25. Choosing and Caring For Wine Glasses 20 June 2010 at 12:26 am Permalink

    Thanks for the information that you provided here. Please share more.

  26. online jobs 6 July 2010 at 9:29 am Permalink

    I love your website! did you create this yourself or did you outsource it? Im looking for a blog design thats similar so thats the only reason I’m asking. Either way keep up the nice work I was impressed with your content really..

  27. knockoff gucci handbags 21 July 2010 at 6:04 pm Permalink

    this is really a nice place. I will come back. Austin

  28. Clare @ Blue Archipelago Reviews 28 August 2010 at 2:17 pm Permalink

    I can’t believe how far I had to search to find this information! Thank you so much for posting how to change the horrible feedburner box, looks much better now :)

    Clare
    Clare @ Blue Archipelago Reviews´s last blog ..Golden Rainbows by Christine Brannen ReillyMy ComLuv Profile


Leave a Reply

CommentLuv Enabled