Building your email list is one of the most important things you can do to market your business and your site should be filled with opportunities for users to opt-in to your mailing list. Right now on this site, we have three places to optin to our mailing list, which is managed with MailChimp:
- In a pop out.
- On our checkout page.
- As an option in our contact form.
The contact form on our site was built using Caldera Forms, and the mailing list opt-in uses the Caldera Forms MailChimp add-on. In this screencast, I show how to create a responsive contact form with MailChimp opt-in. I will also walk you through the process in this tutorial.
You can download an import file for the form I created in the screencast here. If you use that file make sure to set your email address in the mailer, and add your own MailChimp key. You can also check out how we styled our contact form in our theme’s Github repo.
Using the MailChimp add-on for Caldera Forms requires a free MailChimp account and a MailChimp API key. Make sure you have your keys before you The MailChimp documentation details how to find and generate API keys.
Creating The Form
To work with the MailChimp processor, your form will need a email field and one field for every field that your MailChimp list requires. In our case, that simply means email, first name and last name.
Of course you will also need a field for the message, and also a checkbox for visitors to choose whether or not they wish to join your newsletter. Having the checkbox field, or some other selector field is important, as you will want to make the MailChimp processor only work if someone has asked to be added — don’t forget that the “opt” in “optin” is short for “optional.”
It’s important that you create your form layout first, before adding the MailChimp processor, and have all of the required fields. If you do not, you will not be able to complete the MailChimp setup.
Adding The MailChimp Processor
When you click on the “Processors” links near the top left of the Caldera Forms editor, you will be taken to the processors panel. From there, on the left side you will see a gray “Add Processor” button, if you click that, you can select any installed processor–including the MailChimp processor. You should also see a link to it under the button.
If it’s not in any of those places, make sure you have uploaded the plugin, and activated your license in the “Extend” submenu of the Caldera Forms menu.
Once you have added the processor, the first thing you should do is set its condition for the processor to be used. You can access its conditions using the blue “Conditionals” button in the top right hand corner of the MailChimp processor’s tab.
In the conditional settings, select “Use” for your type of conditional, and then click the “Add Conditional Group” button on the right side. In the conditional group that appears, select the checkbox field you created to ask visitors if they wanted to join your list, and then use “is” for the second field, and the affirmative choice in the third field.
Now that, you have the conditional setup, you need to setup the actual processor. The first step is to add your MailChimp API key. Once you have done so you can select one of your existing MailChimp lists.
The next step is to map fields from your Caldera Form to the fields required by the list you have selected. For each MailChimp field, there is a drop-down with possible fields from your form to use. Note that the email address field must bound to an email types Caldera Form field.
Once you have connected the field form your form to your MailChimp fields, you can set the three options at the bottom. Those options cover whether or not to require double option, to send your welcome email and whether to allow updating existing users.
Taking It Further
That’s all you need to create the form, but that’s not all you can do. Keep in mind that you can add multiple processors to a form, of the same type and multiple types. This opens up a lot of possibilities.
For example, as long as you are getting a visitor’s name and email, why not register them for your site with our user registration processor?
You could also use a second select field to choose what MailChimp list to add users to. Just add one processor for list, and use the conditional panel to choose which one to add the visitors to.
Also, if you are using our Stripe or MailChimp add-on to sell products or services on your site, you can easily integrate the MailChimp processor into those forms. Doing so is a great way to use a one time sale as the start of a relationship.