Send Form Submissions to MailChimp

There are several newsletter services, but MailChimp is one of the old standbys. If you need to collect contact information, or if you want to send any information to another service, this function is for you!

With this function, we essentially create a webhook to talk to a 3rd party service, so you can use this as a model to connect with other services as you like.

This idea uses the Strattic Contact Form 7 Zapier (Webhook) integration to work to send data to another service… And avoids needing to set up a Zapier account 🤓.

Here’s what you would do if you were going to use this for MailChimp (but you can imagine using this for other services):

1. Get your MailChimp API keys and necessary List IDs from your MailChimp dashboard (I’m sure other services have similar API keys and endpoints).
2. Add the URLs and API keys to the lambda in the attached project.
3. Modify the inputs to match your form’s data that you need to capture, looking at the name attribute on the HTML form (this is what gets passed to the webhook and sent, there are a lot of comments in the Lambda function to guide you).
4. Deploy your project with the Serverless framework (or directly to AWS, if you do this, you’ll want to set up the API Gateway to work with your Lambda). You’ll get a URL you can POST to this way.
5. Take that URL and add it to the “Zapier integration by Strattic: Zapier Webhook URL” field in the Form Settings page of the form on your WordPress admin. Save it, this will sync the webhook to our backend and use it when a form is submitted.
6. Test the form with several submissions. You should still receive any notifications you’ve set up, as this is only hitting the webhook.

That should be about it to make this work.

This is the serverless.yml file:

org: your-org
app: webhook-contact-form-7-to-mailchimp
service: webhook-contact-form-7-to-mailchimp

frameworkVersion: '2'

provider:
  name: aws
  runtime: nodejs12.x
  lambdaHashingVersion: '20201221'
  environment:
    MAILCHIMP_API_SERVER: ${param:mailchimpServer}
    MAILCHIMP_API_LIST_ID: ${param:mailchimpListId}
    MAILCHIMP_API_KEY: ${param:mailchimpApiKey}

package:
  patterns:
    - '!node_modules/**'
    - 'node_modules/node-fetch/**'

functions:
  postFormData:
    handler: handler.postFormData
    events:
      - http:
          path: /
          method: post

This is the handler.js file:

"use strict";
const fetch = require('node-fetch');

// You can get these from your MailChimp Dashboard
const apiServer = process.env.MAILCHIMP_API_SERVER; // The is the prefix of all your account URLs.
const listId = process.env.MAILCHIMP_API_LIST_ID; // Find: https://${apiServer}.admin.mailchimp.com/lists/settings/defaults?id=123456
const apiToken = process.env.MAILCHIMP_API_KEY // Find: https://${apiServer}.admin.mailchimp.com/account/api/

module.exports.postFormData = async (event) => {
  // Using MailChimp's API, for example:
  // https://mailchimp.com/developer/marketing/guides/create-your-first-audience/#add-a-contact-to-an-audience
  // URL would be: "https://$API_SERVER.api.mailchimp.com/3.0/lists/$list_id/members"

  // When our webhook integration sends info to Zapier or other platforms, you'll be able to
  // access that information in the event.body area of the request:
  console.log(event.body)

  // Parse the string so we can use the data.
  const formData = JSON.parse(event.body)
  // AS AN EXAMPLE, from a Contact Form 7, you can find the indexes in the input's `name` value (e.g. <input name="first-name"...>)
  // This will be the first name
  console.log(formData['first-name'])
  // This will be the last name
  console.log(formData['last-name'])
  // This will be the email
  console.log(formData['email'])
  // You can check your logs (e.g., in CloudWatch) wherever they're being logged to.

  // // The URL we'll post to: "https://$API_SERVER.api.mailchimp.com/3.0/lists/$list_id/members"
  const url = `https://${apiServer}.api.mailchimp.com/3.0/lists/${listId}/members`;
  const body = JSON.stringify(
    {
      "email_address": formData['email'],
      "status": "subscribed",
      "merge_fields": {
        "FNAME": formData['first-name'],
        "LNAME": formData['last-name']
      },
      "tags": ["APITag"]
    }
  );

  // // Standard options for the request.
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${apiToken}`
    },
    body: body
  };
  
  // // Send the request.
  await fetch(url, options)
    .then(res => res.json())
    .then(json => console.log('sls success: ' + JSON.stringify(json)))
    .catch(err => console.error('error:' + JSON.stringify(err)));

  return {
    statusCode: 200,
    body: JSON.stringify(
      {
        message: "Your form was submitted to MailChimp.",
        input: event,
      },
      null,
      2
    ),
  };
};