FeedBurner Email Subscription Form Gets A Facelift

09 January 2010 ~ 6 Comments

FeedBurner Email Subscription Form Gets A Facelift

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?

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…

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.

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

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…

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
Photo by Lisa Brewster

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

Popularity: 44% [?]

No related posts.

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

Tags: Blog Theme, Email Subscription, FeedBurner, Webpage Template

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

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 )
Alvin Tan 19 January 2010 at 9:34 pm Permalink

Thanks for reading through this post.
Shivani 11 February 2010 at 4:08 pm Permalink

thnx buddy for the nice tip
Alvin Tan 11 February 2010 at 11:02 pm Permalink

You’re most welcome!
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.
Alvin Tan 12 February 2010 at 10:09 am Permalink

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

UndeniableProfits.com