WordPress Form to Mailchimp Signup with Pipedream

When it comes to basic WordPress form solution, the popular Contact Form 7 (CF7) should be enough for simple data collection. But where does CF7 store its data? And what about data that needs to leave WordPress, like Mailchimp forms? Should I pick some janky plugin just to make a WordPress form with Mailchimp signup?

At Digital Mark, we standardized our WordPress form plugin stack last year. Now Contact Us, Mailchimp Signup and most other forms need just the same two basic plugins across all our sites. We couldn’t be happier with the setup, and we wanted to share some of the tricks with our readers. So here we go!

Our Preferred WordPress Form Plugin Stack

We use the following steps and tools to manage routine form submissions across many sites:

1. Contact Form 7
2. CF7 to Webhook
3. Pipedream HTTP Endpoint
4. Data Destination (Mailchimp API in this case)

To understand what happens in the above steps, note that we accept the form data with just the basic CF7 setup (1); then we use a popular webhook plugin to send the data out of WordPress to an API endpoint (2).

The endpoint is created in an amazing SaaS tool called Pipedream (3). Once the data reaches the endpoint, Pipedream gives us a whole suite of tools and boilerplate code to integrate with other APIs like Mailchimp (4).

In a follow-up tutorial, I will also be adding a Step 5, which will be a step to send an email to the site admin using Amazon SES, letting them know a new Mailchimp signup occurred via their WordPress form.

Contact Form 7 to Mailchimp

The vast majority of our customers don’t need to handle conditional logic in their WordPress forms. This means that the basic (and free) Contact Form 7 functionality will do. CF7 is solid just because it’s been around a long time, it’s stable, and it’s relatively easy to integrate into various themes. (We spring for Gravity Forms and in those edge cases where we need a more robust solution).

In the past we’d set up our forms with email notifications to the site admin. But what if those don’t go through, or Contact Form 7 stopped sending emails? And is email really the best way to manage and track submissions, anyway? It’s frustrating that CF7 doesn’t give us a central place to view previous form submissions. Plus, add-ons like Flamingo can introduce another attack surface for hackers. Super annoying!

Our setup fills all of these gaps in CF7. By sending the data outside of WordPress upon submission, we don’t need to worry about CF7 not sending emails, or about finding/handling previous form submissions in the WordPress backend.

All that said, note that if you would prefer not to use CF7, you can still follow the rest of this tutorial. The trick to this setup is just to make sure your forms plugin also has the ability to send Webhooks when forms are submitted.

Contact Form 7 to Webhook

Webhooks sound real fancy, but all they are is a text message sent to an endpoint (an endpoint is just a URL).

If you aren’t familiar with APIs, you may be wondering what that actually means. Well, don’t worry, because you already send messages to URLs all the time. Whenever we click a link, for example, we are sending a message to the link’s URL. The message basically says: “Hey- Get me that website right away!”

When we use webhooks, it’s similar to this; but instead of clicking a link to say “Get me that website,” this time our users are submitting a form and sending data to a dedicated URL, saying “Hey- Post this data to your records.”

To send webooks from CF7, we’ve had a great experience with the CF7 to Webhook plugin, and that’s what we’ll be using in this tutorial. CF7 to Webhook was previously known as CF to Zapier, which makes sense because Zapier is the leader in webhook “listeners.” That’s a fancy way of saying Zapier provides lots of URLs that sit and listen for incoming messages. Platforms like Zapier are great because they also provide lots of tools for handling those messages when they come in, and passing the data on to other services.

Let’s get started!

Prerequisites

• WordPress site with admin permissions
• Contact Form 7 plugin, or similar plugin (like Gravity) that allows for webhooks

1. Install CF7 to Webhook.

In your WordPress backend, navigate to Plugins >> Add New and search for “webhook.” You’ll see that the first result is the one we want, by Mario Valney and Vizir Software Studio.

Click Install Now and then, once that’s done, click the same button again to Activiate the plugin.

Pipedream for WordPress Webhook Listeners

Once you’ve got CF7 to Webhook installed, you’ll need to tell each of your website forms where to send data when you get submissions. That means you need a URL endpoint, some place where a “listener” will await your calls and accept your data.

When it comes to setting up URL endpoints to listen for events like form submissions, Pipedream is our favorite solution hands down. Pipedream is a Zapier alternative that’s geared towards developers. We like it because it’s cleaner and easier to use compared to Zapier. It’s also got a more competitive cost structure.

2. Set up a Pipedream HTTP Endpoint for our WordPress webhook listener.

Pipedream makes it super easy to get started. Just sign up, then click Workflows in the left pane and the New + button in the top right. Once you do that, you’ll see that creating an HTTP endpoint is the first option on the top right when selecting a type of “trigger.”

Triggers are just the way to kick off the steps in your workflow in response to an event. In our case:

• The events will be form submissions;
• the trigger will be when the form submission hits our endpoint URL;
• and the workflow will be a series of steps we take with the data when it comes in (like adding an email to Mailchimp).

Once we select HTTP API in the Pipedream GUI, we’ll be presented with a handy URL. That’s our new endpoint!

3. Add your listener endpoint to your WordPress forms.

Back in WordPress, we’ll need to tell our forms about our cool new endpoint.

In the WordPress backend, navigate to Contact in the left pane, then select the form you’d like to work on. Since we installed the CF to Webhook plugin, you’ll notice that each of our CF7 forms now has an extra tab in its settings.

On the Webhook tab of your form, go ahead and check the box for Send to Webhook. Then be sure to paste in your URL from Pipedream right there into the Webhook URL field. We typically opt to uncheck the Send Mail option, since we handle email notifications later in Pipedream instead.

4. Send a test event from your WordPress webhook to Pipedream.

So that was pretty painless; our form submissions are already set up to leave WordPress and reach Pipedream. Let’s see how they look.

Go ahead and submit your form via your WordPress frontend website. In my case, it’s a Newsletter signup form with two fields: Name, and Email. Here’s how the submission looks when it reaches Pipedream.

In the Pipedream workflow view, you’ll see that events stream in on the left panel. Click the event to view its happenings. In our case, by toggling the body of the event, we can see that a handsome fella named Phil submitted the form this time. The body of the message is beautified a bit by Pipedream, but it’s actually a typical JSON object that looks like this:

{
"your-email" : "phil@notmyemail.com",
"your-name" : "phil"
}

This makes sense, having two JSON indexes, since our form had two fields. In fact, if we flip back to WordPress and our form’s Webhook tab, we’ll see that we can control this format if we’d like. Cool.

Destination: WordPress Form to Mailchimp Signup

So now that we’ve rescued our data from the CF7 MySQL abyss, now what? How do we get the submission to the WordPress form to Mailchimp?

CF7 + Webhook is our go-to stack for lots of forms, so that means there’s lots of things we may want to do with data when it comes in. In the case of this Newsletter signup form, we’ll want the workflow to look like this:

1. User fills out WordPress form, triggering a web hook.
2. Submission reaches Pipedream endpoint and triggers Workflow.
3. User’s email address is added to appropriate Mailchimp list.
4. Site admin gets an email notifying him or her of the recent signup.

Luckily, thanks to Pipedream, this is no sweat. Here’s how it works…

5. Set up your Mailchimp account in Pipedream.

The beauty of services like Pipedream is the way they glue all of your other services together for you. The reason this is such a timesaver is because Pipedream will handle the nuts and bolts of authenticating your requests to these services.

Basically, the way we get our WordPress forms to Mailchimp Signups here, is to use Pipedream as a sort of entrepôt for your data. WordPress will ship things there, and other services only have to reach Pipedream in order to get the data they need.

Toward that end, let’s let our Pipedream account authenticate itself with our Mailchimp account. That way Pipedream can handle future operations in our Mailchimp account automatically.

In Pipedream, navigate to Accounts in the left pane and click Connect App in the top right.

In the dialogue, search for Mailchimp and select it. A popup will appear, giving you the opportunity to sign in to your Mailchimp account.

Now Pipedream has permission to do stuff for you in your Mailchimp account. Nice.

6. Add Mailchimp steps to your workflow.

Since Pipedream is awesome, most of the code you need to add a subscriber to Mailchimp will be provided to you. All we have to do is click the plus sign below our endpoint to add a new step. Then search for Mailchimp.

As we’ll soon see, Mailchimp will require a few inputs from us to proceed.

• Mailchimp List Id, for the subscriber list you are targeting.
• Subscriber hash, which is just the user’s email addressed encoded with MD5 hashing.
• Email address, this is a bit redundant since we provided the hash, but they want the plain text email also.
• statu_if_new, which is just a way to classify the status of the user, in this case to “subscribed.”
• marketing_permission_id, which is one little trick I encountered–
  • The Mailchimp API seems to want something in this field, even if it’s just dummy text.
  • My campaigns don’t actually utilize this field… it seems it may relate to GDPR compliance in Europe.
  • It may be possible to forgo using dummy text here by setting other fields, such as marketing_permissions_enabled… but I haven’t tried that because my way seems to work fine.

7. Track down values for Mailchimp’s required fields, like List Id and marketing_permission_id.

It’s time to process that data in Pipedream and prep what we need for the Mailchimp API. Let’s tackle the Mailchimp required API fields one at a time.

7a. Mailchimp List Id

The Mailchimp List Id is just the unique alpha-numeric code that Mailchimp uses for your subscriber list. Since putting this number in an obvious place would make too much sense, Mailchimp makes us use the actual API to find it.

To get your Mailchimp List Id, all you have to do is-

1. Log in to your Mailchimp account and navigate to your subscriber list.
2. Note the URL of the list. It should start with something like us20. This signifies the location of your list in Mailchimp’s systems.
3. Navigate to your account page and enable the Mailchimp API if you haven’t already. Note your API Key.
4. Using an API tool like Insomnia or Postman, send a GET request to https://us20.api.mailchimp.com/3.0/lists/ using your API key as a Bearer Token.

The Insomnia request will look like this:

The Insomnia response will look like this:

{
	"lists": [
		{
			"id": "e44re74006",
			"web_id": 765345,
			"name": "Our Newsletter",
			"contact": { .... BLAH BLAH BLAH 

You guessed it: the string after the “id” key is what we want.

7b. Subscriber hash

When Mailchimp refers to your subscribers in its internal code, it uses an MD5 Hash of the person’s email address. This is just a way of encoding the address from plain text.

Using the awesome Dev Utils app, I can see that the MD5 encoded version of my email phil@notmyemail.com is going to be E5E0A890D81C5F396CBFDB7197C48E97.

So how do we make this encoding happen in Pipedream?

One of the many beauties of Pipedream is the ability to quickly and seamlessly jump into Node.js, and do all types of data processing and transforms. In this case, we’re going to add a quick step in the workflow above the Mailchimp step, for the purpose of generating the MD5 hash.

Like earlier, click the (+) sign below the trigger event, and above the Mailchimp step. This time select Run Node.js code.

Since Pipedream allows us to require any NPM package, we can leverage the MD5 package to generate our Mailchimp subscriber hash in just a few lines. You can paste the code below directly into the code editor in Pipedream.

const md5 = require('md5');

const mystring = steps.trigger.event.body["your-email"];
const lcstring = mystring.toLowerCase();

const hash = md5(lcstring);

console.log(hash); 

return(hash);

Now, you can re-run the previous event and verify that the hash is being generated. Note how I toggled the Mailchimp step off at the bottom right first. Then I hovered over the test event in the panel on the top left to replay it.

Once the event replays, I’ll see that I have 2 past events now, the latest of which should have console-logged the hashed version of phil@notmyemail.com.

We can see that Pipedream’s output matches the hash value we were expecting when we did it locally with Dev Utils. Now every form submission will have an MD5 subscriber hash generated on the fly for submission to the Mailchimp API. We can also save this code snippet and reuse it when we make Mailchimp workflows for other sites.

7c. Email address

This one is a bit counterintuitive, since we just went through a lot of trouble to get the email address out of plain text. But it’s here where we will go ahead and provide the Mailchimp API with the non-hashed version of the email address.

In theory only one of 7b (the hash) and 7c (the plaintext email) should be required when adding a new contact. Mailchimp uses the MD5 to identify existing users, so you’d think we would only need 7c. I’m not sure if we have to send both because of an issue with the “add contact” API generally, or something with the Pipedream integration. Or maybe Mailchimp is just offloading some compute to its users. No biggie.

To pull the plaintext email from our event (ie from the form submission), all we have to do is reference the step in the workflow and its key-value location:

{{steps.trigger.event.body["your-email"]}}

7d. Statu_if_new

We’re just going to set this to the string subscribed. This is just telling Mailchimp that this is a new user and their status should be set to “subscribed” in my list.

7e. Marketing_permission_id

If you’ve landed here in a quest for the meaning behind this obscure field, you’re right that it may be there just to upset you. We found ourselves, for one reason or another, unable to use the Mailchimp API in this way unless we provide something in this field. Since marketing permission id is ostensibly related to GDPR, please be sure to check up on your compliance posture before forgoing further research on this topic entirely.

Here’s how it all comes together with each of the Mailchimp API’s required fields:

8. Celebrate. You’re a SaaS automation hero.

You did it! New subscribers will now be added to your Mailchimp list.

I usually like to add a formal “end” to the Workflow, displaying a status message to show that all the steps were completed. In a follow-up tutorial, I’ll also be running through sending email in our Pipedream workflows using Amazon SES. In this case we use the email to notify the site admin that a new signup occurred. Sweet!

If you’ve made it this far, you may be wondering why we/you don’t just go ahead and utilize a dedicated WordPress Mailchimp plugin for this. Seems like we’re doing a lot of work, right?

Mailchimp’s API may seem like a lot of steps to set up, but it will pay off in the long run. Here’s why:

• Every WordPress site we manage can now have an identical setup.
  • Use a basic form plugin like CF7 everywhere, then
  • just send out a webhook anytime you collect data.
  • This eliminates the need to document and manage multiple approaches to collecting data.
• Every WordPress site can have a limited number of plugins.
  • You won’t need an SMTP plugin and a Mailchimp plugin, for example.
  • Limiting plugins is better for WordPress performance and the long-term stability of your site.
• Every form submission, across many sites, can now be monitored in a single pane of glass.
  • This is huge for multi-site admins, since now all form submissions come to the same event bus.
  • The admin now has great flexibility to monitor, alter, and troubleshoot workflows.

Cheers!

---

If you liked this post, follow me on Twitter @philwonski so you know when I post similar content. You can see past posts by me here.

There’s also lots of great (and less esoteric) content being produced by our team on a regular basis — be sure to find us on LinkedIn, and sign up to our newsletter in the footer of this page.

Mailboxes cover photo by Jac Alexandru on Unsplash.