How To Create a Subscribe Box For Your WordPress Sidebar

A few users have asked me how I’ve created the Subscribe box in the sidebar and some have even called for a WordPress plugin that helps automate it. In reality, it’s just simple HTML/CSS paired with the Feedburner subscribe code and can be replicated very easily. Let’s take a look at the code used to create it:

Download ZIPView Example

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="widget subscribe">
    <ul class="social">
        <li><a href="http://feeds.feedburner.com/devgrow" class="rss">RSS</a></li>
        <li><a href="http://www.facebook.com/DevGrow" class="facebook">Facebook</a></li>
        <li><a href="http://twitter.com/ThinkDevGrow" class="twitter">Twitter</a></li>
    </ul>
    <h3>Subscribe</h3>
    <p>Join over 2,800 readers and get the latest posts delivered straight to your inbox.</p>
    <form id="feedburner-subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YourAccount]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="text" name="email" value="E-mail Address" class="left textfield" />
        <input type="hidden" value="[YourAccount]" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
        <input type="submit" value="Subscribe" class="right button submit" />
    </form>
</div>

The HTML is pretty straightforward, the only thing out of the norm is the Feedburner e-mail widget, which is taken directly from their site. You can use any service there instead of Feedburner, or use a separate WordPress plugin to handle your subscriptions if you choose.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
    .widget {
        margin-bottom: 40px;
        overflow: hidden;
        }
    .widget h3 {
        font-size: 22px;
        margin: 0 0 15px;
        }
    .widget.subscribe h3 {
        font-size: 20px;
        font-weight: 600;
        color: #4a7aa3;
        }
    .subscribe {
        background: #f0f8ff;
        padding: 13px;
        border: 2px solid #d5e7ee;
        }
    .subscribe form {
        margin: 15px 0 0;
        }
    .subscribe input.textfield {
        border: 2px solid #e4e9ef;
        }
    .subscribe input {
        font-size: 13px;
        padding: 4px;
        }
    .subscribe input.submit.button {
        font-size: 13px;
        border: 2px solid #3C6F8F;
        background: #3675A5;
        padding: 3px 5px;
        color: white;
        cursor: pointer;
        font-size: 15px;
        font-weight: 700;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        }
    .subscribe input.submit.button:hover {
        background: #488abc;
        }
    .subscribe p {
        color: #385c7c;
        font-size: 13px;
        line-height: 20px;
        margin: 0 0 5px;
        }
    .social {
        float: right;
        }
    .social li {
        float: left;
        margin: 0 0 0 5px;
        }
    .social li a {
        background: url(icons.gif) no-repeat;
        display: block;
        height: 26px;
        text-indent: -999em;
        width: 26px;
        }
    .social li a.facebook {
        background-position: 0 -30px;
        }
    .social li a.rss {
        background-position: 0 0;
        }
    .social li a.twitter {
        background-position: 0 -59px;
        }
    .social li a:hover {
        position: relative;
        top: -1px;
        }

Please be aware that you need to download the icons.gif file if you want to use the social media links. I’ve made it into a sprite for faster loading and convenience and if your subscribe box is wider, you can easily fit a lot of other services there as well.

Thoughts? Feedback?

I know this is absurdly simple for a lot of you out there but I’ve had multiple requests to make the Subscribe box into a separate plugin. Let me know if the above code is good enough or if you guys really do want me to make it into a plugin, and perhaps to make things uber convenient, I may just do so.

Enjoyed the post?

Then you should follow me on Twitter or subscribe to the RSS feed.

  • http://www.jailbreakguides.com giorgos

    I was unable to make it look like yours:-(
    I paste the html code into a widget html text box and the css into my mail theme’s style.css. the result you can see at the screenshot below:

    http://www.jailbreakguides.com/wp-content/uploads/2011/03/sub.jpg

    What am I ‘m doing wrong? after all a widget is not such a bad idea for people like me ;-)
    Thanks, also for the sharebar..

    • http://devgrow.com/ Monjurul Dolon

      Hi Giorgos,

      You actually have to add the code into your theme’s sidebar.php file, not in the widget box. I’ve updated the post to mention this as well.

      Hope that helps!

      • http://www.jailbreakguides.com giorgos

        Thanks, works fine

      • http://brightcoconut.com Adam Kayce

        Works fine in my widgets; then again, I’m using the Advanced Text Widget plugin, which allows for PHP.

  • http://kprimdal.dk Kristian Primdal

    Thanks Monjurul, I have added it to one of my sites now, exicted to see if that is going to give me more subscribers to the feeds.

    Maybe you could have added how to remove the “Email Address” automatically when used click on the field. Just like the one you have.

    • http://devgrow.com/ Monjurul Dolon

      Hey Kristian,

      I use a simple jQuery function to do that:

      1
      2
      3
      4
      5
      $(document).ready(function(){
          autoFill($('#feedburner-subscribe input.field'), "E-mail Address");
      });

      function autoFill(id,v){$(id).css({color:"#b2adad"}).attr({value:v}).focus(function(){if($(this).val()==v){$(this).val("").css({color:"#333"});}}).blur(function(){if($(this).val()==""){$(this).css({color:"#b2adad"}).val(v);}});}

      Let me know if that helps!

      • neono

        Where does this one go? In the functions?

      • neono

        Wow, thanks for answering.

      • Ander

        Where do I put that?

      • http://devgrow.com/ Monjurul Dolon

        Hi Ander – You should put the HTML somewhere in your sidebar.php file and the CSS in your style.css file.

      • ALbert

        Where do I put that jquery code?

      • Ander

        I meant where do I put it to make the email get remove when so one click “E-Mail”.

      • http://pricenfeature.com aatif

        can you please say me where this jqeury will go ???

      • http://ustandout.com Diana Urban

        Has anyone figured out where the jQuery should go?

  • http://www.quickwptips.com Hariom

    Very clean subscriber box for any any wordpress hosted blog. I have also addes simmilar subscriber box on my blog. Monjurul Dolon i would like if you could also explain how you add share this and realted posts and author box at the end of each article. It would be very useful for many bloggers.

    • http://devgrow.com/ Monjurul Dolon

      Thanks for the feedback Hariom! That bit is pretty simple too, I may add a post later on explaining how to do that.

  • KatyDigg

    Thank you, very much appreciated.

  • http://www.tipprodeo.de Marcel

    Clean and simple, thank you very much!

  • http://teckmunch.com Irvin

    when i add this widget on my wordpress blog it changes everything the font and it makes the side bar not work Please Help

    Thanks

  • http://toptenblogthemes.com Chris

    Thank you for this code! I will be back later to grab it and give it a try.

  • http://ohdaus.blogspot.com/ daus

    nice one monjurul, but you know how put this subscribe box for blogger??

    Thanks.

  • ALbert

    Monjurul, I would like to know where to put the jQuery function code that you posted above to remove the “Email Address” automatically when you click on the field.

  • http://www.wordpressstop.com Prasad

    Nice Article.

    Once visit http://www.wordpressstop.com here you will find lot of articles regarding to WordPress.

    keep Smiling

  • http://www.EzFather.com EzFather.com

    Great, elegant and simple
    Thank you

  • http://www.RushhourNews.com RushHourNews.com

    Will try to use it. still working on design theme, but this plugin is very helpfull to be part of any site
    thnx

  • http://www.xenia-consulting.com Anshul

    Thanks for the post, i will use it on my blog.

  • http://www.wizardjournal.com Rakesh Narang

    I really like subscribe box and I have incorporated it on my blog.

    Thanks.

  • http://www.gregoryciotti.com Gregory C.

    Simple but excellent.

    What are you running your site on by the way? At first it looked like it was maybe built on Hybrid Core or just custom.

    • http://devgrow.com/ Monji

      Sorry this is late — DevGrow.com has been through several custom themes over the past couple of years.

  • Yuriy

    Dear devgrow!
    Thanks for a great plugin.

    But,
    So many times you were asked here to help with that jquery function to remove ” Your Email” text – where to put it – and no answer. Could you please help with that, where to “simply use it”?
    Not all of us are developers here..

    Thanks!

  • http://kawangeek.com/ EddyGeek

    thanks, this is great

  • http://www.mundoiphone.es nacho

    Great!

    I was lookibf something like this!! The option that provide feedburner are so bad…

    Thanks!

  • Jacob

    Can it work with MailChimp?

  • http://www.weltreise-magazin.com Tobias

    Hello!

    Great tutorial! But I do have some problems, installing the email box on my blog. If I place the code in the sidebar.php the code is changing all my theme styles. I want to achieve that I can have the social box in my sidebar. The index.html includes as well css and html, head, etc. definitions. Which code is needed for the sidebar? Would it somehow possible to place the code in a text/php widget?
    Thanks in advance!

    • Monji

      It is definitely possible to make a WordPress widget for this, and I may do that in an upcoming tutorial.  To do so, I would recommend placing the code in your functions.php file in your theme directory, since you do not want the standard widget features (like a title).

  • Anonymous

    Ben bunu çok beğendim. I like This !

  • http://naziman.com/ Naziman

    thanks for this article, it help me a lot. but still, how can i use my own image not the icon.gif? then how can i add more social like linkedin maybe?

  • http://www.geekdashboard.com/ Amar Ilindra

    Can i place it below every published article ?? 

    Thanks waiting for replay 

    • webapptester

      I think you can by using this code in the wordpress loop :)

  • Dilawer pirzada

    What I really Like but it’s not for genesis. How Ever I want this type of Subscribe box:
    Have Any Idea Please respond me at:facebook.com/dilawerpirzadadilawer_pirzada@yahoo.com

  • http://www.ianswer4u.com/ Ianswer4U

    It worked Wonders in growing Subcriber Base for my wordpress website.. 

  • http://www.technreviews.com/ Vicky Kumar

    do you have any tutorial for subscription box with social widgets?

  • webapptester

    Great tip!

  • Makemoneygal

    Thanks, I’ve been looking for something like this. I just need to figure out how to make it work for WordPress. I’ll just keep reading through the posts here on what other’s did.