Quel long titre me direz-vous !
Dans certaine situation, on a besoin de partager les données recueillies via les formulaires avec d’autres personnes. On se place dans le contexte technique suivant : le site tourne avec le CMS WordPress, on y utilise le plugin Contact Form 7 pour gérer tous les formulaires et nous avons un compte Google Drive, comme beaucoup de monde.
Plutôt que de s’embêter à développer une petite interface web afin de donner accès aux données recueillies (ce qui ferait encore une application de + à maintenir…), on va utiliser les formidables capacités de IFTTT combiné à l’extrême simplicité d’usage de Google Sheet (de partage, de droits d’administration et d’utilisation du tableur) pour remplir ce besoin de partage de données.
Et bien allons-y
Si ce n’est pas déjà fait, commencez donc par créer un compte chez IFTTT. Il s’agit d’une plateforme qui permet de connecter entre-eux des tonnes de services via leurs API, puis vous pouvez créer ce qu’ils appellent des recettes, qui sont toujours constituée d’un déclencheur (trigger) et d’une action à effectuer.
La recette IFTTT
On a besoin que l’appel à un webhook déclenche un enregistrement d’une ligne dans Google Sheet.
Faites donc Create, cliquez sur [+], cherchez webhook. Dans l’écran qui suit, cliquez sur le bloc receveid a web request dans lequel nous allons renseigner le nom de notre événement déclencheur, que l’on nomme comme l’on veut, mais au format dev (pas d’espace mais des underscores, et pas de guillemet, hein). Par exemple, « contact_form ».
Ensuite on enchaîne sur l’action (le then that) : on cherche Google Sheets, on clique, on connecte le service en saisissant login/mot de passe associé à notre compte Google, on choisit dans quel dossier sera enregistré la fameuse ligne lorsque le formulaire sera rempli. Choisissez le même nom que le nom de l’événement pour bien vous organiser. On enregistre le tout, et c’est terminé pour la partie IFTTT. Passons au webhook.
Le webhook
Un webhook, c’est ce qu’on veut. Et c’est là que tout devient possible. C’est du code personnalisé qui va servir en général a récupérer une donnée pour la transmettre à IFTTT qui se chargera de la suite avec l’action de la recette.
Nous allons utiliser Ajax pour envoyer les données de notre formulaire vers IFTTT. Pour ça on a besoin de connaître l’url de l’API qui est associé à notre compte, et ce n’est pas spécialement facile à trouver. Allez ici : https://ifttt.com/maker_webhooks puis cliquez sur Documentation pour découvrir votre clé API.
Sur cette page se trouve aussi l’url que l’on va mettre dans le code de notre webhook. C’est elle qui enverra les données à IFTTT, sur votre compte puisque cette url vous ait personnelle grâce à la clé API, unique pour chaque utilisateur de leur service.
https://maker.ifttt.com/trigger/ ».$ifttt_event. »/with/key/XxxXXxxXXXxxXXxXxXxxXXx?value1= ».urlencode($value1);
Pour rappel, nous souhaitons capter les données d’un formulaire WordPress. La première étape est donc de capter les informations saisies et de les transmettre avec un appel ajax.
Voici un code générique qui fonctionnera chez tout le monde. Collez-ça dans le fichier Javascript de votre site si vous en avez un, ou ajouter un bloc HTML en fin de l’article ou de la page ou apparait votre formulaire et glissez-y ce code. Ce qu’il faut modifier c’est l’url du fichier php auquel vous faite appel, dans l’exemple, il s’appelle « ifttt.php » et est rangé dans un dossier /app/ qui se trouve dans le dossier /www/ sur le serveur (racine de votre site en général).
Ce code envoi toutes les données du formulaire lors de la soumission d’un formulaire 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 );Le fichier ifttt.php sera
<?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>Voilà, tout est en place, testez votre formulaire et allez regarder ce qui se passe du côté de Google Sheet !