Creating Your First Action Box (Opt-in form)

This guide will walk you through setting up an action box using the html code from your email opt-in provider i.e. MailChimp, Aweber… This guide should work with any provider as long as they provide a html code for you to copy and paste to your website.

Built-in integration

Magic Action Box also has built-in integration with some of the most popular email list services and form plugins. If you want to use Magic Action Box with built-in integration, follow this guide.

After installing Magic Action Box (or MAB for short), you should see two new menu items in your WordPress Dashboard – Magic Action Box.

So, what we’re going to do is to add an opt-in box at the bottom of your blog post. If you’re wondering why the bottom of your blog post is the best place to put your opt-in box, check out this article for the reasons why.

Quick start guide to add an action box under your blog posts:

1. Get the HTML Form Code

Log in to your email list service provider and grab the HTML form code. Some providers like MailChimp and Aweber also provide a javascript version. Do not select this.

What it looks like in MailChimp

What it looks like in Aweber

Make sure you select the HTML option and not the JavaScript one.

2. Create a new action box

Back to your WordPress dashboard, go to Magic Action BoxNew Action Box

You should see a screen that looks something like this:

Choose Optin Form.

There are different types of action boxes and you cannot change the type of an action box once you have chosen it’s type.

3. Set up the action box

In the next screen, set name for your action box. Right below that, you’ll see the Action Box: General Settings section. Skip that for now and look for the Select Mailing List Provider dropdown in the next section.

Choose Other (Copy & Paste).

Note: MAB also has built-in support for MailChimp, Aweber, MailPoet and Postmatic.

Now paste the raw HTML form code that you copied from your email list service provider in Step #1 into the Opt In Form Code field.

Then click on the Process Code button.

We do this because each email list provider has their own way of setting up their opt in form code. But MAB cannot create a style for each email list provider. So, what we do instead is to process the opt-in form code from your email list provider and mold it into something that MAB can style and use.

Tip: If you want to change the submit button text, do this before clicking on the Process Code button. And yes, you can process the code any time.

Next, style your action box. Go back up and look for the Action Box Style drop down select box and choose a style.

And add in the headings and other text you want the action box to have. You can also show an image to go along with your action box.

4. Save

Now save your action box by hitting the Publish button.

5. Add your action box to a blog post or page

Head on over to the blog post (or page) where you want the opt in box (action box) to appear.

Edit the post/page and look for the Select Action Box dropdown. Select the action box that you created in steps 2 and 3.

You can also choose to show the opt in box before the blog post or after it.

6. Save the blog post

That’s it. View your blog post and you should see the action box show up below the content (if you chose the After Content option).

If you are getting problems, go to our support site at http://prosulum.zendesk.com and create a ticket. We’ll get in touch within 24 hours.

No comments yet.

Leave a Reply