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>
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:
border: 5px solid #CDD6DB;
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:
<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" />
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.
How to customize Feedburner email subscription form : Updated for HTML5
As the guide was written for HTML 4 not HTML5 plus CSS 2 not CSS 3, there are some changes now but the basic remains the same.Tagged With custom feedburner code , feedburner custom css , FeedBurner Email SubscriptionCheckYourNumbers :: T , https://feedburner google com/fb/a/mailverify
another handy post thanks
You are welcome Patrick :)
How could I get this box to appear in the end of each of my posts? (i.e. not sidebar)
Thanks in advance,
Surely. Use Post layout plugin to insert the code
. You can add at top or at bottom of every post without touching the codes of the Theme (plus if you change/update the Theme, you do not have to it insert again).
TheShadow@Mobile themes World says
Thanks for this useful form
Thank you very much :)
Thanks heaps for a great short tutorial. Really helped!
Like it, good explanation, just don’t understand one thing… This text “full url of your submit button to where you have uploaded the button”… what do you mean by that? what shall I put there? thank you…
me again… please give me examples for my feedburner name… enter example… because I can’t do this like this…. thanks
Thanks Misa. The sentence basically became very difficult to understand, probably I was thinking of coding part then. “full url of your submit button to where you have uploaded the button” means – take that your Feedburner email subscription form’s custom’s name is feedbutton.png. Now you have uploaded it to wp-content/themes/images folder. If your website’s name is
, the full url will be –
. So the part of code will be like this :
I wanted to say, the green code should be replaced with the real one.
No problem. In our case, the feedburner name is TheCustomizeWindows. This is set from Feedburner account. Got it ?
Nice explanation. i’ll try mine later 2day. thankz
what is the exact location where the code needs to be placed in style.css ? I put it at the end and even tried it before the footer. the form shows up and is working perfectly but the problem is i get a search box on the top right of the wordpress nav bar when i am signed in. how do i resolve it ?
You are missing a div closure.
Wait for 3-4 days, I will complete the WordPress Plugin for users’ customize Feedburner email subscription form. No coding will be required.
how to add this very same subscription form in a single post(not all) on wordpress ?
Using WordPress conditional tag. You can use some plugin instead of writing the conditional tag manually.
a whole plugin for a single post? can you give a name ?
Thanks , it really works
hello can you tell us how can I put an image for the background?
your coding is Copy+Paste addicted…lol
Abhishek Ghosh says
Written in the sidebar :
Your IP address 220.127.116.11 and email is firstname.lastname@example.org (flagged for spamming).