Customize Feedburner Email subscription form & Submit button using CSS

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. Pavan

    Hi Swashata,
    Useful article but designs are just simple, It would have been better if you could have provided with html code of some beatiful designs.
    Anyways thanks for your work 🙂

  2. Hero

    Great post, thanks for the help… i should not have wasted so much time viewing other blogs when i was having ur at the top of the search results, i got to your blog somehow for the first time i searched as it was appearing with ur google+ account so it was easy to recall but i closed that tab somehow and now after 2 hours in b/w when i didn’t find ur post i played up too much and tried to figure out the code myself but but not a help then finally and i can to sleep.

Comments are closed.