DigitCodes

Coding Notes


Follow @afsalrahim
  • PHP Codes
  • Web Design
    • CSS Tricks
  • WordPress
    • WordPress Tips
    • WordPress Themes
    • WordPress Plugins
  • Blogging
You are here: Home / Blogging / Add a Stylish Email Subscription Form for your Blog

Add a Stylish Email Subscription Form for your Blog

November 30, 2012 by Afsal Rahim 25 Comments

Add a Stylish Feedburner 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:

Subscribe Via Email

Subscribe to our newsletter to get all the latest updates to your inbox..!




 

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..!

Filed Under: Blogging, Web Design Tagged With: blogging tips, css

Comments

  1. jesna says

    January 19, 2013 at 10:00 pm

    Hi Afsal,
    Your blog looks good! Nice article & thanks for the share. Helpful!!

    Reply
    • Afsal Rahim says

      January 21, 2013 at 12:18 am

      Hi, jesna. Thanks for dropping by.

      Reply
  2. collizo4sky says

    January 23, 2013 at 10:40 pm

    it didnt give me the look as in your blog. pls help

    Reply
    • Afsal Rahim says

      January 24, 2013 at 10:09 pm

      Hmm.. I guess you have some of the styles already been defined in your blog or is getting overwritten. Try adding the css codes at the end of the stylesheet and check.

      Reply
      • Jimbo says

        August 4, 2016 at 1:24 pm

        It did not work for me either (along with few others who have commented below). There is surely something missing in the code.

        Reply
  3. Collizo4sky says

    February 5, 2013 at 8:20 pm

    I tink am gona change the css class and see how it goes

    Reply
  4. Yashodhan says

    July 19, 2013 at 12:12 am

    It’s really cool.. But unfortunately I have a light background on my blog so I can’t use this one.

    Reply
  5. Sanket says

    October 9, 2013 at 4:23 pm

    Hey that form is not working I think there is some problem in the CSS Code as its not showing the same look as the above subscription form.

    Reply
  6. Arjun says

    November 19, 2013 at 7:27 pm

    it’s working thanks

    Reply
  7. amandeep says

    December 13, 2013 at 11:11 am

    it is difficulty to add the feed brnner in my website .
    plz help me

    Reply
  8. Nitin says

    January 2, 2014 at 7:10 am

    Wow, Looking good, Best feed email box ever. Thanks. I am adding it !

    Reply
  9. Aliakbar Majidi says

    February 19, 2014 at 3:25 pm

    simple but beautiful, gonna try it now. thnx 🙂

    Reply
  10. burak says

    February 23, 2014 at 8:13 pm

    u should no-repeat the background

    Reply
  11. shafique says

    March 5, 2014 at 8:35 pm

    It looks great. Subscription help to retain blog readers.

    Thanks for sharing.

    Reply
  12. Cindy Firanda says

    March 29, 2014 at 6:54 am

    Hi, I just try to use your tutorial in my blog : HijabTutorial.info, but the styling didn’t work well.. Would you like to tell me what should have I to do?

    thanks

    Reply
  13. Balachander says

    July 18, 2014 at 4:18 pm

    thanks for the html code, its far better then the default provided by google feedburner

    Reply
  14. anwar says

    October 16, 2014 at 11:53 pm

    Really write well. I was looking for this type of subscribe form. I will must apply it in my site. Thanks again.

    Reply
  15. DJ Rony says

    December 2, 2014 at 5:02 pm

    Thank you very much, it helped a lot. Just a little CSS modification and anyone should have an awesome signup box.

    Reply
  16. blogging tips says

    December 16, 2014 at 8:07 pm

    Yes i use this for my blog. thanks

    Reply
  17. ramesh says

    December 29, 2014 at 2:49 pm

    Hi, The code is not working and in my blog it is not showing any symptoms. What to do?

    Reply
  18. Deepak Gupta says

    December 26, 2015 at 12:49 pm

    Thanks for this code and I’d appreciate you for this work!

    Reply
  19. jhanzaibali says

    February 16, 2016 at 1:28 pm

    i have not working in this blog http://www.apkmovies.com

    Reply
  20. Alpesh Desai says

    July 27, 2016 at 2:42 pm

    Ya good article

    Reply
  21. Jamirul Islam says

    June 20, 2018 at 2:28 pm

    I am a Chemical Engineering student. I know nothing about html or css. I want to add the newsletter form in my site gatechnpsu.blogspot.com . What did you mean by “In the above HTML code you have to replace [YOUR_FEED_NAME] with your respective feeds name.”

    Reply
  22. Umesh says

    June 27, 2018 at 12:00 pm

    Can you please share some stylish subscribe box code ?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Sponsered

FREE Email Updates

Subscribe to our newsletter to get all the latest updates to your inbox..!



TRENDING

How to Embed a Tweet in Your Blog Post ?

How to Add Your Custom Logo to WordPress Login Screen?

Free HTML5 Responsive WordPress Theme : SimpleCorp

Show user information like IP address, useragent with PHP codes

Return to top of page

Copyright © 2016 · digitcodes.com · Privacy Policy · Contact Us