How To Add A Subscribe Button For MailChimp To Your Sidebar

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: 

Mail Chimp sign up box

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. Here’s mine, and the size 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 KindleNook, and iBooks.

Comments

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

Leave a Reply