Add a Stylish Email Subscription Form for your Blog

[adslot]

Email subscriptions forms and newsletters, let you gain readers for your blog. It is necessary that you make your email subscriptions form stand out and get maximum users subscribe to your newsletter. Google Feedburner is the free service which I use in DigitCodes which automatically sends newsletters whenever a new post is made on the blog. The HTML code which Feedburner provides as the email subscription form code is pretty basic without any kind of styling. So I had put some styling for it to make it more attractive and catchy for the readers to subscribe to the newsletter.

This is what I got after adding up the styling:

And the HTML code for it is :

<div class="subscribe_outer">
 <div class="subscribe_wrapper">
  <h5>Subscribe Via Email</h5>
  <p class="stext">Subscribe to our newsletter to get all the latest updates to your inbox..!</p>
    <div id="btntEmailsub">
    <form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YOUR_FEED_NAME]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="[YOUR_FEED_NAME]" name="uri">
    <input type="hidden" value="en_US" name="loc">
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email">
    <input type="submit" value="Signup Now!" title="" class="emailButton"><br/>
    </form>
    </div>
  </div>
</div>

In the above HTML code you have to replace [YOUR_FEED_NAME] with your respective feeds name. Also include the CSS styling codes.

<style type="text/css"> 
.subscribe_outer {
     background: url("https://lh4.googleusercontent.com/-U20WZFj8zL0/ULc89cNr-wI/AAAAAAAAAAg/qiIrUOX0Bdk/s800/color-chronicl.gif") repeat scroll 0px 0px transparent; margin: 0px -10px;padding: 5px 0px;
}

.subscribe_wrapper {
     background: url("https://lh4.googleusercontent.com/-U20WZFj8zL0/ULc89cNr-wI/AAAAAAAAAAg/qiIrUOX0Bdk/s800/color-chronicl.gif") repeat scroll 0px 0px #333333;color: #CCCCCC;font-size: 14px;line-height: 20px;padding: 38px 50px 18px 38px;
}

.subscribe_wrapper:hover {
box-shadow:0 0 8px #C5C5C5;
transition-duration:0.5s;
}

.stext {
     color: #FFFFFF;    
}

.sidebar .subscribe_wrapper h5,.subscribe_wrapper h5 {
     color:#FF4629;
}

#btntEmailsub {
     clear: both;display: block;margin: 10px 0px;
}

form.btntEmailform {
     clear: both;display: block;margin: 20px 0px 0px;width: auto;
}

.emailText {
     background: url("https://lh6.googleusercontent.com/-mrp8bAEiUas/ULc875mjBCI/AAAAAAAAAAY/ORduMx38cYI/s800/email.png") no-repeat scroll 10px center #FFFFFF;border-radius: 4px 4px 4px 4px;border: 0px none;
     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05) inset;
     color: #444444;margin: 0px 0px 15px;padding: 10px 40px;text-decoration: none;width: 70%;
}

.emailButton {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
    background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);
    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));
    color:#f0f0f0;float:left; font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid #267ed4;padding: 10px 40px;
    cursor: pointer;
    width:100%;
}

.emailButton:hover {
    background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);
    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));
    color: #f1f1f1;
}</style>

Hey, don’t forget to subscribe to the free newsletter of DigitCodes and get all the latest updates in your inbox. Subscribe Now..!