Live Chat
Knowledgebase
MailChimp Integration
Posted by Asian Fox Developments - Support Department on 14 May 2015 03:01 AM

One of the new feature within Web Form Builder is the ability to send your form data to another website. In this article, we’ll show you how to integrate your form with MailChimp.

 

Basically, using this new webhook feature, you’ll be able to call any MailChimp API to do the tasks you need.

 

Some common integrations are:

  • Add a new subscriber to a list of your choosing
  • Unsubscribe an email address from a list of your choosing
  • Edit the email address, merge fields, and interest groups for a list member
  • Create a new draft campaign to send
  • Delete a campaign

 

Find your MailChimp API Key

The first thing you need to do before proceeding with the integration is to generate/find your MailChimp API Key.

Login to your MailChimp panel, click Profile ⇢ Account Settings ⇢ Extras ⇢ API Keys and then copy your existing API Key or click the Create a Key button.

More detailed instruction (video) also available on MailChimp help page.

Your MailChimp API Key should be something like this:
1644b44d50bcc02f6f789aaf324f82ec-us4

 

Find your MailChimp URL (API Endpoint)

The next thing you need is your MailChimp URL (API Endpoint). Asian Fox Developments - Web Form Builder will be using this URL to submit your form data to your MailChimp account.

The generic format for your MailChimp URL is like this:

https://XXX.api.mailchimp.com/2.0/

where XXX should be replaced with the portion after the dash in your API Key. e.g. “us1″, “us2″, “uk1″, etc. A solid example – say your API Key is 1644b44d50bcc02f6f789aaf324f82ec-us4.

Then your MailChimp URL would be:

https://us4.api.mailchimp.com/2.0/

We’ll be using the above URL as the base part of any other URLs, since each task will have its own specific URL.

 

Add a new subscriber to a list of your choosing

Let say you have a simple form with only one email field:

and you would like to add the email address entered by your users into your MailChimp list named Subscriber List.

 

Simply go to your Asian Fox Developments - Web Form Builder panel and click Notifications menu.

 

Click Send Form Data to Another Website option and then enter this URL into the Website URL:

https://us4.api.mailchimp.com/2.0/lists/subscribe

Note that the URL above is basically using your MailChimp URL, with the addition of lists/subscribe at the end of it. Make sure to use your own MailChimp URL.

Check the Use Custom HTTP Headers and paste this code:

{
"Content-Type": "application/json",
"User-Agent": "Asian Fox Developments - Web Form Builder"
}

like this:

Then select Send Raw Data and paste this code:

{
"apikey": "1644b44d50bcc02f6f789aaf324f82ec-us4",
"id": "7bab35f1af",
"email": {
"email": "{element_2}"
},
"double_optin": false,
"update_existing": true,
"replace_interests": true,
"send_welcome": true
}

like this:

Note that the code above need to be adjusted with your own API Key, List ID and the template variable of your email field.

To get the template variable of your email field, simply click the template variable link at the bottom of the page:

To get your List ID, go to your MailChimp account, click Lists and select the list name you would like the form to send the data into. Click Settings ⇢ List Name and Defaults and you’ll find your List ID:

 

 

and that’s it. Save the settings and test by submitting your form. The email address will be automatically added to the list you choose on your MailChimp account.

 

Unsubscribe an email address from a list of your choosing

Creating unsubscribe form is pretty much the same as the subscribe form above (#1). The only thing different are the Website URL and the Raw Data.

You should use this URL to unsubscribe:
https://us4.api.mailchimp.com/2.0/lists/unsubscribe

Note that the URL above is basically using your MailChimp URL, with the addition of lists/subscribe at the end of it. Make sure to use your own MailChimp URL.

Check the Use Custom HTTP Headers and paste this code:

 

{
"Content-Type": "application/json",
"User-Agent": "Asian Fox Developments - Web Form Builder"
}

like this:

Then select Send Raw Data and paste this code:

{
"apikey": "1644b44d50bcc02f6f789aaf324f82ec-us4",
"id": "7bab35f1af",
"email": {
"email": "{element_1}"
},
"delete_member": false,
"send_goodbye": false,
"send_notify": true
}

like this:

Note that the code above need to be adjusted with your own API Key, List ID and the template variable of your email field.

 

Other possible integrations

There are lots other thing you can do with your form and MailChimp. You might want to take a look into MailChimp API Documentation page.

Find the method you would like to implement and paste the code into the Raw Data section as above.

 

 

(2 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
© 2017 Asian Fox Developments. All Rights Reserved.