How to customize Feedburner email subscription form

Abhishek Ghosh

You must have noticed our Google Feedburner email subscription form along with social icons and and a counter. It looks very professional and matches with our custom theme.

The default Google Feedburner though does the basic work very well, that is helps your visitors to subscribe to your RSS feed via email; but it really look like a vintage widget.

Here is Google Feedburner subscribe by email form’s default 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=TheCustomizeWindows', '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="TheCustomizeWindows" 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>

<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=TheCustomizeWindows', '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="TheCustomizeWindows" 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>

It looks like this:

We will change the appearance by using CSS and clean up the code a bit.

Adding CSS to your WordPress theme’s style.css file

Add this at the end of your style.css file:

div.feed-subscription {
background-color:#D9E0E5;
padding: 10px;
border: 5px solid #CDD6DB;
}
div.feed-subscription:hover {
background-color:#E3E3E3;
}

div.feed-subscription {

background-color:#D9E0E5;

padding: 10px;

border: 5px solid #CDD6DB;

}

div.feed-subscription:hover {

background-color:#E3E3E3;

}

Explanation:

The background-color value is the hex value of the color you want. We have provided what we are using. You can download free color choosing software named color pic to pick any color and get its hex value.

The border pixel in number determines how thick the border will be.

The hex value number determines the color of the border.

The E3E3E3 background-color determines color change on mouse hover (of the background, not the button). You need not to mention if you do not want change of color on hover.

The style.css file is located in the Theme folder’s root. Always take a backup beforehand. You can edit it via any FTP software.

Now the clean code:

This is what you will need to copy paste to your sidebar text widget:

<div class="feed-subscription">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-feedburner-name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:178px; height: 24px;" name="email" value="Enter E-mail address here..." onfocus="this.value=''"/>
<input type="hidden" value="Your-feedburner-name" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="image" style="margin-bottom:-10px;" onclick="submit" src="full url of your submit button" />
</div>

</div>

Change Your-feedburner-name to your one, full url of your submit button to where you have uploaded the button. Enter E-mail address here... to your custom text that will appear inside the email input box.

On focus : Keep it blank it you do not want to show any text after clicking to enter the email (test ours on sidebar).

The code is for 330 pixel wide side bar widget column, you may have to change the padding value to get the desired position of the button.

Customizing the button on hover

If you want to customize the button to a hover like action, so that it will change color on hover; you have to create a CSS sprite of two stages of the button : normal and on mouse hover.

Obviously, you will need to add extra CSS code to that we mentioned above. Nothing much difficult. We already wrote a separate article on how to create such mouse hover action button here.

There are many free buttons in our download section; you can go and choose from them. If you need professional quality custom form, just contact us, our designer team can create one for you at a reasonable price.