10 July 2012

How to Customize Feedburner Email Subscription Form


With changing times you will find the default Feedburner email subscription form boring. You can easily customize it to suit it with your template.You can change the background color, add image to the background, change width and add text to default text-box and customize the Subscribe button.

Following is the original Feedburner email subscription code:
<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=Your Feed ID', '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="Your Website Name" 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 shadow to the box
Just paste
box-shadow: 10px 10px 5px #888888;

You can modify values to set shadow position and color.

2. Modify Border
You can change border thickness by altering 

You can change border style as follows
border:1px solid

You can change Border color as follows
border:1px solid #ccc

3. Change background color
background: #d1d1d1
just after

You can get HTML color codes here.

4. Add image to the background
background-image:url(your image URL);
just after
(if you have added background color code, just remove it before adding background image code. Upload the image and paste the URL to above.)

5. Change "Enter your email address" text

Default code is
<p>Enter your email address:</p>

You can modify it as below
<p><span style='font-size: 110%;'>Enjoyed the post. Subscribe for daily Updates</span></p>

6. Modify email id input Text box
Default width of the text box where you add your email id is 140px. You can alter this value to increase or decrease the width.

<input type="text" style="width:140px"

To change the height of text box just add  
just after

You can add the background to this box as follows

<input type="text" style="width:140px" background: #ffffa0

In the original code there is no any text in this email box. But you can add text to it, suggesting the users to put their email ID. To do this modify your code as follows:
<input name='email' onclick='javascript: this.value = ""' style='width:180px; background: #ffffa0 ' type='text' value='Enter your email'/>

So the box will look like

7. Modify Style of ‘Subscribe’ Button:

To do this we need to add button style to your template.
Go to EDIT HTML page and look for ]]></b:skin>

Now add following code just BEFORE it.
.button {
background-color: #757736;
font-size: 120%;
font-family:Times New Roman;
font-weight: bold;
color:#f1f1f1; }
Save the template and return to Feedburner code. Now find

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

And replace it with

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

10. Remove Feedburner Link

Just delete following code to delete the 'Delivered by Feedburner' Link

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

It's done. You can try differant background images, fonts on your own to suit your choice.

Related Posts

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More