Fun + Done. Download your website planning toolkit.

Video Tutorial: Using Magic Action Box To Add & Customize Optin Forms On Your Website

Magic Action Box Plugin

Optin forms. You know you need them on your website.

But no matter how cute that silly monkey is in Mailchimp, or how easy Aweber makes it seem to make a form, it’s still a hassle (and not so pretty)!

Not only that, but you’ve been told you need them in multiple places on your website, and you’re not sure how to make that work.

Don’t worry- I’m here to save the day! (Or I suppose it’s my favorite plugin that will save the day)

First things first….

What Are The Must-Have Places To Add Optin forms?

Above The Fold

If you haven’t heard that term before, above the fold is the area that one sees when landing on your site before scrolling down. This may require some custom coding (or at least some knowledge of HTML & CSS), depending on your theme. This is something you can pretty easily hire someone to do for you, but the conversions are well worth the small cost.

On Your Sidebar

If you have a sidebar, people are usually looking at it. And if you’re going to put an optin anywhere, it should probably be there. And if you don’t have one above the fold, you can likely still get it there by placing it at the top of your sidebar.

Embedded on Your About or Contact Page

These pages exist for people to get to know you and how you can help them. They are interested in you (or contacting you), and if given the opportunity to get to know you better through an optin, they’ll likely take it on these pages. You can put one in the middle of your About Page and with a form plugin like Gravity Forms, you can add a checkbox to your contact form so that people who contact you are also added to your list.

At The Bottom Of Blog Posts

If a visitor gets all the way to the bottom of your blog post, they likely enjoyed what you wrote and are ready for more. Give them the opportunity for more, through a subscription to your newsletter! This can be setup automatically (see video below) using a plugin, so each time you add a blog post, your optin is set to go!

In Your Footer

Hey, if building your email list is a top priority for you, the more places the better. Just like a blog post, if someone has scrolled all the way to the bottom, they are likely diggin’ your stuff. And if they happened to miss all the other opportunities to optin, you can give them one last chance!

The Plugin That Makes It Easy

Magic Action Box!

Magic Action BoxIt’s a premium WordPress plugin ($47) that allows you to easily and quickly add multiple optin forms allllll over your site, including automatically at the bottom of blog posts, pages, and even pop ups (if that’s how you roll).

Now, if you’re dreaming of having a big feature box (I talk about how it’s my best converting optin here) or a horizontal optin below the header, it’s time to go pro and hire someone to help you out. But for all the other optins you need, MAB will do the trick.

Why I Love It:

  • Create unlimited boxes with different text and different styling (colors, fonts, etc). You’ll notice my optin at the bottom of this blog post doesn’t look the same as the one in my footer.
  • Embed optin boxes almost anywhere using widgets or easy shortcode.
  • Each time I want to add a new box on a new page, I can just check a box on that page or add the shortcode and it appears!
  • Automatic optins at the bottom of your blog posts.
  • Easily add an image (like a pdf or ebook).
  • No need to go into your newsletter subscriber program every time you need a new optin.
  • Mailchimp & Aweber can have bugs when you put multiple optins on one page (like when a user tabs they can get sent to another optin form on the page- confusing!). This can be fixed with some code, but let’s be honest, you don’t want to spend your day googling for that. MAB takes care of those errors.
  • Customized pop-ups. I don’t love pop ups, but people swear by the conversions. I might try them out one day and I can do so with MAB. (You do need to “Ultimate” version of the plugin to unlock this feature)

So without further ado- here’s a MAB 101 tutorial to how to use the plugin.


I try to keep my videos as short and to-the-point as possible. This one went a little long because there is a lot to cover. I could go into more detail but it would bore you to tears.

So please let me know in the comments if you have any specific questions with using MAB or would like me to go into more detail on a certain aspect.

Do you use a plugin for optin forms? If so, which one and how do you like it? Let me know in the comments!

You can find out more info about MAB on their site here. (P.S. Not an affiliate link, just love it!)

-Leah

 

 

 

LIKE THAT BLOG POST?
Get more straight to your inbox PLUS:

The Website Planning Guide + 5 Common Website Mistakes You Shouldn't Make!

{ 39 comments… add one }
  • AWESOME tutorial!! Seems so easy…and oh-so-pretty! Thanks so much for doing this! You ROCK!!

    • Leah

      You’re welcome Stefani! Saves so much time and is a lot easier than any other manual way. You can use it MAB for horizontal forms as well, just need to add a little CSS to make it float. I have the dev version and add it to all my client sites.

  • Leah!!! First of all I am bowing to you and want to thank you profusely for this post and your incredibly generous video! I bought the plugin and created my option box right along with you. Thank you. Thank you. Thank you! It’s as wonderful as you said!

    My only issue with my box is that I have an extra empty third box after name and email that seems to have no purpose at all. I went back into MailChimp and made sure everything was unchecked the way you indicated and it keeps happening. Do you know why I’m getting that box?

    • Leah

      Hey Laurie! That’s strange, but I think I know where it may be coming from. If you go to your list in MC, then click on Signup Forms, then General Forms, do you have last name or any third field showing on that form? You need to make sure you have your base form setup there first with the fields you want….then when the code comes through with the “naked form” it should only be processed showing only the fields you left.

      • You were right! I did have two hidden fields on the general form, but even deleting those didn’t help. I have no idea what that third box is. I’ll check with Magic Action Box – I don’t want to impose on you further!!

  • Leah

    Weird. Yes, check with them, I’m sure it’s an easy fix. They always get back to me on their forum within hours. And if you don’t mind coming back here with their answer that’d be great, in case anyone else here has the same issue.

    • Yes! Success!!! It’s actually such a common thing, that they have it as their first post on the support page. I wanted to try the fix to make sure it worked before posting a link to it here. I copied and pasted the code from their answer and it worked like a charm! Dean says it’s a new thing with MailChimp. Here’s the link to the post. https://prosulum.zendesk.com/home

      Thanks again so much for this amazing post and for your help!!!

  • So, I just spent 2 hours trying to figure this out. Trying to find a great tutorial. Then trying to teach myself.
    THEN I got to your website just to see how the “PRO”‘s do it. AND I FIND A TUTORIAL

    You read my mind Leah Kalamakis. You read my mind. Now I can go make these things look good finally!

    • Any idea how to center the input fields? The are aligned left and I can’t figure out how to make them less ugly

      • Leah

        For the content, main heading & sub-heading, there is an option in the styling fields to choose center text. Unfortunately for the input fields, you have to use a little CSS. Hopefully they’ll add that option to a future update soon!

        • Hi Leah – Love this post btw. OK – I added some code that I found online but none of them work. What code do you have on yours?

  • What are main differences between free version and professional?

    • Leah

      Hi Rebecca- With pro you are able to assign automatic ones to your posts and pages. This is especially useful to have an optin automatically at the end of each of your blog posts. You can also use the shortcode as I show in the video to put the box in the middle of a page (which is great for sales pages or your about page for example), rather than just putting it at the top or bottom. With pro- you can also make and upload your own button, so it isn’t the standard one (although on this site, I use the standard one).

  • Watched your video and it makes the whole process look super easy. With this plugin can an optin box be put in under header? I have learned that this is an important location to have one. Thanks.

    • Leah

      Rebecca- As I mentioned way up top (which is easy to miss!), the horizontal one does require a little css knowledge if you’d like to have the text on the left and the input boxes on the right. You can use MAB (I do), but have to put some extra css code to make it happen like that. If you don’t mind having the text on top of the input fields, then usually you are able to make it work without any css. You can see an example of that at http://www.everfluent.com or http://www.pilatesnutritionist.com Of course, it also depends on your theme and if the theme has an area under the header where you are able to put the shortcode. Not all themes do, in which case you would have to code in the area as well. Usually I recommend people outsource the horizontal header optin box.

      • Rebecca

        Your tutorial worked wonders. It made adding my opt-ins super easy. Do you think you will ever do a video on adding opt-in under header? I would love to be able to do that. Thanks again.

  • Wiebke

    Thank’s a lot for all the great information. Do you install MAB for clients aswell? And if so, how do you handle that?

    • Leah

      Hi Wiedbke! Yes I certainly include it in all my client websites so that they are able to add new ones to new pages as they grow.

      • Wiebke

        I used to install it in one of my clients website but run into difficultis when a new update came. But the same applies to other payed plugins. I really need to figure out how to handle that with ease. Love your videos!

  • Milena

    Hi Leah! Thanks for the tutorial, it’s a realy important one :) I played with it all day yesterday and already made some pretty nice opt-in boxes. I had a problem with centering the email and name boxes in “my style” boxes though. It seems that if you style it yourself, the default settings looses some of their adjustability. I have centered the text but the boxes show on the right.. Do. You have any advice for that? Thank you !

  • Hi I got 4.30 into the video clicked on the post tag and the drop down and it’s not clickable at all no idea what to do now. I’m getting so frustrated with the whole thing argghhh
    Can you tell me why it doesn’t work. I’m going around the bend. I have wordpress with a thesis theme and have used it for a few years now so it’s not that I am clueless. I was sent here by a fellow b schooler. And your video is really clear and easy to follow up until this point.
    Hope you can help xxx
    ciao lisa

    • Leah

      Hmmm, that’s super strange. Have you checked that you have the most recent updated version of MAB?

  • Awesome, tutorial really helped me out, thanks! :)

  • Kevin

    You are so Awesome! I have the plugin and couldn’t find anything of customize the style! Great video Super helpful.

  • Thanks for the video. Very clear.

    One problem I have is that when I install the magic action box on my home page the optin fields are stacked vertically and stretch right across the box, not horizontally placed as in your video and as in the display pic for the plugin. Any suggestion about how to fix this?

    • Leah

      Hi Des- there was a recent update of MAB in which you have the ability on the action box page to choose “horizontal layout”. Before we needed some css code to make that work, but now it’s super easy!

  • In my previous comment I meant to add a link to a screenshot illustrating the problem – http://bit.ly/1sGhSvt

    It’s on a test site: http://getthesocialedge.com

  • Eva

    Ah, another priceless tip! With the information I’ve gathered from just the first couple pages of your blog you’ve saved me hours of hunting around trying to work out how to do what I need to do!

    You’ve got yourself a very happy new stalker!

    • Leah

      Haha, I’m so glad! Stalk away Eva :)

  • Thanks for this Leah! I’ve been using Hybrid Connect as an optin builder for my clients and it’s been excellent with one exception: it doesn’t EVER work on any Home pages (body). The HC support says it doesn’t work on certain WP templates but I’ve tried them on 9 and none of them stick.

    I was looking for another solution and alternative from HC and creating manual CSS forms for my clients and I just found this blog! I’ve just purchase the Magic Action Box :)

    Thanks Leah, you’re awesome at sharing great products and info!

  • Great tutorial Leah! I looked at MAB in the past but the learning curve was too steep and I moved on. I think with your help I can finally make it work.

    Great site too! I was a fan almost the moment I landed. “Fun+Done” is the absolute best benefit statement I have ever seen! 2 things I am sorely missing in my blogging business.

    Thanks Leah

    p.s. You should sign up for an affiliate link. You’re the reason I’m going to buy MAB. :)

  • Thanks a ton! That was simple and easy to follow.
    One question: can you have two action boxes on the same page? For example, my site is for marriages and I’d like a sign up for a weekly marriage tip and I’d like one for men and one for women. Ideally, they would be side by side on each page.
    Again – Thanks!!

    • Leah

      Yes, you certainly can have more than one on the same page. You’ll just create two separate lists in your newsletter program and then create two different action boxes with the different code from the list pasted in!

  • irene

    Hi, thank you very much for your tutorial, it’s great!. I have some problem because I have email field duplicated and I don’t know why? I have followed all the process of your tutorial. Look: http://beca.assistantgroup.com/
    Could you help me, please?

    • Leah

      Hi Irene, looks like you got it fixed, glad you found the solution!

  • Leah, this is a wonderful tutorial. I was able to incorporate it right away onto my blog. Thanks so much. Kris

  • Andrew

    Great tutorial! Do you have any idea what kind of custom CSS I would need to enter to have the box remain fixed (sticky)? I’ve created a horizontal bar to replace HelloBar at the top, but I’d like it to remain there as the user scrolls down.

Leave a Comment

All the instructions she provided allowed me to do things on my own, and her willingness to help if I didn’t understand something. People take my business more serious as my website is much more professional.
Carlie Fitzpatrick
Leah Kalamakis
FUN + DONE
Download your effortless website planning toolkit!