Customize Feedburner Email subscription form & Submit button using CSS

Swashata36

Lets modify the feeds a little bit Feedburner gives an effective way to our feed subscribers to keep on getting updates from our blog using RSS feeds. Be it Email Subscription, Chicklet publishing, Subscription to readers or any service related to feed, feedburner is no doubt the best on this service!

Now, if you want to give your readers an option to subscribe to your feeds using “Email Subscription” then you must be aware that the default style, which feedburner gives is not that good at all ! Many people try to attract their readers to subscribe to feeds by using a large logo! Well let me tell you that size does not matter! The thing which matters is “Style” [Hey, that was stylish]. So today we shall learn how to modify the default feedburner subscription using CSS. In the end we shall also learn about modifying any input buttons on a general web-page! So lets start the discussion…

Getting the Feedburner subscription code and modifying it:

I assume that you have already burner your feeds using Feedburner! (We shall talk about feedburner advantages later someday). Now just do the followings:

  • From your feed panel go to Publicize > Email Subscription. Activate the service if not done already! Now copy the code given by feedburner and make it handy for future use!
  • The feedburner code should look something like this: 
    <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_BLOG_NAME', '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_BLOG_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>

    Note the underlined value of the input tag and uri= [Here I have changed it to YOUR_BLOG_NAME. but it should be unique for your code! Like the original code of mine contains “greentechspot”. This is same as the feed name of your feed] ! This is the only which we are going to need. Rest all are same for all codes.

  • Now change the code to the following type 
    <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_BLOG_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input type="text" style="width:140px; height: 24px;" name="email" value="Email address here..." onfocus="this.value=''"/>
    <input type="hidden" value="YOUR_BLOG_NAME" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="image" style="margin-bottom:-12px;" onclick="submit" src="http://i31.tinypic.com/dpwsg4.jpg" />
</form>
</div>
  • Note that we have only removed the unnecessary <p> tags and the style attribute of the form. We have wrapped the whole form using a div tag having a class=”feed-subscription”. We are going to use it to modify the looks further!

Now, just paste the code we have modified on a regular “HTML/JavaScript” code on blogger and a “Text Widget” on wordpress. If you have done everything correctly then it should look like this:After first modification

Modifying the containing div block further with CSS:

Now comes the best part: Designing with CSS. Just replace what ever you have inserted on the “HTML/JavaScript” widget [or, text widget in wordpress] with the following code:

<style type="text/css">
	div.feed-subscription {
	background: transparent url(https://i32.tinypic.com/1z4efxy.jpg) no-repeat scroll center left;
	padding: 10px;
	border: 1px solid #ee7411;
}
div.feed-subscription:hover {
	background: transparent url(https://i29.tinypic.com/20kw102.jpg) no-repeat scroll center left;
}
</style>

<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_BLOG_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input type="text" style="width:140px; height: 24px;" name="email" value="Email address here..." onfocus="this.value=''"/>
    <input type="hidden" value="YOUR_BLOG_NAME" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="image" style="margin-bottom:-12px;" onclick="submit" src="http://i32.tinypic.com/16kpe89.jpg" />
</form>
</div>

Now save the changes and see! It should now look like this:Second modification

Now hover your mouse on the subscription box area and see the magic.

Understanding the code and some tips:

As said before, we have just removed the unnecessary part like <p> tags and the style property of the default form. Instead we have just wrapped them inside a div tag and styled the input tags individually…

About the Submit input tag:

It is the following part of the whole code and basically this is the “Submit” or the “Go” button.

<input type="image" style="margin-bottom:-12px;" onclick="submit" src="http://i32.tinypic.com/16kpe89.jpg" />

You can change the url on src=”URL” to any image! Upload it to tinypic or any other free image host of your choice. Note that in the above two examples we have used two different images. You can also use one of them! Also change the margin property accordingly to align your image! Or you can also use a simple Submit button. Replace the above code with this:

<input type="submit" value="Go!" />

Change the value to anything you wish to be shown on the button.

About the Email Input box:

The following part of the code is the basic input box

<input type="text" style="width:140px; height: 24px;" name="email" value="Email address here..." onfocus="this.value=''"/>

Change the value to anything you wish! Also change the width according so that it can show up the text completely! You may also want to configure them more through the style attribute. Learn more on the style attribute and its associated values here.

So after doing all the modifications, the ultimate design should look like this:





So that was a simple tutorial for customizing the style the way you want! If you like this tutorial then please give feedback. Also if you face any problem then feel free to ask us!

36 comments

  1. Yolanda Morris

    Thanks! This was actually very helpful compared to limiting information I've read on how to do this properly.

  2. Swashata

    I am glad that you have liked it! If you face any problem then feel free to ask us here 🙂

  3. vipul

    but how will I put image of say digg on my blog.it is not hosted .it is free

  5. vinoth

    I think you read the minds of people like me…I was searching for this feedburner thing for 10 days..most of them are bad..but this looks neat and simple and easily customisabe….
    Similarly i was searching for thumbnails..and you come up with thumbnails recent posts….you have a good career..you are great swash..

    But please consider this only thing i didn't like in your website..size of the individual pages …it takes more time to load…this is a request only..please try to reduce

  6. Swashata

    Hi Vinod, Thanks for your comments. 🙂 Basically I am an student of engineering college and so as our co-admin Pyrotechnicpixie… So blogging is just our hobby 🙂 . We started blogging a few months back and now we are mainly focused on web designing and css tutorials. We post about the problems we faced as a blogger user. It really makes us feel good if you have found any of the tutorial useful.
     Also thanks for your compliments. I shall try to cut of some features to decrease the load time of individual pages! I have tried tracking the load timing many times and find that the several images I use for the blog posts causes this issue! Also I if you are facing any problem regarding jQuery plugins then only for the first time it shall be cached by your browser. Then it shall work fine! Can you please tell me which browser you are using 🙂
    Thanks again for your precious feedbacks

  7. vinoth

    no problem..it is my duty to comment.I find your site very useful.It always helps me.If i earn something from internet,i will surely donate some thing to your site.Now i can't give except love..

    Oh nice,i already know.i read all your posts…i am also an engineering student from anna university.

    I am a opera fan,that is why i can't switch to mozilla firefox.
    My browse is my love..intechgrity doesn't work in opera..make sure u talk with intechgrity about this..

  9. shv-trix

    i want to design it like shown on your blog with all bookmarking icons,and how to align the email input box

  10. Swashata

    For that you can use a small email icon image as the CSS background and modify the position. Also give a proper left padding, say padding-left: 48px; An example will be like this:

    div.feed-subscription {
    background: transparent url(YOUR_IMAGE_URL) no-repeat scroll center left;
    padding: 5px 5px 5px 50px;
    border: 1px solid #ee7411;
    }

    For an image of 48X48 Dimension! If you need anything else, feel free to ask here

  11. Swashata

    Thats cool! I am glad that our tutorial was useful for you 🙂

  12. david

    Thats a great tutorial, I already implemented it at my homepage xD thx a lot

  15. Swashata

    Thanks for your comment buddy! I am glad that it was helpful to you

  16. Paul Crowe

    Hey Swashata,

    That's a great post, well written and explained.You gave enough info for beginners to just copy and paste the code and explained how it works for people who want to learn more.You also gave options and we all like to have a choice.

    But why the watermarks on the images ?

    They destroy the look of a blog, they are blocking the image from being viewed properly and bottom line they are ugly.

    You have to ask yourself :

    Who is going to steal the image ?
    And whats the problem if someone does use the image ?

    Its not an oil painting.

    If you are afraid of someone stealing your content use a permalink or another method, but placing a watermark on every screenshot in your blog wastes time and harms the appearance of your blog.

    The content thieves are not loosing out you are !

    Lets say i want to use the first image you have of the feedburner email subscription form, i simply copy the code put in a html practice board and take my own screenshot.

    I have a similar blog and i use a lot of images in my tutorials, it can take a lot of time creating the images but if anyone wanted to use them i would send them the code, it's not a big deal.

    Just an opinion,

    Paul.

  17. Swashata

    Hi Paul, first of all thanks for your feedback and I am glad that this post was useful for you!

    As for the watermark, it is inserted automatically when I put an image using windows live writer… Actually the watermark on the picture helps branding and originality of the post. You should notice that in all the images the watermarks are set in such a fashion that they do not block the main portion of it!

    But I will surely keep your opinion in my mind for next upcoming tutorials! Thanks once again 🙂

  18. Pingback: Intense Debate Comment Importer Plugin Blogger to Wordpress | InTechgrity

  19. jamie

    Thanks for the article, I found it very helpful. Perfect for my needs

  20. Alex

    Thanks Swashata for this great article. I have a wordpress blog with similar thing but could not figure out where to find the code and edit those 4 sponsors boxes on the right ?
    If you can email me that,that would be great,thanks !

  21. Kuldeep

    Really useful. Currently I have not too much time but sure, I would like to use this technique for my blog too. Actually, I think, If someone want to get some kind of income with blog, he/she should have enough knowledge of the latest technology and he/she should continue to learn new technologies too. What do you think? Can anyone be a successful blogger if he/she need to pay for a simple coding problem?

  22. Ranu

    Swashata, I have another question. The trend now is that bloggers are using popup window that show their email subscription box. Remind first time readers to subscribe to their blogs. I know that they are using special services.
    Could we who are using free blogger platform to tweak our free feedburner subscription box so it can appear as a popup window?

  24. buzzparas

    In Feedburner Sent Mails,how to change the ” From ” tag in Email received.

    for eg.
    my users are getting emails with

    From : Repository Blog|Sharing Experiences|Capturing Moments

    Subject : <>

    I want to change the From Part to my Email id or something else, how can i do that.
    plz help
    thanx in advance.

  25. tech

    nice work! thanks for sharing, how to you add the webeditor in the comment form?

    i suscribe via email 🙂

    THANKS

  26. Zino

    Daily on my website 1000-1500 people visit and manually type in there Feedburner Email Subscriptions and also I have to type capcther. and to type 1500 email id is a pain is there any automatic way that I can import the email list and automatic Email Subscriptions all the user ..

  27. Antranik

    Hey there! thanks for your insight! I just used your code.

    I didn’t like the orange border, so I completely deleted the following line: “border: 1px solid #ee7411;”

    thanks again.

  29. JelBee

    Wow thanks… 2 days of searching this stuff and finally these custom works are the best so far on the net. Very Attractive!!. I’m using one of the design: JeLBee

Comments are closed.