The super easy way to create beautiful newsletter opt-in boxes

3 Flares Twitter 0 Facebook 0 Google+ 1 Pin It Share 2 LinkedIn 0 Buffer 0 Email -- 3 Flares ×

I’ve spent much of today creating newsletter sign up forms for my blog pages, sidebar and even a free updates page. The reason is that, while social media is great to build relationships and trust with your followers, you don’t own any of it. Facebook, Twitter, Pinterest, LinkedIn and the like do.

Your newsletter list, on the other hand, is your list. You can change mail services without losing subscribers (unless you’re technically challenged, of course), you don’t have to email every day to ensure you’re keeping up with an algorithm and you don’t have to email every hour to make sure you’re actually seen.

I’m not saying social media is a bad thing. Not at all. I’m a big advocate for spending quality time in social media. However, it’s important to make sure you’re also investing time in list building and nurturing.

This year I’m making a concerted effort with my enewsletter, to be more consistent and to work at building on my list so I have a genuinely strong list of loyal supporters.

So, the first stage has been creating opt-in boxes. Here is how I did it:

Magic Action Box 1

Step 1: Download the Magic Action Box plugin. Go to your plugins page and search for it there, then download and activate. In your WordPress dashboard, go to “Action Boxes’’ > “Add New’’.

Magic Action Box 2

Step 2: Name the box something to identify it. This won’t be seen by the public. You may want to create different boxes for different sections of your site or different post types.

Step 3: Select a style. You can select “User Style’’, but note you will need to create the style yourself. Or you can go with one of the pre-configured styles. If you’d like me to do something on creating unique styles, please let me know in the comments.

Mailchimp

Mailchimp2

Step 4: Add in your Mailchimp or Aweber sign up code. We’ll work with Mailchimp here, because that’s what I’m familiar with. To grab your code, go to “Lists’’ >“Forms and Fields’’ > “Fields >“For your Website’’ >“Signup Form Embed Code’’. Copy and paste the embed code into the space on the form (see below).

Magic Action Box 3

Step 5: Add in a call to action – I’ve gone with “get it now”. Press “Process Code’’ and a new code will appear in the box beneath it.

This is what it should look like.

Magic Action Box 6

Step 6: Add in Main Heading, Sub Heading , Main Opt-In Copy and Secondary Opt-In Copy. It’s up to you what you’d like to include here and whether you want to fill in every section. I decided for this one to go the minimalist route and have added main opt-in copy and secondary opt-in copy.

Magic Action Box 7

Step 8: You can add an image, change the size to fit and determine its positioning.

Magic Action Box 8

Step 9: Scroll to the top and press “Save’’.

Magic Action Box 9

Step 10: To activate it in a blog post, for example, when inside a post you’ll notice the Magic Action Box underneath your text section. Select which box you’d like to feature and whether you want it at the beginning or the end of the post.

Magic Action Box 11

This is what it should look like:

Magic Action Box 10

And that’s it. Pretty simple really. Now there’s no excuses for you in not building on your email list.

How do you capture newsletter subscribers? Feel free to ask any questions about the plugin or newsletters.

READ MORE: Learn how to customise your newsletter opt-in box

Loved this article? Sign up for updates and our media story ideas guide.... FREE!

Comments

  1. says

    Hi Kellie, I need to some work on my opt in boxes, but can’t find a way to collect first & last name using the MailChimp embed code, so that I can personalise newsletters & mailouts. Do you know if this is possible (sorry, for the techie question, but if there’s a quick answer it will really help!) Thanks.

    Aerlie

Trackbacks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge