In part 4 of this seminar on How to Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes we show how to install and configure the MailChimp email box. And downloading of the signup box is exactly the same for both AWeber and MailChimp.
Install Email Signup Box
You just click on this and accept the link. Installing them also happens in exactly the same way. So we’ll come back over here to our boxes and Select Boxes and we’re going to start off by uploading the MailChimp box so we’ll upload it, choose the file, it’s mailchimp.zip.
Configure MailChimp Box
The MailChimp box does in fact have other things to configure. Let’s save that box. Whoops, actually we need to put a checkmark in before we save it, save that box. Now, once you’ve saved the box, you also need to refresh your screen because there is a MailChimp setting here under boxes that you want to use.
Connect the Box to Your MailChimp Account
If you click on that MailChimp settings box, I’m going to disconnect from MailChimp. This is what it looks like the first time you sign in here and what you need to do is to connect this box to your MailChimp account. So first you click there to get an API which essentially means you log in.
Now that we’re logged in, I guess we go back here and try it again. Once you’ve done that, when you logged in, you’ve got this MailChimp API Key so you can copy that and place that key there and connect the MailChimp. Once you’ve done that, now you have you have a list to choose from.
Choose Your Email Lists For Various Sign Up Forms
You can choose from one of your email lists for this signup form and actually, this is the default setting. You can create lots of different sign up forms and those sign up forms can sign up people to different lists. This is the default list so I’m just going to select that as my default list and save those options.
Add MailChimp Box to a Template
Then we can come over to the Skin Editor and in this case we do need to use the Add Box to create a box so we’ve got a MailChimp box and let’s call this one Free Sign Up because I’m going to show you how to create more than one box.
Add Multiple Sign Up Boxes
So we’ve got our Free Sign Up box and we’ll just drag it into place someplace. I think I’m going to drag it into the sidebar. I’m going to put it in the sidebar here and once I’ve done that, I now have a choice specifically of which of these lists to choose again. I’m going to choose the eMember Free again for this one. You don’t actually need to specify an ID or a class and you can just leave it like that and it will borrow all of the standard styles from Thesis Classic.
Let’s look at this on our page. You’ve got this email entry place with a Get Updates button. Now, you can put all the text you want around it.
Add Text Above the Signup Form
You could come back over to the Skin Editor and add a text box. Well, in fact let’s take this text box and add it up above that and in this text box, we’re going to give it an h4 and then “Sign Up for Our Newsletter” and below that you could put a little bit of text.
We’ll just do that and save it. And now looking at this I think actually we would need to style this. Let’s see, we probably need to give it a class of widget_title so it will borrow that. Let’s come back over here to that text box and <h4>. I must’ve mispelled that, h4, I see, it’s widget.widget_title so give the text box a class of widget and now it will borrow the same styles as the sidebar, there you go, so you can do that.
You can also create another instance of this. So let’s just say you’ve got a list for a free sign up so we’ll create a new MailChimp box and we’ll call this, Free Report. And we’ll choose a different one of these and the HTML ID, we’ll call it free_report so we’ve got a different way to style it. Let’s just drag it and drop it into the content column below the post box, save that and now you’ve got this one here, right so we’ve got two different ones.