How To Connect Forms to Mailchimp

In this guide, you'll learn how to add (or update) subscribers in Mailchimp when someone submits a form.

1

Configure your form

In your statickit.json file, either add a new form or update an existing form's actions:

{
  "forms": {
    "opt-in-form": {
      "name": "Opt-In Form",
      "fields": {
        "email": {
          "type": "email",
          "prettyName": "Email address"
        }
      },
      "actions": [
        {
          "app": "mailchimp",
          "type": "addOrUpdateContact",
          "audience": "<replace-with-your-audience-id>"
        }
      ]
    }
  }
}

Here's where to find your Audience ID place in the audience property:

• Log in to your Mailchimp account
• Click Audience tab at the top
• Navigate to Manage Audience › Settings
• Click Audience name and defaults
• Locate the ID under the "Audience ID" heading (it looks like 5ca598e7e8)

2

Add your API key

Next, you need to save your Mailchimp API key in your StaticKit secrets. Here's where to find it:

• Log in to your Mailchimp account
• Open the menu with your avatar in the upper right
• Navigate to Profile › Extras › API keys
• Under "Your API keys", click Create A Key

It will look something like this: ecee71ce9jkl636820fb55e0163515c6-us16

Copy the key and run the following command to store this as a secret value:

statickit secrets add mailchimp-api-key <paste-api-key-here>

Now, you're ready to deploy:

statickit deploy

3

Configure your fields (optional)

By default, the addOrUpdateContact action uses the email field. You can override the email address field using the emailAddressField property:

{
  "app": "mailchimp",
  "type": "addOrUpdateContact",
  "emailAddressField": "email_address"
}

If you are gathering additional fields (like first name), you can map them to Mailchimp merge fields:

{
  "app": "mailchimp",
  "type": "addOrUpdateContact",
  "mergeFields": {
    "FNAME": "first_name"
  }
}

4

Build your form

We have a few client libraries to help attach your interface to StaticKit:

Check out the Mailchimp reference to see all available actions and properties.