Build Your Own Business Website header image

How to Create a Custom Opt-in Form with MailChimp & Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 – Create a Custom MailChimp Form

Good evening everybody. Tonight I’ve promised that I would do a demonstration of how to create a custom Opt-in form using MailChimp for Thesis 2.

We are going to start off with the MailChimp integration into a custom form. This may look very familiar to you because I’ve done this same process with AWeber as well but we’re going to do it this time with MailChimp.

Create Basic Form in MailChimp

The first thing to do is log in to MailChimp and create that very basic form. I’ve got a list and I’m going to essentially add a new form to this list, let’s do it over here. So I’m going to add a form to that list.

Right now, I’ve got these things in it but actually, all I really want is name and email address. I’m just going to delete this form and I’m going to change this one to name. Actually, I’m just going to delete it and I want to get rid of this thing too.

Then we’re going to add a text field and this is going to be Name and the Help. Text will be Name and we’ll make it required, save that field. Then add email address, we’re going to add Help Text, it’ll be Email. And actually, I’m going to have a label there which will make it easier for us to do it this way. Okay, Merge fields must have a label so we’re just going to remove the label.

Export the MailChimp Form

So we’ve got our form, we’re going to save it and now I want to export the form. I’m not as good at MailChimp as I am on other things so I’m looking for Signup Form. Signup Form Embed Code, that’s what I’m looking for here and I’m going to do a Naked Form and it’s Email Address, Name and Subscribe and then I’m going to copy this form. So we’ve got our form now.

Add the MailChimp Form to Thesis 2

Essentially, we want it without any CSS. We want it looking just like that. Then I’m going to come over to the Skin Editor and we’re going to put it in the feature box. So on our front page and our feature box area, we’re going to drag the widget area out.

Now we’re going to create a new text box, that will be Opt-in form and drag this up here and drop it in the feature box and we’ll open up the Opt-in form and paste that code.

Edit the Form

I’m also just going to get rid of that little EMAILTYPE so Email Format, this div all the way down to this div, I’m going to delete that because I don’t really care about that input. All I care about is the two merged forms. Let’s see, I’m going to get rid of the label so we’ve got a label for and I’m just going to get rid of that label. And then I’m going to do the same thing up above, get rid of this label.

Then we’ve got this div class field group and actually, I’m going to delete that as well. I’m going to delete the closing one and the opening one so that both of these input fields are inside the same div.

Then I’m going to look at our response class and okay, div class=”clear” and then we’ve got this input submit value=”Subscribe” name=”subscribe”. We’re going to leave that like this but instead of type=”submit”, we’re going to say type=”image” because we’re going to use an image for that. We’re going to wrap it in a div, we’re going to disable the automatic p tags and give it an id of optin.

Review the Form on the Front Page

Let’s save that template and come over here and take a look at it now. We want to get rid of that little thing that says, *indicates required. We’ve got our two different input fields and we’ve got our submit button.

Make Final Edits to the Form

Let’s go back to this for a second, we’re going to get that little thing out of there too and we’re going to get rid of Subscribe to our mailing list. Input type=”email” value= and this is what we’re going to say in here, is “email” because that’s going to be the little thing that sits inside of it. Input type=”text” value=”name” so we’ve got that.

Let’s save the template again, see what it looks like now. We’ve got email and name. In fact, I’m just going to switch those around too so it’s a name and email. So we’ve got name and email and our submit button.

1 Comment… add one
1 comment… add one
  • Paul April 18, 2014, 2:26 pm

    Thanks for helping me with Thesis 2.0 mail chimp box. Please send me info on Pearsonified demo.

    Cheers,
    Paul

Leave a Comment