Everything But the Posts

Tips, Advice, and Templates from a Blogger Who Has Been in Your Shoes

  • Home
  • About Becca
  • The Book
    • Testimonials
    • Media Room
      • Links to share
      • Book Summaries
      • Cover Images
      • Ads/Buttons
    • Bonus Content
    • Buy The Book

How To Add A Subscribe Button For MailChimp To Your Sidebar

This site contains affiliate links. Please see Policies for more information.

May 6, 2014 Becca Ludlum

Pin3K
Share31
Tweet29
Stumble
Shares 3K

The subscribe button on the sidebar of my blog right now was created by my blog designer. I’m giving you directions to create a signup form through MailChimp, so it won’t look exactly like the one in my sidebar now. It’ll look like this: 

How To Add A Subscribe Button For MailChimp To Your Sidebar

Once you set up your MailChimp RSS to email campaign so your readers will get your blog updates in their inboxes, you’ll need to give your readers a place to sign up! Adding a personalized subscribe button to your sidebar isn’t quite as easy as one might think. I’m walking you through the steps to add a subscribe button for MailChimp email updates to your sidebar.

 Add a subscribe button for Mail Chimp to your sidebar

To create a personalized sidebar widget in MailChimp:

1. Create a personalized graphic for your readers. You might want to do this in PicMonkey. The size for this one is 250 x 65 px:

Mail Chimp signup box

2. When you’re done creating your graphic, go ahead and upload it to your WordPress blog or another site that stores your photos. Grab the link of your image.

3. Log in to your MailChimp account and head to Lists > SignUp Forms > Embedded forms.  I use Super Slim, which is what my example is created from below.

MailChimp Subscribe Box

 

3. Change the text where it says “Form Options” and set the width of your sidebar, if you’d like. If you don’t set the width, the form will automagically fit within your sidebar.

5. In this code (the site says, “copy/paste onto your site”), add the HTML and your image link where I’ve highlighted the red text:

<!– Begin MailChimp Signup Form –> <link href=”//cdn-images.mailchimp.com/embedcode/slim-081711.css” rel=”stylesheet” type=”text/css”> <style type=”text/css”> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=”mc_embed_signup”> <img src=”ADD YOUR IMAGE LINK HERE”> <form action=”Your form signup URL” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” target=”_blank” novalidate> <label for=”mce-EMAIL”>Get updates from my blog!</label> <input type=”email” value=”” name=”EMAIL” id=”mce-EMAIL” placeholder=”email address” required> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–> <div style=”position: absolute; left: -5000px;”><input type=”text” name=”b_494ff8506d_9b56a8a26f” value=””></div> <div><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe”></div> </form> </div> <!–End mc_embed_signup–>

Again, you will not find the red text in your link, you have to add it in. You’ll have to look for the text before it to know where to insert the bit of HTML and your image link. What you’ll enter into your code will look like: <img src= “http://mycrazygoodlife.com/image”>

5. Add the code to a text widget in your blog, hit “save,” and viola… you have a subscribe box!

MailChimp Subscribe Box

Looking for more blogging tips? Everything But the Posts, my new book, gives tips about setting up a blog, connecting with your community, and monetizing. It’s available in paperback, on Kindle, Nook, and iBooks.

Save

You might also like these posts:

  • How to: Edit a MailChimp CampaignHow to: Edit a MailChimp Campaign
  • How to set up your free MailChimp AutoresponderHow to set up your free MailChimp Autoresponder
  • What Is A Blog Reader? A List Of Readers For BloggersWhat Is A Blog Reader? A List Of Readers For Bloggers
  • Blogging 101Blogging 101
Pin3K
Share31
Tweet29
Stumble
Shares 3K

Blog Tutorials Mail Chimp, Tutorial

Comments

  1. Kelly @eclecticmommy says

    May 7, 2014 at 1:29 pm

    I love the idea of creating a personalized graphic to match your blog theme. Genius!

  2. Carrie This Home says

    May 7, 2014 at 1:34 pm

    This is so helpful Becca! I’ve been using my blog theme to email out my posts and I’m scared to convert to anything else. Maybe sometime over the summer I’ll gather up the courage to do it! Pinning this for future reference.

  3. Shannan says

    July 18, 2014 at 5:15 pm

    Your posts are the gifts that keep on giving. This was hugely helpful – thank you!

  4. Elizabeth says

    July 25, 2014 at 9:50 am

    This is just what I was looking for!! Pinned. Thank you for taking the time to share with all of us!

    • Becca says

      July 25, 2014 at 10:05 am

      Thanks, Elizabeth! I’m so glad it’s helpful!

  5. Teresa (embracing the spectrum) says

    July 25, 2014 at 7:04 pm

    I have tried and tried and I just cannot get it to look right. I don’t know what I’m doing wrong!

  6. Angela says

    July 31, 2014 at 7:48 pm

    I was literally just trying to figure this out–thank you!

  7. Polishedways (@polishedways) says

    August 13, 2014 at 7:59 pm

    This is such a great idea. I really like how you can personalize the email subscription box. I’m sure that may actually bring the subscription box to your readers attention. I think I may try this. I’m on the blogger platform so we will see.

  8. Renee DeSuza says

    September 4, 2014 at 4:21 pm

    I just started my blog and it took me a while to find the subscribe plugin for WordPress (LOL) but I love the idea of customizing it. Will definitely try your tutorial. Thanks!

  9. Brittney says

    November 3, 2014 at 7:47 am

    Thanks so much for this simple and awesome tutorial! You rock!!

  10. kt says

    November 3, 2014 at 8:04 pm

    Loved the tutorial! very helpful, thank you. Do you have a tutorial to add that pop up box to subscribe when someone enters your page too?? I have been trying to figure that one out

    thanks again,
    kt

  11. Kim says

    November 10, 2014 at 4:14 pm

    First, let me say how much I love your site! You have the exact information I’ve been searching for. Thank you, thank you, thank you!

    Second, I followed your instructions exactly and I have the widget in my sidebar, but the image isn’t there. In its place is that little box with the torn piece of paper (at least that’s what it looks like to me). I don’t know anything about HTML. I’d appreciate any advice you can give me. Thanks!

  12. Denise says

    November 20, 2014 at 11:43 am

    Why don’t I see a save button on my Mail Chimp page after I go through these steps?

  13. Grace says

    December 19, 2014 at 2:14 pm

    This was great! I like the personalized approach to blog design.

  14. Anna says

    December 31, 2014 at 12:54 pm

    Thank you so much for posting about Mail Chimp. Your blogs have been so helpful in setting up my e-mail list for new posts with a pretty branded e-mail :D Thank youuuu!

Trackbacks

  1. 30+ blog posts that will make you a better blogger » Three Loud Kids says:
    January 28, 2016 at 11:24 am

    […] time Blog media/presskits for inspiration What every blogger ought to know about Bloglovin’ How to add a subscription button for MailChimp to your sidebar Affiliate marketing basics Twitter chats for […]

  2. How to set up MailChimp like a Boss. - Everything But the Posts says:
    August 18, 2016 at 9:09 am

    […] that you have a MailChimp list set up, learn how to add a branded subscribe box that matches your blog to your sidebar. It’ll help remind people to sign up for your […]

Search The Site

Subscribe Here

Looking for Something?

Buy the Book

Buy the EBook

Buy the EBook

Purchase on iBooks

© Copyright 2016 Everything But the Posts · All Rights Reserved · Site Design Carol Jones Media • Wordpress VPS