How to Beautifully Customize FeedBurner Email Subscription Form

Feedburner Provides you an option to send E-mail news letter to blog readers.The original feedburner’s email form works well in every blog platform but it is not designed well. It has only a simple design. if you want to Customize FeedBurner Email Subscription Form you can follow the insructions below

1. First of all Login to feedbuner.com
2. After you have sign in, you’ll find the blogs feed then click your blog feed url that you want to optimized
3. Find Publicize tab above, then on the left side bar expand Email Subscriptions –>Subscription Management.

Your FeedBurner’s Email Subscription original code looks like this:

<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=Avoiderrors’, ‘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=”Avoiderrors” 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>

To Customize the headline Text of the FeedBurner Email Subscription Form

Replace the   <p>Enter your email address:</p>   with your own eye catching title.
So the code should look like this:
<p>Get The Latest Tutorial Via Email Straight to your Inbox!</p> And this is the example of my custom feedburner’s e-mail form

To Add or Change the Background Color on  the FeedBurner Email Subscription Form

Add the background color code (e.g. background:#66FF00) right after text-align:center;"
So the code should look like this:
<form style="border:1px solid #ccc;padding:3px;text-align:center;background:#66FF00;"

Note:You can change the color codes to any color you like, use this color chart as a reference.

To Add or Change Background Image on FeedBurner Email Subscription Form

Add the background image code (e.g. background: url(http://www.example.com/image.jpg)) right after text-align:center;
So the code would be:
<form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.example.com/image.jpg);"

Note:You can change the image URL to add your own, There are many RSS images around the web, I recommend the free ones from smashingmagazine, and deviantart.

To Change the Width and Height of the FeedBurner Email Subscription Form Text Box

Adjust the width of the text box width:140px to your requirements.
<input type="text" style="width:140px" name="email"/>
You can change to your desire width.

If you want to change the height of the text box, simply add height:20px right afterwidth:140px and adjust the height to your requirements.
<input type="text" style="width:140px;height:20px;" name="email"/>
You can change it to your desire height.

To Add Default Text inside the Text Box of the FeedBurner Email Subscription Form

You can add a default text in the text box to make it more attractive to the visitors.
Just remove the code below
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

and replace with
<p><input type="text" style="width:140px" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/></p>
You can change with your desire default text.

To Change Font Size and Font Color of the Text
Add font-size:20px;color:#000000 right after width:140px
So the code would be:-
<input type="text" style="width:140px;font-size:20px;color:#000000;" name="email"/>
You can change with your desire font size and font color.

To Remove “Delivered by Feedburner” Link
Just remove the following part from your code:
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

To Change the Style of the ‘Subscribe’ Button of FeedBurner Email Subscription Form

1. Go to Edit Template in the Blogger Layout
2. Search(Ctrl+F) for ]]></b:skin>
3. Add the following code just before ]]></b:skin>

.button {
background-color: #cc0000;
font-size: 80%;
font-family:Tahoma;
font-weight: bold;
color:#ffffff; }

Save the Template

• Now make a slight change to your Feedburner Email Widget code:
• Replace: <input type=”submit” value=”Subscribe” />
• with: <input type=”submit” value=”Subscribe” class=”button”/>

...