CSS Based E-mail Subscription Form Widgets For Feeds

I prefer to subscribe feeds to my e-mail's inbox rather than any reader, and I am sure most of you too might do the same. This is an easy process as simply enter your email, submit and get updates in your e-mail's inbox.
We bloggers always try to make it and ease for our visitors to subscribe to our feeds and if the subscription form looks good that will be a surplus. So, here I am sharing three (03) CSS based e-mail subscription form widgets with you all, hope you would like to grab them.

Subscription Form Widget 01:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVQdm8TD563_BzBDNSUGlp_UMlKQPMxJr2e8Wk0PVu5ytbxS5RenwIrXqrbV8xCQ5MDfjVCpT4THS_KwCjvowfcMy8dziGVc6fyGWidTVjC9DeBqkrWwaATMHcUcMA_2sry7AfQ-SnoFQ/s1600/feedbg3.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuEUuZBsxpzJ8n8r7NpKJqaDS6HDSocbgFwQYnXUTdT2o6SS7q5wMf6x_r06PZ-K3nQBqTuj6u5FBBeWQoEu5xxfb22fhNAdRmXy0bNsVoHXZTktjn994ETuTXqHuDRdn0bp8S3XZqSab/s1600/go_b.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

Subscription Form Widget 02:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSMZa8vpHQTopqMzo8z7mbsmqI_CF-ablk_UREVgIJhJ3zzulPevBYl6MOz8X57Dwwahq36OctrCBTpjLAFkm9vwORMeehXLGugfcTIOqk4nmT2OrEY8vkZ5nv4PLa9gm4bQ9OCjT62Q3/s1600/feedbg1.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifa2f3mGjIxm2ETMaCPGw62bFKxAmA90tTnr86GT7Im7wcooRgCwOSZ4AWj5RAr0D1mwJ04ddcoTyxk6hAsNB6VXiFHnUfdHNo60lAtyvlMKyupRfN56I-Ir48FLh1eNsp8KfhYjapqkR1/s1600/go_g.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

Subscription Form Widget 03:

Code:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNokcDFe2cYPP_UbN5oKFwW_RBBEsJxqUFosAZ6D6ypyT3a3lBf1rk3kto-IAEjwHlFL4drzRbPEjcuav8ehXAGMEBjbuUPII3HpP6W8OConvF3y6tRbT_fndvBuO0rp5E-TR6VD-5KYTy/s1600/feedbg2.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mH2HIWKh0mlGKLWAWtUnTEJiADXDQVMqhcMePklNqc6X74yK5cYB4jrdWwJykzx0U2bTEyZB820s12c59RBJWGNwV6yUcKSqnn9wQAHU1YZcwBv8GPexcfjo8ioIVkth0Wrbna0SDgV6/s1600/go_o.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

To install go to Blogger > Layout > Add A Gadget > HTML/Javascript, paste the code in content area and replace the RED text in code with your Feedburner feed title then save and preview!

Update as on 4th December,2009:
I just updated the codes above as there were some glitches left with them earlier so it might not working with IE if you had used it before this update message, so I apologise for any inconvenience if it caused to you, now its working fine with IE, enjoy!
For any further query please use the comments section, thank you!