Customize Feedburner Email subscription form & Submit button using CSS

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:

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(http://i32.tinypic.com/1z4efxy.jpg) no-repeat scroll center left;
	padding: 10px;
	border: 1px solid #ee7411;
}
div.feed-subscription:hover {
	background: transparent url(http://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:

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!