How to Connect Contact Form 7 to Make

For a while I’ve been using all kinds of fancy form plugins for my WordPress websites.

But most of them are utter overkill, cost a lot for what it is, and slow down your website.

So I decided to try Contact Form 7 to create opt-in forms, contact forms, feedback forms, and more 🙂

• Why do it?
• Create the scenario
• Forward form submissions to webhook
• Over to you

Why do it?

By default, you just get an email like this when Contact Form 7 is submitted;

Which is fine if you use the form as a contact form only.

But I also use Contact Form 7 for my opt-in forms so people can join my email list 📩

(I don’t need to get an email every time that happens)

People fill out the opt-in form, and I want to automatically add them to a list & send a welcome email.

But there’s a bunch of other things you could use this for too;

• Automatically forward emails to your helpdesk software.
• Create a waiting list for a new product or service.
• Simple giveaways.

And whatever else you want.

In the next steps, you’ll learn how we get the form submissions to Make 🙂

Create the scenario

To be able to receive the form submissions, we’re going to use webhooks.

A webhook is a bit like a URL that tools use to send data to one another.

So in this case, Contact Form 7 is going to send data to the Make webhook, which will then start our scenario.

Create a new scenario, and search for the Webhooks module:

Click it, and select Custom webhook 🙂

As you can see by the purple INSTANT label, this is an instant trigger ⚡

Which means the scenario will start immediately after receiving data to the webhook.

Now, click Create a webhook, give the webhook a clear name, and click Save.

(leave the IP restrictions empty)

Make will now generate a new webhook URL that you can use to send the form submissions to 💪

Copy this URL, and proceed to the next step 🤓

Leave the scenario open, as it’s currently waiting for you to send data to the webhook so that Make knows how to structure that data.

How to forward form submissions to webhook

To send all Contact Form 7 submissions to Make, we have to send all form data to a webhook every time one is submitted.

The script

To do that, we’re going to need the script below.

// Hook into the Contact Form 7 submission process
add_action('wpcf7_mail_sent', 'send_form_data_to_webhook');

function send_form_data_to_webhook($contact_form) {
    // Get the form instance
    $submission = WPCF7_Submission::get_instance();

    if ($submission) {
        // Get form data
        $posted_data = $submission->get_posted_data();

        // Prepare data for the webhook
        $webhook_data = array(
            'form_name' => $contact_form->title(),
            'form_data' => $posted_data
        );

        // Webhook URL
        $webhook_url = 'https://hook.eu1.make.com/xxxxxxxxxxxxxxxxxxx';

        // Send data to the webhook
        $response = wp_safe_remote_post($webhook_url, array(
            'body' => json_encode($webhook_data),
            'headers' => array('Content-Type' => 'application/json')
        ));

        // Handle the response if needed
        // $response_code = wp_remote_retrieve_response_code($response);
        // $response_body = wp_remote_retrieve_body($response);
    }
}

Adding this to your website is pretty simple.

To add the code, you can use a free plugin like Code Snippets.

It’s also possible to add it directly to the functions.php file, but I personally prefer the Code Snippets plugin since you keep a better overview and it’s less likely you break your website.

To add the code, click Add New to create a new snippet.

Now, copy the script above, paste it in the PHP field, and change the webhook to your own:

Click Save Changes and Activate at the bottom.

And that’s it!

Now go to a form on your website, and submit it.

If everything went right, the form submission was now sent to the webhook in Make.

In the webhook module, you can now see that the data was successfully received.

Click OK, and save the scenario by clicking the floppy icon in the bottom of the screen.

Test again to see data

Now, let’s test it one more time so you can also see the actual data.

To do that, click Run once at the bottom left;

The webhook module will now have a spinning icon, telling you it’s waiting for data.

So go ahead, and submit the form you’re using again.

You’ll now see a white bubble appearing next to the trigger, the webhook module in this case, which you can click to see what kind of data it got;

Using the data in other modules

To use the form submission data inside other modules, you can use the variables that will show up whenever you select a field in another module;

Handy, right? 😄

And with those variables, you can now automate whatever you like whenever a form is submitted 🔥

Over to you

Are you going to use this to connect Contact Form 7 to Make.com? 🙂

Or do you still have any questions about it?

Whatever it is, let me know in the comments below 🤗