Create Stylish Feedburner Email Subscription Form yourself

Doesn't matter if you are a Blogger, WordPress  tumblr, joomla, etc publisher. A lot or I must say maximum still rely on Feedburner for publishing their RSS and also for email subscription.

Building readership via email newsletter is as important as other parts of blogging like creating content and promoting on various social media platforms.

Feedburner Email Subscription Form

Blogger users use custom build or mostly Blogger's official widget for creating their email subscription form. But as of today, having your subscription are highlighted is very important. So here are some steps that you can apply to customize your email subscription form as you like and you can alter them as your  wish or requirement of your blog.

NOTE- This tutorials take into consideration the fact that you are using official Feedburner widget on Blogger though once through you will be able to alter you WordPress widget too.

ALSO SEE: Change slider image of blogger template, and
Redirect Blogger blog from non-www to www domain.

Blogger or official widget

If you are using Blogger platform and official widget from "Add Gadget" option. Then in such case the styling of the email input text field and submit button comes from two CSS classes. 

1. Email input field's class is named - follow-by-email-address, and
2. Submit button class in names - follow-by-email-submit.

All you need to do is override these with custom value. To do so there are two methods, 

1. Using internal stylesheet, or
2. Using inline styling.

For some reason inline styling is considered bad for SEO as it increases loading and page rendering time. But if you don't have any inline styling it wont matter at all. And in maximum of blogger templates there is no use of inline styling. So feel free to use it.

Email Field,

1. Go to Blogger, log-in and select the blog from the list.
2. Go to your blog's "Template" menu and then to Edit HTML.
3. Use "Ctrl + F" shortcut to search for follow-by-email-address.
4. And then you will get one result, replace the code starting with 
   <input class='follow-by-email-address' name='email' placeholder='Enter Email Address...' type='text' /> 
   with 

<input class='follow-by-email-address' name='email' placeholder='Enter Email Address...' style='background-color: #f4f4f4; padding-left: 8px; -webkit-border-radius: 6px; border-radius: 6px; height: 33px; width: 280px;' type='text' /> 

 Click Save and review your template.

Submit Button,

1. Use "Ctrl + F" to find  follow-by-email-submit and replace 
   <input class='follow-by-email-submit' type='submit' value='Submit' />
   with
   

<input class='follow-by-email-submit' style='background-color:#ff9933; -webkit-border-radius:6px; border-radius:6px; height:35px; width:100px; font-weight:bold;' type='submit' value='Submit' />

Click Save and review your template.

You may have a number of problems. So now the following will tell you how to troubleshoot it. For that, alter the values of the style attribute, the only error that you will encounter will be because of the difference in the sidebar sizes. 

follow-by-email-address style

To troubleshoot that, alter the value of width. To change the corners of the button and email field alter the value of -webkit-border-radius and border-radius keep the value of both same. This will avoid confusion (if any). To change the color of the button change the value of background-color you can get the appropriate colors and their hexacodes from Color Picker.