Custom Feedburner Subscribe By Email Boxes

Building and managing a list of people who are interest in your blog is the holy grain of marketing. There are various methods to build that list. One of them is an email subscription list.You can easily add an email subscription box in your blog that asks people to submit their email for receiving updates from your blog.

Feedburner is one of the service which lets you build and manage a list of your email subscribers. It is owned by google and it is every easy to add the feedburner email subscription code to your blog. Whenever you post new content on your blog, the rss feed will send an email with your post content to the list of your subscribers.

Where To Find Feedburner Subscribe By Email Code

Go to feedburner, select your feed, click on the publicize tab, then on Email Subscriptions, you will see the Subscription form code. These code will display a email box and a submit button at the buttom which doesn't look very good. We will customize it with css to look better and more user friendly. The width of these boxes are highlighted in lightyellow color so that you have an idea of what width you need for adjusting them in your blog. Change the text in green with your feedburner id name and copy paste the code as it is as html widget or directly in your template.

Email Box With A Background

To change the background color, change the blue color text with your color code or name.

Code

 
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger',

'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"

action="http://feedburner.google.com/fb/a/mailverify" style="background-color:#61B3DE; text-align:center;

height:41px; width:412px;"><p><input name="email" style="width: 280px; height: 30px; position: relative;

float: left; top: 5px; left: 16px;" type="text"></p><input name="uri" value="howtokickblogger"

type="hidden"><input value="en_US" name="loc" type="hidden"><input value="Submit" style="margin-left:

5px; background-color: rgb(238, 97, 35); box-shadow: 1px 1px 1px rgb(136, 136, 136); border: medium

none; height: 30px; padding: 2px 10px; border-radius: 5px 5px 5px 5px; color: white; font-family: georgia;

font-size: 14px; font-weight: bold; position: relative; top: 5px; left: 10px;" type="submit"></form>  

Small Email Symbol Subscription Box For Sidebars

Code

 
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger',

'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"

action="http://feedburner.google.com/fb/a/mailverify" style=" text-align:center; height:41px; width:251px;">

<p><input name="email" style="width: 180px; height: 25px; float: left; border: 1px solid #dcdcdc; border-

radius:4px; background: url('http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-

theme/email.png');  background-position: 5px 4px; background-repeat: no-repeat;padding-left:25px"

type="text"></p><input name="uri" value="howtokickblogger" type="hidden"><input value="en_US"

name="loc" type="hidden"><input value="Submit" style="background-image: -moz-linear-gradient(center

top , #30A146 0%, #249334 100%); margin-left: 5px; background-color: rgb(238, 97, 35); box-shadow:

1px 1px 1px rgb(136, 136, 136); border: medium none; height: 25px; border-radius: 5px 5px 5px 5px;

color: white; font-family: georgia; font-size: 13px; float:right;" type="submit"></form>  

Simple Email Box

This subscribe by email box looks very nice on blogs that follow light color palettes.

Code

 
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger',

'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"

action="http://feedburner.google.com/fb/a/mailverify" style=" text-align:center; height:41px; width:360px;">

<p><input name="email" style="width: 280px; height: 25px; position: relative; float: left; top: 5px; left:

2px;border-radius:5px 0px 0px 5px;" type="text"></p><input name="uri" value="howtokickblogger"

type="hidden"><input value="en_US" name="loc" type="hidden"><input value="Submit" style="margin-left:

-5px; background-color: orangered; border: rgba(0, 0, 0, 0.1); border: medium none; height: 30px; padding: 2px 10px; border-radius: 0px 5px 5px 0px; color: white; font-family: georgia; font-size: 14px; font-weight:

bold; position: relative; top: 5px; left: 2px;" type="submit"></form>  

Grey Subscribe By Email Box

Grey color is known for toning down the dark acid colors. So, if your blog has a dark colors theme. Use this.

Code

 
<style> .button_example{ border:1px solid #C9CCCC;-webkit-box-shadow: #CFD1D1 1px 1px 1px 

;-moz-box-shadow: #CFD1D1 1px 1px 1px ; box-shadow: #CFD1D1 1px 1px 1px  ; -webkit-border-

radius: 3px; -moz-border-radius: 3px;border-radius: 3px;width:75px;font-size:14px;font-family:verdana,

sans-serif; padding: 5px 5px 5px 5px;  text-align: center; color: #636363; background-color: #F4F5F5;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F4F5F5), color-

stop(100%, #dfdddd)); background-image: -webkit-linear-gradient(top, #F4F5F5, #dfdddd);background-

image: -moz-linear-gradient(top, #F4F5F5, #dfdddd);background-image: -ms-linear-gradient(top,

#F4F5F5, #dfdddd);background-image: -o-linear-gradient(top, #F4F5F5, #dfdddd);background-image:

linear-gradient(top, #F4F5F5,

#dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F4F5F5,

endColorstr=#dfdddd); } .button_example:hover{ border:1px solid #bfc4c4; background-color:

#DEDADA; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DEDADA),

color-stop(100%, #F5F5F5)); background-image: -webkit-linear-gradient(top, #DEDADA,

#F5F5F5);background-image: -moz-linear-gradient(top, #DEDADA, #F5F5F5);background-image:

-ms-linear-gradient(top, #DEDADA, #F5F5F5);background-image: -o-linear-gradient(top, #DEDADA,

#F5F5F5);background-image: linear-gradient(top, #DEDADA,

#F5F5F5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DEDADA,

endColorstr=#F5F5F5); } </style>

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger',

'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"

action="http://feedburner.google.com/fb/a/mailverify" style=" text-align:center; height:41px; width:380px;">

<p><input name="email" style="width: 302px; height: 28px; position: relative; float: left; top: 0px; left: 3px;

border:1px solid #dcdcdc;" type="text"></p><input name="uri" value="howtokickblogger" type="hidden">

<input value="en_US" name="loc" type="hidden"><input value="Submit" class="button_example" 

type="submit"></form>  

Get Our Newsletter

This one can be used below the post for attracting your visitors and asking them to sign up for the newsletter.

Code

 
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtokickblogger',

'popupwindow', 'scrollbars=yes');return true" target="popupwindow" method="post"

action="http://feedburner.google.com/fb/a/mailverify" style="height:51px; width:500px;background:

url(http://i49.tinypic.com/2uoqjk5.png); background-repeat:no-repeat;"><p><input name="email"

style="width: 185px; height: 23px; position: relative; float: left; top: 10px; left: 241px;border-radius:5px;"

type="text"></p><input name="uri" value="howtokickblogger" type="hidden"><input value="en_US"

name="loc" type="hidden"><input value="Go" style="background-color: white; border: none; border:

medium none; height: 30px; padding: 0px 0px; color: black; font-family: georgia; font-size: 14px; font-weight: bold; float:right;color:black;padding:7px;background-color:gold;margin-top:7px;" type="Submit"></form>  

Having any issue adding these codes. Feel free to leave a comment.