Export Contact Form 7 to Google Sheet via IFTTT

In some situations, there is a need to share the data collected through the forms with others. We put ourselves in the following technical context: the site runs with the WordPress CMS, we use the Contact Form 7 plugin to manage all the forms and we have a Google Drive account, like many people.

Rather than bothering to develop a small web interface to give access to the collected data (which would still be a + application to maintain…), we’re going to use the great capabilities of IFTTT combined with the extreme ease of use of Google Sheets (sharing, administration rights and spreadsheet usage) to fill this need for data sharing.

Let’s go

If you haven’t already done so, start by creating an account at IFTTT. This is a platform that allows you to connect tons of services to each other via their APIs, and then you can create what they call recipes, which always consist of a trigger and an action to perform.

IFTTT recipe

We need the call to a webhook to trigger a record of a line in Google Sheet.

So do Create, click [+], search for webhook. In the following screen, click on the block receveid a web request in which we’ll fill in the name of our triggering event, which we name as we want, but in dev format (no spaces but underscores, and no quotes, eh). For example, “contact_form”.

Then we follow the action (the then that): we search Google Sheets, we click, we connect the service by typing login/password associated with our Google account, we choose in which folder the famous line will be saved when the form will be filled. Choose the same name as the name of the event to organize yourself well. We save the whole thing, and that’s it for the IFTTT part. Let’s go to the webhook.

Webhook

A webhook is what we want. And it’s where everything becomes possible. It’s custom code that will be used to retrieve a data to transmit it to IFTTT which will take care of the rest with the action of the recipe.

We will use Ajax to send our form data to IFTTT. To do this we need to know the API url that is associated to our account, and it’s not especially easy to find it. Go here: https://ifttt.com/maker_webhooks then click on Documentation to discover your API key.

On this page is also the url that we will put in the code of our webhook. It will send the data to IFTTT, on your account since this url is personal to you thanks to the API key, unique for each user of their service.

https://maker.ifttt.com/trigger/”.$ifttt_event.”/with/key/XxxXXxxXXXxxXXxXxXxxXXx?value1=”.urlencode($value1);

As a reminder, we want to capture data from a WordPress form. The first step is therefore to capture the information entered and transmit it with an ajax call.

Here is a generic code that will work for everyone. Paste it into your site’s Javascript file if you have one, or add an HTML block at the end of the article or page where your form appears and drag this code into it. What you need to modify is the url of the php file you are using, in the example, it is called “ifttt.php” and is stored in a folder /app/ which is located in the /www/ folder on the server (root of your site in general).

This code sends all the form data when submitting a Contact Form 7.

document.addEventListener( 'wpcf7submit', function( event ) {
	var inputs = event.detail.inputs;		
	$.ajax({
		type: "POST",
		url: "/app/ifttt.php",
		data: "inputs=" + JSON.stringify(inputs),
		cache: false,
		success: function (result) {
			console.log(result);
		}
	});
}, false );

The ifttt.php file will be

<?php

$value1="";

//ajout des toutes les données dans la variable $value1

$inputs = json_decode($_POST['inputs']);

for ($i = 0; $i <= count($inputs); $i++) {
	$value1.= $inputs[$i]->value."|";	
}

 //Post vers IFTTT avec votre url, le nom de l'event, votre clé API

$url = "https://maker.ifttt.com/trigger/contact_form/with/key/XxxXXxxXXXxxXXxXxXxxXXx?value1=".urlencode($value1);
$options = array(
	'http' => array(
		'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
		'method'  => 'POST'
	)
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);</div>

That’s it, everything is in place, test your form and go check out what’s going on with Google Sheet!