Home / Integrations / Wordpress / Contact form 7 to Zapier Webhook (JSON POST)
CF7FormSubmissiontoZapierJSONWebhook

Contact form 7 to Zapier Webhook (JSON POST)

In this tutorial we will go through how to create a JSON POST request to a webhook endpoint using php CURL, in this particular case we will use a Zapier Webhook endpoint but you can use any other webhook endpoint (CRM, business systems, etc).

Zapier has made it easier for non-coders to create seamless solutions to business problems, but there are always times when a little bit of code is required to join together a few systems. Contact form 7 is one of the most popular contact forms available for use on WordPress yet it has always required extra plugins to extend it’s basic functionally.

Implementation time: 30 minutes 

Prerequisites

CF7 to Zapier Webhook implementation

Create a new Webhook Zap Trigger

  1. Open up Zapier and create a new Zap
  2. Search for the trigger Webhook
  3. For the type of webhook select Catch Hook
  4. Make a copy of the webhook URL and keep it private

 

CF7 to Zapier Webhook

Update your WordPress Functions.php File

This is the part where all the real magic happens. After someone submits a CF7 form, the below segment of PHP code will kick in to trigger a CURL POST to your Webhook endpoint.

  1. Open up your WordPress Functions.php file using your favorite FTP client, or through the WordPress admin interface
  2. Replace the values in the script below with your own values set in CF7.
    1. (Example: [your-name] might be just [name] and should be updated)
  3. Paste the code at the end of your Functions.php file and hit save.

Testing the webhook

To test that the webhook is working, submit a form just like a visitor to your website would. Open up Zapier and hit ‘Continue’ to take you to the next step. If everything is working how it should, the values you set should appear. (yours will look different depending on the field values you are passing)

CF7 to Zapier Webhook

What to do with the POST data?

Zapier is flexible to the point that you can do whatever you want after the data has been captured. In our particular case, the data is sent to a CRM but you could use it to trigger a number of different actions depending what how you want to post-process the form data you’ve just received.

Please leave a comment below if you have tried to implement this but cannot get it to work or if you have any other improvements to the code which could benefit others!

  • Was this Helpful ?
  • yes   no

About The Moo Master

10 comments

  1. Hi thanks for the tutorial.

    I can implement the above no problem but when creating a trigger to collect the post data from a form will I have to write my own functions or code to collect the form data or will it appear as nice pre-populated dropdowns in zapier like when connecting a facebook lead form or other similar thing?

    Thanks for your help

    • Hi Nigel,

      Sorry for the late reply – If you are using the Zapier webhook, it will appear as a nice drop down list to use.

      After creating the PHP function, you would test it out by submitting a form on CF7. Then switching over to Zapier, you should be able to “test your webhook” which will pull the values from the form. Provided you don’t rename the variables, they will always be the same moving forward and stay static. Like the lead form, you can drop down and select the variables to be used in other Zaps.

      Please comment with a screenshot if this is not the case.

  2. Hello. Thanks for this nice post.

    After I submit my form, I got an 500 Error.
    I check all the syntax and everything looks good. I do what you say.

    Did this happen to you some time ?

  3. Hi Moo Master – thanks for a great tutorial.

    I’ve managed to create the zap and connect to CF7. Submitting the form on the website results in a new job being created in Servicem8.

    The problem I have is that although the process is working, CF7 isn;t returning a success message to the submitter of the form. Clicking the ‘Submit’ button results in the form looking like it is constantly loading – no success message returned. However the form does actually process the job successfully. It just doesn’t look that way to the person submitting the form.

    Any advice appreciated!

    • Hi Daniel,

      I’ve seen this sort of behavior before. Generally it’s when a function hasn’t fully completed and there has been some sort of internal error.
      My suggestion would be to strip down the code to it’s bare basics (i.e, remove the curl component, remove the json encode component, etc) and test while adding little bits back at a time.

      Alternatively, send myself a pastebin of the code you’re using. I’ll have a look through and see if I can spot the problem.

      Best,
      Moomaster

      • Hi MooMaster,

        Thanks so much for your reply. If you had a moment to have a look at the code that would be amazing:

        // Create the new wordpress action hook before sending the email from CF7
        add_action( ‘wpcf7_before_send_mail’, ‘my_conversion’ );
        function my_conversion( $contact_form ) {
        $submission = WPCF7_Submission::get_instance();

        // Get the post data and other post meta values
        if ( $submission ) {
        $posted_data = $submission->get_posted_data();
        $remote_ip = $submission->get_meta( ‘remote_ip’ );
        $url = $submission->get_meta( ‘url’ );
        $timestamp = gmdate(“Y-m-d H:i:s”, $submission->get_meta( ‘timestamp’ ));
        $title = wpcf7_special_mail_tag( ”, ‘_post_title’, ” );

        // If you have checkboxes or other multi-select fields, make sure you convert the values to a string
        $mycheckbox1 = implode(“, “, $posted_data[“checkbox-465”]);
        $mycheckbox2 = implode(“, “, $posted_data[“checkbox-466”]);

        // Exclude any email addresses (eg: email addresses you use to test forms)
        if ( !in_array($posted_data[“your-email”], array(‘[email protected]’,’[email protected]’,’[email protected]’), true ) ) {

        // Split the first and last names
        if ($posted_data[“your-name”]){
        $name = trim($posted_data[“your-name”]);
        $last_name = (strpos($name, ‘ ‘) === false) ? ” : preg_replace(‘#.*\s([\w-]*)$#’, ‘$1’, $name);
        $first_name = trim( preg_replace(‘#’.$last_name.’#’, ”, $name ) );

        // Set default value for last name if none is provided
        if ($last_name == NULL ){
        $last_name = “Not Provided”;
        }
        }

        // Encode the data in a new array in JSON format
        $data = json_encode(array(
        “email” => “{$posted_data[“your-email”]}”,
        “first-name” => “$first_name”,
        “last-name” => “$last_name”,
        “full-name” => “{$posted_data[“your-name”]}”,
        “phone” => “{$posted_data[“phone”]}”,
        “checkbox1” => “$mycheckbox1”,
        “checkbox2” => “$mycheckbox2”,
        “id” => “{$posted_data[“submit_time”]}”,
        “Submitted” => “$timestamp”,
        “From URL” => “$url”,
        “From Referer” => “{$posted_data[“referer-page”]}”,
        “From IP” => “$remote_ip”,
        “Page Title” => “$title”
        ));

        // Finally send the data to Zapier or your other webhook endpoint
        $ch = curl_init(“https://hooks.zapier.com/hooks/catch/2288866/5o59kg/”); // replace with your Zapier webook
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, “POST”);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
        curl_setopt( $ch, CURLOPT_HTTPHEADER, array(‘Content-Type:application/json’));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT ,5); //Optional timeout value
        curl_setopt($ch, CURLOPT_TIMEOUT, 5); //Optional timeout value
        $result = curl_exec($ch);
        curl_close($ch);

        return $result;
        }
        }
        }

        Thanks so much for your time.

        • Hi Moomaster

          Thanks so much for taking the time to reply. Would it be possible to send me an email so I can contact you offline? I’d like to pay you to help me fix this on my site.

          Thanks,
          Daniel.

  4. Awesome!

    This worked for me. Amazing tutorial 10/10

Leave a Reply

Your email address will not be published. Required fields are marked *