How to Customize your Feedburner Email Subscription Form (Part-1)

All of us like to have a good template with matching design and widgets. Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

1. 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. 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. 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. 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;”/>

Need some more customization? Read Part-2 here!