Addon Webhooks

Souhaitez-vous envoyer des données de vos formulaires WordPress à une application ou un plugin tiers ? Avec le module complémentaire Webhooks de WPForms, vous pouvez connecter vos formulaires à un service secondaire.

Ce tutoriel vous montrera comment installer et utiliser le module complémentaire Webhooks avec WPForms.

---

Que sont les Webhooks ?

Un webhook vous permet d'envoyer automatiquement des informations de votre formulaire à un autre service ou outil en dehors de votre site WordPress. Ceci est particulièrement utile si vous avez besoin d'une intégration, mais qu'il n'existe pas encore de module complémentaire pour cela.

La manière la plus simple pour les débutants de configurer un webhook est via notre module complémentaire Zapier. Zapier est idéal pour tous les niveaux d'utilisateurs car il utilise une configuration de type assistant, qui vous guide à travers chaque étape nécessaire pour connecter vos formulaires à un service distinct.

Une autre option est notre intégration Uncanny Automator. Cette fonctionnalité vous permet de créer des connexions entre les applications et services pris en charge.

Pour les utilisateurs plus avancés, le module complémentaire Webhooks offre des fonctionnalités similaires sans aucun service de connexion. Cependant, en contrepartie, le processus de configuration est plus technique.

Installation du module complémentaire Webhooks

Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress.

Une fois WPForms installé et votre licence vérifiée, vous pourrez rapidement installer et activer le module complémentaire Webhooks.

Configuration d'un Webhook

Une fois le processus d'installation terminé, vous êtes prêt à configurer votre webhook. Pour commencer, vous devrez créer un nouveau formulaire ou modifier un formulaire existant.

Après avoir ouvert le constructeur de formulaires, vous pouvez activer les webhooks sous Paramètres » Webhooks. À partir de là, activez l'option Activer les Webhooks.

Cela ouvrira plus de paramètres que vous pourrez configurer, y compris la dénomination de votre webhook.

Par défaut, les nouveaux webhooks n'auront pas de nom. Si vous souhaitez modifier ou ajouter un nom à votre webhook, cliquez sur l'icône en forme de crayon.

De plus, si vous souhaitez ajouter d'autres webhooks, vous pouvez cliquer sur le bouton intitulé Ajouter un nouveau Webhook et remplir les paramètres pour chaque connexion supplémentaire.

Sous le nom de votre webhook, vous verrez tous les paramètres disponibles pour cette connexion. Nous avons décrit ce que fait chacun d'eux ci-dessous.

URL de requête

L'URL de requête sera utilisée pour connecter WPForms à une application secondaire. Vous pouvez généralement obtenir cette URL à partir de l'API du service ou de l'outil après avoir configuré une connexion de base.

Méthode de requête

La méthode de requête vous permet de sélectionner la méthode HTTP que vous souhaitez utiliser lorsque votre requête webhook s'exécute.

Il existe plusieurs méthodes différentes au choix, en fonction du type de connexion que vous souhaitez créer :

• GET : La méthode GET récupère les informations d’un formulaire soumis et envoie les détails à une application connectée.
• POST : La méthode POST prend les informations soumises via WPForms et les envoie à un service secondaire.
• PUT : La méthode PUT vous permet de mettre à jour des données lorsque votre webhook s’exécute.
• PATCH : La méthode PATCH vous permet de remplacer des données lorsque votre webhook s’exécute.
• DELETE : La méthode DELETE vous permet de supprimer des informations lorsque ce webhook spécifique s’exécute.

Format de la requête

Le format de la requête communique à votre serveur le type de données envoyées via votre webhook. Cela définit également la valeur de l’en-tête Content-Type pour vos données.

Il existe deux types de formats de requête disponibles :

• JSON : La méthode JSON formate vos données au format application/json et définit le type de contenu comme charset=utf-8.
• FORM : La méthode FORM formate vos données au format application/x-www-form-urlencoded et définit le type de contenu comme charset=utf-8.

Secret

La clé secrète générera un hachage (ou un identifiant unique) pour chaque requête terminée. Cela agit comme une signature pour vérifier l’origine de votre requête HTTP, et sera toujours fourni dans l’en-tête de la requête.

En-têtes de requête

Les en-têtes de requête vous permettent de définir la ou les clés et la ou les valeurs de l’en-tête HTTP à envoyer avec votre requête webhook.

Corps de la requête

Similaire aux en-têtes de requête, le paramètre Corps de la requête vous permet de définir la ou les clés et la ou les valeurs qui seront envoyées dans le corps de la requête de votre webhook.

Exemple : Utilisation des Webhooks pour connecter WPForms à Slack

À titre d’exemple, nous vous montrerons comment connecter WPForms à votre compte Slack à l’aide d’un webhook.

Créer votre application Slack

Tout d'abord, vous devrez accéder à la page API de Slack. Cliquez ensuite sur le bouton Créer une application.

Cela ouvrira une fenêtre où vous devrez sélectionner la manière dont vous souhaitez configurer votre application. Choisissez l'option À partir de zéro.

Vous pourrez ensuite nommer votre application et sélectionner l'espace de travail auquel vous souhaitez envoyer les données du formulaire. Pour notre exemple, nous nommerons notre application Contact Sullie. Cliquez sur le bouton Créer une application pour continuer.

Cela vous mènera à une page contenant des informations de base sur votre application. Faites défiler jusqu'aux paramètres Ajouter des fonctionnalités et des fonctionnalités et activez l'option Webhooks entrants.

Une fois que vous avez activé le paramètre Webhooks entrants, basculez l'option Activer les webhooks entrants sur Activé. Cela ouvrira plus de détails plus bas sur la page.

Sous la section URL des webhooks pour votre espace de travail, cliquez sur le bouton Ajouter un nouveau webhook à l'espace de travail.

Cela vous redirigera vers une autre fenêtre où vous devrez sélectionner un canal Slack pour envoyer vos messages. Choisissez un canal dans le menu déroulant et cliquez sur Autoriser.

Cela vous ramènera à la page précédente. Vous verrez une nouvelle URL dans la section URL des webhooks pour votre espace de travail. Copiez cette URL, car vous l'utiliserez à l'étape suivante.

Assurez-vous de laisser cet onglet ou cette fenêtre de navigateur ouverts, car vous aurez besoin des informations de cette zone plus tard.

Ajouter votre webhook Slack à un formulaire

Ensuite, vous devrez ouvrir le formulaire dans lequel vous utiliserez votre webhook. Si ce n'est pas déjà fait, assurez-vous de configurer votre module complémentaire Webhooks dans WPForms.

Une fois que vous avez activé les webhooks pour votre formulaire, collez l'URL que vous avez copiée de Slack dans le champ URL de la requête pour connecter votre formulaire à l'API de Slack.

Configurez ensuite le reste des paramètres du webhook. Nous avons présenté tous nos paramètres configurés pour cet exemple ci-dessous :

• Méthode de requête : Comme nous allons envoyer des données de nos formulaires à Slack, nous réglerons la méthode de requête sur l'option POST.
• Format de requête : Nous réglerons le format de requête sur le JSON standard.
• Secret : Pour notre exemple, nous laisserons le champ Secret vide et le laisserons se générer automatiquement lorsque notre webhook s'exécutera. Si vous êtes un développeur et que vous souhaitez saisir votre propre valeur secrète, vous pouvez le faire ici.
• En-têtes de requête : Nous n'avons aucune valeur spécifique à envoyer avec notre requête, nous laisserons donc le paramètre En-têtes de requête vide. Lorsque le webhook s'exécutera, le Secret généré automatiquement sera placé ici.
• Corps de la requête :
  • Clé : Entrez texte dans le champ de clé du paramètre Corps de la requête, car le formulaire enverra les informations en texte brut. Omettre d'entrer texte comme valeur pour ce champ provoquera probablement une erreur dans votre connexion.
  • Champ de sélection : Le paramètre Champ de sélection sera le nom du champ dont vous souhaitez envoyer les données. Pour notre exemple, nous enverrons les données du champ Commentaire ou Message à Slack.

N'oubliez pas de sauvegarder vos modifications avant de quitter le constructeur de formulaires. Nous vous recommandons également de tester votre formulaire pour vous assurer que votre webhook fonctionne correctement une fois que vous l'avez configuré.

Ajout de la logique conditionnelle (facultatif)

La logique conditionnelle vous permet de choisir si une action est effectuée ou non en fonction des choix d'un utilisateur dans votre formulaire.

À titre d'exemple, nous vous montrerons comment utiliser la logique conditionnelle pour envoyer un message à Slack si un utilisateur soumet une entrée à notre formulaire de contact avec un message contenant le mot « Aide ».

Pour configurer cela, vous devrez vous assurer que votre formulaire contient un champ Texte sur une seule ligne ou Texte de paragraphe. Pour notre exemple, nous ajouterons un champ Texte de paragraphe.

Ensuite, vous devrez ajuster l'étiquette du champ de saisie du message. Pour notre exemple, nous ajouterons l'étiquette Commentaire ou Message.

Ensuite, vous devrez configurer votre logique conditionnelle. En bas des paramètres de votre webhook Slack, activez l'option intitulée Activer la logique conditionnelle pour révéler les listes déroulantes permettant de créer votre règle.

Ajoutez ensuite la règle pour votre logique conditionnelle. Pour notre exemple, nous réglerons les listes déroulantes pour lire, Envoyer ce webhook si Commentaire ou Message contient aide.

Comme toujours, n'oubliez pas de sauvegarder votre formulaire avant de quitter le constructeur.

Questions fréquemment posées

Voici quelques-unes des questions les plus fréquentes concernant le module complémentaire Webhooks.

Comment puis-je utiliser les balises intelligentes dans l'en-tête de requête et le corps de la requête ?

Les balises intelligentes peuvent être utilisées pour insérer dynamiquement des informations dans l'en-tête de requête et le corps de la requête de votre formulaire.

Pour utiliser les balises intelligentes, sélectionnez Ajouter une valeur personnalisée dans la liste déroulante En-têtes de requête des paramètres de votre webhook, puis ajoutez la balise intelligente comme clé de paramètre. Vous pouvez répéter la même étape pour le paramètre Corps de la requête.

Pour une liste complète des balises intelligentes utilisables, assurez-vous de consulter toutes les balises intelligentes disponibles dans WPForms.

C'est tout ! Vous savez maintenant comment configurer le module complémentaire Webhooks pour WPForms.

Ensuite, cherchez-vous un moyen de transférer facilement vos WPForms d'un site à un autre ? Consultez notre tutoriel sur la façon d'importer et exporter vos formulaires.