Customize FeedBurner Subscription Form without Editing the Style Sheet or Theme

FeedBurner is one of the best way to make your readers return to your blog. This is a service that notifies your readers (once they subscribed) about your new blog entries. This is fast, easy to use and of course free. One way to publicize your feeds using in FeedBurner is to use subscription form however the html code of this form that they provide is too simple and style-free.

The code below is the generic html code provided by FeedBurner.

<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=freedomwall/hJpT’, ‘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=”freedomwall/hJpT” 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>

Here, I will present a simple way to customize the form. What is good news for this is that, you do not have to edit your theme or the style sheet (css file) in your WordPress blog thus you can just add this a simple html widget. Also, this is applicable for Blogger and other blogs that allow insertion of html widgets. Just add a new widget and paste the html code I will provide (after your retouching) and you’ll get a new look for your form.

The image below shows the form I am using in this blog.

Below is the html code I used for my subscription form.

<form style=”text-align:center;background-color:#696969;”
action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=freedomwall/hJpT‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<p style=”font-weight:bold;text-align:center;padding-top:1em;font-size:16px;color:yellow;text-shadow:3px 1px 8px #ffffff”>Get Free Updates!</p>
<p><input type=”text” style=”width:80%” value=”Enter Your Email” onfocus=”if(this.value==’Enter Your Email’)this.value=”;”
onblur=”if(this.value==”)this.value=’Enter Your Email’;”/></p>
<p><input type=”hidden” value=”freedomwall/hJpT” name=”uri” /><input type=”hidden” name=”loc” value=”en_US”/></p>
<p><input type=”image” src=”http://image.png” onmouseover=”this.src=’http://image.png‘” style=”background-color:#696969;border:0;padding-bottom:1em;” onmouseout=”this.src=’http://image.png‘” alt=”Subscribe Now!” /></p></form>

Please don’t forget to change above with your feedburner ID (shown in yellow) and subscribe button image URL (shown in red). If you want to use the button I am using, replace the URL in red with the one shown below.

https://freedomwall.net/files/2012/07/subscribe.png

Customize your color using html5 color codes. See color codes here. Make sure to match form background color with the button background color (color codes shown in cyan) for consistency. Also, Internet Explorer does not support shadow effect (the glow effect shown on “Get Free Updates” text) so better use contrasting text color and background.

And yeah, don’t worry with the widget width – this code does not set a specific size, hence this will inherit your sidebar or column width.

• Ian Limpangog
• July 30, 2012
• Categories: Tutorials