15 November, 2009

How to edit/Customize email subscription form given by feedburner


If you are new to blogging and does not know what feed burner is then i recommend you to read this
http://www.google.com/support/feedburner/bin/answer.py?answer=79408
Once you know what is feed burner ?then we can come to the editing part.
Your e-mail subscription code provided by feedburner 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=FunWithBlog', '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&gt;<input type="hidden" value="FunWithBlog" 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>

1. ADD/Change Background Color ::

Add :
background: #5A728C     //  replace #5A728C with any hexadecimal color code .You can Choose hexadecimal color from HTML color Pellate
just after  text-align:center;


2. Add image in background  ::

Add this :
background: url(your image url here);   //replace your image url here with your image url
just after  text-align:center;
 
3.Change Form height and Width  ::


Add width=300,height=300 attributes just like this  in the begining.
<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;height:300;>

in above code and change height and width according to your need .(usually measured in pixels).


4.Change the text on Subscribe button  ::

This is the text that appears on the Email button.Change it to anything you like. For Instance: Submit, Hit Me!, Join Me! etc.

5.Change color of subscribe me button ::


Search for ::  <input type=%u201Dsubmit%u201D value=%u201DSubscribe%u201D />

and Replace with
<input type="submit" style="font-size: 14px; font-weight: bold; color: white; background-color: rgb(0, 100, 0); text-align: center;" value="Subscribe...!"/>

To make it exactly like in the image.


6.Add default text in subscribe me text box ::
Search for :
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>
And replace 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;"/>

7.Removing Delivered by feed burner link :

just completely remove this from above code

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

Drop Your Comments  Below...!! Your Suggestions And appreciation Are the only things that i get in return.. .....

2 comments:


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin