Feedburner provides a free email subscription service for blogs, that’s what I use for this blog. Here’s my quick tutorial on how you can customize their subscription form to suit your taste or blend your blog’s template:
1. The feedburner’s original code will be 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.Changing The Background Color:
If you want to change the background color of the form, find this line:
text-align:center;
After it, add this:
background: #00BB11
Just change the color codes with anything that you like. You can use this color chart as a reference.
3. Adding Background Image
To make the form more unique, others add a background image in their feedburner subscription form. To do it, find this line:
text-align:center;
After it, add this code:
background: url(url of your image here);
The code should look something like this:
<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);”
3. Changing The Width Of The Textbox
If you’re looking to place that form in your sidebar, you’d probably want to change the width of the textbox so it won’t break any formatting you have there, here’s the solution on how to do it. Find this code:
width:140px
change the numbers with whatever size you’d like.
Now, you’ll surely have a much attractive feedburner subscription form if you have followed the tutorials above.
Zaldy Dalisay
I have been providing seo consultations to small and large scale businesses since 2004.
Follow Me:
FeedBurner
The feed does not have subscriptions by email enabled
i got that message, why was that?
and one more thing, for those who are usinng blog*spot engine shouldn’t copy-paste the code given above, since there are several character that didn’t match between wordpress engine and blog*spot ( i hope my comments usefull )
Radith ^^
Do you know how to customize the look of the submit button by chance? I know how to change what the button says but not the physical look of it (color, size, etc.). Thanks!
you can add this in your template
.button {
background-color: #000000;
font-size: 80%;
font-family:Tahoma;
font-weight: bold;
color:#ffffff; }
then add class=”button” after input type=”submit” value=”Subscribe”
Just change the variables with what you think suits your site.
Nice tip. like the fact you made codes for everyone and just let them change thier feedburner id.
The e-mail entered in your Feedburner email form does not carry over into the pop-up window. User must re-enter e-mail, so the form is actually worse than a link. I’ve yet to see the feedburner e-mail form function on a hosted WordPress.org site (there are 1,000 posts on how the form won’t function on WordPress.com sites, but zero explanation for hosted site, other than it should work). Even the Feedburner email form on ProBlogger.net doesn’t function correctly! We need a hero! (Sorry if I’m a littly crabby, I actually really appreciate your blog.
Wow! great coding. Keep up the good work.
I want to say thanks!,
Im asking how to get the form the feed burner for working abroad
thanks for the info, but where can I find FEED ID?
thanks.
Feedburner is really very useful for syndicating feeds from other websites.-*;
i always use feedburner to syndicate my blog posts to other subscribers.”`;
thank you so much for breaking down the codes. I was able to achieve the desired settings. Have a great day.
I am looking for a ready made personalize feedburner subscription form. Is there any one who can make a professional subscription form for me.
Ready outstanding and unique form.
I want a default pop-up of feedburner subscriber form, when a visitor visits my site. i.e the first thing should be a pop-up. just like “mail chimp”. How can I do that?
I kept on asking this same question until I was divinely led to the link below. I guess it would provide the answer you seek.
Please give me feedback.
God Bless!
http://wordpress.org/extend/plugins/wp-emailfeedburnerpop/
@dakhis. Thanks for the reply. But I forgot to mention that I want the same for Blogger platform, not WordPress!
i always syndicate feeds on my subcribers and of course feedburner is definitely a great help ::-
thanks, this is the best and easy tutorial I found to customize feedburner subscription form.
This is just what i have been looking for! I am so glad people like you who can figure this stuff out are in this world to help people like me!
Thanks so much!
AWESOME! Thanks for breaking it down… that is just what I needed.
Wow this is just what I needed, I was looking for a way to edit my opt in form like this.
Thanks so much for making it so simple. I tried to contact aweber support but they didn’t know what to tell me!
The original cod is very interesting, but difficult to understand. I enjoyed the post. The background image addition was very interesting.