how to create a stylish opt-in box for your wordpress website using the magic action box plugin

http://bloomonline.co.nz

How to Add a Horizontal Opt-In Box to the Bottom of your WordPress Blog Posts

using Magic Action Box and MailChimp



Underneath each blog post is a great spot to put an opt-in form.

Your visitors are more likely to want to sign up to hear more from you after reading a sample of the valuable content you provide. !This tutorial will show you how to use the Magic Action Box plugin to add a MailChimp sign up form like the one above to your WordPress website.



Step OneCreate a background image for your Action Box.

Your image will need to be the full width and height of your Action Box.

You can find out the correct width by using Firebug (or your browser’s developer tools) to show you the width of your website’s content area. I have added a link to a tutorial that show’s you how to do this under this slideshow.

The height can be up to you. The dimensions I used were 623px x 156px.



Step TwoLog in to your WordPress dashboard. Select the Magic Action Box Settings.

If you haven’t set it up already, go into the Main Settings and add your MailChimp API key (under the accounts tab).

Then click on Add Style to create a custom style for your Action Box.Give your style a unique name so you can find it easily later on

!

!

Then start working through each tab to add your background, colours, and fonts …



Step Three

Starting at the ‘General’ tab … !Add your background image and set the border to none. !I left the rest of the settings at the default.



Step Four

In the ‘Content Copy’ tab: !Set your font. If you choose ‘inherit’ it will use whatever font your website uses. !Change the rest of the settings to suit.



Step Five

In the ‘Main Heading’ tab: !Set the styles for your Action Box Heading. I left the top settings at the default and changed only the Heading Colour and Font Size options.



Step Six

In the ‘Sub Heading’ tab: !I changed the Colour and Font Size options and changed the Font Weight to normal. !The rest of the options I left as the default settings.



Step Seven

In the ‘Form Elements’ tab: !I set the Font, Colour & Font Size for the Form Label and Input Boxes. I also set the border colour for the Input Boxes. !The rest of the settings I left at the default. !You can change the Input Field width if you need to make things fit nicely.



Step Seven (cont.)

In the ‘Form Elements’ tab: !I set the Background colours for the button as well as the Font and Font Size. I also changed the Submit Button Width to fit my image. !The rest of the settings I left at the default.



Step EightNow, lets set up the Action Box … Select Action Boxes from your WordPress menu and click on Add New.

Give your Action Box a name, and select the style that you just set up in the previous steps.



Step Nine

Next, select your Mailing List Provider (I use MailChimp). !Then choose the list you want to add your new subscribers to. !You can set the text for your submit button here as well.



Step Ten

Change the Field Labels. I like my labels to show inside the input fields so I deleted the text in the Outside Field Labels boxes and only left text in the In-Field label boxes for Email Address and First Name.



Step Eleven

Lastly, I added the Main Heading and Sub Heading Copy.

You may need to tweak font sizes, padding and margins in your style settings to make things fit nicely around your background image.



Step TwelveNow you can go into your WordPress Post Editor and add your Action Box to your blog post. !Choose the Action Box you want to use in your post. !And select whether you want it to appear before or after the content. !Want it to appear in the middle of your content?Select Manual and use the shortcode [magicactionbox id=“XXX"] in your post where you want the Action Box to display.


how to create a stylish opt-in box for your wordpress website using the magic action box plugin

Marketing