Using Magic Action Box with any Custom HTML Form

This guide will walk you through integrating other email list providers with Magic Action Box using custom HTML form code.

This makes it possible to connect any email list service with Magic Action Box as long as they provide an HTML form code.

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.

What it looks like in MailChimp

What it looks like in Aweber

Some providers like MailChimp and Aweber also provide a javascript version. Make sure you select the HTML version and not the javascript version.

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