Customize 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. 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>

---

2. 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)

---

3. 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)

---

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

---

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

    
   
   This is the Part-2 of my previous post on How to Customize your Feedburner Email Subscription Form. Do read Part-1 before reading this second part.
   This part contains a little complex still easy tips to customize the feedburner email widget. Customization continues…
   

   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)

   ---

   7. 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)

   ---

   8. 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" class="button"/>

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

   ---

   9. 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>

   Drops your comments below if you like these tips!