How to Customize your Feedburner Email Subscription Form

Bloggers today I will teach you the codes by which any one can customize feedburner email subscription form according to his own needs.

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>

   
   

---

1. 
   

   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)

---

1. 
   

   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)

---

1. 
   

   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"/>

   
   

---

1. 
   

   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;"/>

   
   

______________________________________________________________

6. 
   

   Changing the height of the textbox:

   
   To change the height of the textbox, add:
   

   height:22px;

   
   just after:
   

   style="width:255px;

   
   So the part of the Code would be:
   

   style="width:255px;height:22px;…..

   
   (You can change the height according to your requirements)

---

6. 
   

   Changing Font-Colour and Font-Size of the Text:

   
   You can also change the font-size and colour of the text that users enters in the textbox.
   Add:
   

   font-size:15px;color:#AA33FF

   
   just after:
   

   style="width:255px;

   
   Example:
   

   style="width:255px;height:22px;font-size:15px;color:#000000…

   
   (Change the size and colour to make it more attractive and matching with your template)

---

6. 
   

   Changing the Style of ‘Subscribe’ Button:

   
   To change the style of the button, you need to add a small piece of code to your template.
   
   
   
   • Go to Edit Template in the Blogger Layout
   
   
   • Search(Ctrl+F) for ]]></b:skin>
   
   
   • 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 alteration to your Feedburner Email Widget code:
     Replace:
     

     <input type="submit" value="Subscribe" />

     
     with,
     

     <input type="submit" value="Subscribe"/>

     
     (you can change the size,colour and face of the font)
   
   
   
   

---

6. 
   

   Removing Delivered by Feedburner Link:

   
   It’s very simple!
   Just remove the following part from your code:
   

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