Tutorial – Magic Action Box Plugin – Side Bar Opt-in Form

Back to Build Your List Dashboard > List Building Video Tutorials > WordPress Plugin Video Tutorials

Transcription of Magic Action Box Plugin – Side Bar Opt-in Form Tutorial

Lets go over here and I’m just going to copy that so I can set up the plugin. We are going to be doing a completely “soup to nuts” install. Lets go over to the dashboard, and we’re going to go into plugins, add new. For most of you, this is so old-hat. We’re going to install it and yes, I do want to install it an activate it. So that’s all well and good and now, as you can see, we’ve got our little controls in here.

What I’m going to do first is I’m just going to create a basic working opt-in box and then we’re going to dress it up and make it look nice. Again, Magic Action Box. We want a new action box. We want an opt-in form. So now lets put in a name. Nobody’s going to see this name, so it doesn’t matter. How about post bottom opt-in box. That’ll do. We’ll add user styles later.

Action box width. That refers to the full of this column. So I want that to be full width. It’s much easier to put it in 100%. Also, notice these pixels and percentages. If you don’t put those in, it doesn’t work. Definitely don’t forget that.

Always want responsive, because about half of our traffic is on mobile. I don’t need to enable horizontal layout, I don’t want to center. Here we go into the opt-in form settings. Now, there’s going to be some complexity with you Mailchimp people. It doesn’t happen for Aweber or GetResponse, I’ve tested it, but let me show you how this works.

We’re going to go into the dashboard of our Mailchimp account, and again, this could be for AWeber or GetResponse. What you’re going to do is you’re just going to get the HTML version of your opt-in form. Magic Action Box can work with any email service provider that will provide you an HTML version, but it has to be HTML, you don’t want to be using the JavaScript.

Here’s my sign up form. I’m going to go for embedded forms. Here’s my preview. Very nice. I want to get rid of that required field because obviously email address is required. There, it says “disable all JavaScript,” very important.

Actually, if I was in AWeber, they also have an option of strip out all unnecessary CSS. You’d want to do that. You want to simplify this form that you’re going to put into this thing as much as possible. So I’m just copying that, no big deal. I’m going to put it in here to opt-in form code. Also, make sure that this is set to “other copy and paste,” not to the newsletter. It will get all messed up.

There is a nice opportunity here for the submit button. I’m going to do the usual “sign me up.”

Next thing you want to do is just click “process code.” Now, we leave that alone. There’s an issue in there for Mailchimp people but I’m going to want to show you what it looks like before we go in and fix it. Forget response people, you can probably just leave it alone but you might want to be aware of it.

We’re going to use the default button style. Again, I don’t want to center my form options. You want one per field. This will give you every option on your form as one field per line. Otherwise, it looks weird. If you had a long narrow — this was your opt-in area that you wanted, I suppose you could do three or even four lines per field. It’s a design issue and we’ll skip over that for now.

This is fine. Opt-in copy, paste in what I’ve got here. They give you a lot of spaces for opt-in copy. You’ve got the main headline, the sub-headline, main opt-in copy, secondary opt-in copy, lots of options, which is awesome, but we’re going to keep it super simple for right now. You can also add an image or a video. That could be really powerful if you’ve got a video. We should probably be talking about creating a teaser video for opting into your email newsletter, but that’s not this video.

We’ve got all our setting, we’ve got the basics and we’re going to click save. It always asks me this, “do I want to leave — are you sure, do you want to leave the page?” Just ignore that and move forward. I don’t know why it does that.

So we’ve got a new action box. Now, actually, what we want to do — this is clearly bakery equipment. Lets go over to a page I can find easily, like dog bakery. Lets go over to post. I want to find all posts. I’m going to find the dog bakery post. Big surprise. Then we’re going to see how you can control Magic Action Box on a post per post basis, which will be fun.

So edit. Now we scroll down a bit and there it is. You want to select the action box, and this is where it gets cool because you could have multiple different opt-in boxes and you can set default settings and all these different rules with the pro version. Excellent, again, if you’ve got the 47 bucks and you feel adventurous, go for it.

Right now, I want this on the bottom and here’s why, is because as we go through all these dozens of different ways to build your list, you’re going to have to start picking and choosing which ones you do. If I added another opt-in box here and an opt-in box here, which would get kind of old. Even though I do have one down here, I’m going to put one in here because I’m also eventually going to be adding comments hopefully and I’m also going to be adding social sharing. So that’s all going to basically fill up this area of the screen and I want an opt-in box in here.

That’s why we’re doing that, and again, we’re going to just click save.

So there we are, it does work. It’s not beautiful, but it’s a good start. Lets go in and do some really basic styling and then we’ll close out this video.

Lets go in Magic Action Box and we want styles and buttons. Here we go. Create new style. Lets make the background white. Background image, you don’t want that. That would put a background image here and that makes it hard to read your copy and hard to see your opt-in button and that will suppress your conversion rate.

Border. Do we want a border? Yes, we do actually. I would like a border of — lets leave it at five pixels and lets do something snazzy that they will see. Maybe a little bit more stronger, that’s nice. I want it solid, I don’t want a shadow. How do I feel about padding for this? I feel find, I would love to fix that button but we’ll get to that. So lets click “save style.” Uh oh, and we call it “my style.” We can leave that.

Content copy. Main font settings. I want Veranda for all this. Line height is okay. Lets do main heading. Form elements. Lets get that button to look a little bit better. I’ve had issues with the styling in this, so I’m hoping this will all work but I’ve had problems with getting it to work before. Top margin, I would like that to be a little bit taller, so I’ll put in, say, margin 25. The background of the submit button, lets make it red. Nice, good, dark red.

Okay. Style’s saved. As you can see there are a lot more specifications we could put into the styling, but I just wanted to show you the basics.

What we need to do now is go into our action boxes and specify this style because we had not linked it up before. User styles and then you want to go into “my style.” Lovely. Alright, and we click reload. Tada! It’s not beautiful, it could be a lot better but it is there and if you upgraded to the paid version you could do all kinds of cool things with offering incentives that were related to the blog post, namely that would be the reason you would do that because relevancy and direct marketing is everything.

Sorry for the extra code issues, Mailchimp users and you guys at GetResponse and AWeber, I have tried it myself and there seems to be no issues with the opt-in code getting garbled by that code processor because you GetResponse and AWeber people aren’t putting in that honey pot.

Anyways, that’s the beginner tutorial for Magic Action Box and we will come back in a moment and try putting a nice full width header box with it. Alright, take care. Bye.

Leave a Reply

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