Souhaitez-vous envoyer les données de vos formulaires WordPress à une application tierce ou à un plugin ? Avec l'addon WPForms Webhooks, vous pouvez connecter vos formulaires à un service secondaire.
Ce tutoriel vous montrera comment installer et utiliser l'addon Webhooks avec WPForms.
Exigences :
- Vous aurez besoin d'un niveau de licence Elite pour accéder à l'addon Webhooks.
- Assurez-vous que vous avez installé la dernière version de WPForms afin de respecter la version minimale requise pour l'addon Webhooks.
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. C'est particulièrement utile si vous avez besoin d'une intégration, mais qu'il n'y a pas encore d'addon disponible pour cela.
La façon la plus conviviale de configurer un webhook est de passer par notre addon 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 l'intégration d'Uncanny Automator. Cette fonctionnalité vous permet d'établir des connexions entre les applications et les services pris en charge.
Pour les utilisateurs plus avancés, le module complémentaire Webhooks offre des possibilités similaires sans aucun service de connexion. Cependant, en contrepartie, le processus d'installation est plus technique.
Installation de l'addon 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 l'addon Webhooks.
Mise en place d'un Webhook
Une fois le processus d'installation terminé, vous êtes prêt à configurer votre webhook. Pour commencer, vous devez créer un nouveau formulaire ou modifier un formulaire existant.
Après avoir ouvert le générateur de formulaires, vous pouvez activer les webhooks sous Paramètres " Webhooks. À partir de là, activez l'option Enable Webhooks (Activer les webhooks).
Cela ouvrira d'autres paramètres que vous pourrez configurer, y compris l'attribution d'un nom à votre webhook.
Par défaut, les nouveaux webhooks n'ont pas de nom. Si vous souhaitez modifier ou ajouter un nom à votre webhook, cliquez sur l'icône en forme de crayon.
En outre, si vous souhaitez ajouter d'autres webhooks, vous pouvez cliquer sur le bouton intitulé Add New 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 décrivons ci-dessous la fonction de chacun d'entre eux.
URL de la demande
L'URL de la 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 établi une connexion de base.
Méthode de demande
La méthode de requête vous permet de sélectionner la méthode HTTP que vous souhaitez utiliser lors de l'exécution de la requête de votre webhook.
Il existe plusieurs méthodes différentes, en fonction du type de connexion que vous souhaitez créer :
- GET: La méthode GET permet d'obtenir des informations à partir d'un formulaire soumis et d'envoyer les détails à une application connectée.
- POST: La méthode POST prend les informations soumises par WPForms et les envoie à un service secondaire.
- PUT: La méthode PUT vous permet de mettre à jour les données lors de l'exécution de votre webhook.
- PATCH: La méthode PATCH vous permet de remplacer des données lors de l'exécution de votre webhook.
- DELETE: La méthode DELETE vous permet de supprimer des informations lors de l'exécution de ce webhook spécifique.
Format de la demande
Le format de la demande indique à votre serveur le type de données envoyées par votre webhook. Il définit également la valeur de l'en-tête Content-Type pour vos données.
Il existe deux types de formats de demande différents :
- JSON: La méthode JSON formatera vos données dans un format
application/jsonet définira le type de contenu comme suitcharset=utf-8. - FORMULAIRE: La méthode FORM formera vos données dans un format
application/x-www-form-urlencodedet définira le type de contenu commecharset=utf-8.
Remarque : les données sont généralement envoyées au format JSON, ce qui facilite les modifications côté serveur (y compris les modifications de validation, de formatage et d'assainissement).
Secret
La clé secrète génère un hachage (ou identifiant unique) pour chaque requête terminée. Elle sert de signature pour vérifier l'origine de votre requête HTTP et sera toujours fournie dans l'en-tête de la requête.
Remarque : dans la plupart des cas, si vous intégrez vos formulaires à un service tiers, vous n'avez pas besoin de renseigner le paramètre Secret. Le paramètre Secret est destiné aux développeurs qui intègrent leurs propres API afin de vérifier l'origine d'une demande.
En-têtes de la demande
Les en-têtes de requête vous permettent de définir les clés et les valeurs de l'en-tête HTTP à envoyer avec votre requête de webhook.
Note : Ce paramètre est particulièrement utile si vous essayez de passer une clé API dans votre en-tête HTTP pour les requêtes authentifiées. Vous pouvez remplir votre propre clé API en utilisant le champ caché de WPForms.
Corps de la demande
Comme pour les en-têtes de requête, le paramètre Corps de la requête vous permet de définir les clés et les valeurs qui seront envoyées dans le corps de la requête de votre webhook.
Note : Pour séparer des valeurs multiples dans des champs comme Adresse, Dropdown, Checkboxes, etc., WPForms utilise deux barres verticales (comme : ||).
Exemple : Utiliser les Webhooks pour connecter WPForms à Slack
Remarque: pour une intégration Slack plus conviviale, nous vous recommandons d'utiliser notre addon Slack dédié, qui offre une configuration plus facile et davantage de fonctionnalités. Veuillez vous référer à notre guide de l'addon Slack pour plus de détails.
A titre d'exemple, nous allons vous expliquer comment connecter WPForms à votre compte Slack en utilisant un webhook.
Remarque : cet exemple explique comment envoyer un seul champ de formulaire à Slack. Si vous souhaitez envoyer plusieurs champs à Slack, n'hésitez pas à consulter notre documentation destinée aux développeurs pour plus de détails.
Créer votre application Slack
Tout d'abord, vous devez vous rendre sur la page API de Slack. Cliquez ensuite sur le bouton Créer une application.
Une fenêtre s'ouvre alors, dans laquelle vous devez sélectionner la manière dont vous souhaitez configurer votre application. Choisissez l'option A partir de zéro.
Vous pourrez alors nommer votre application et sélectionner l'espace de travail auquel vous souhaitez envoyer les données du formulaire. Dans notre exemple, nous appellerons notre application Contact Sullie. Cliquez sur le bouton Créer une application pour continuer.
Vous accéderez à une page contenant des informations de base sur votre application. Faites défiler vers le bas jusqu'aux paramètres Ajouter des caractéristiques et des fonctionnalités et activez l'option Crochets Web entrants.
Une fois que vous avez activé les crochets Web entrants, activez l'option Activate Incoming Webhooks ( Activer les crochets Web entrants ). Vous obtiendrez ainsi plus de détails en bas de la page.
Sous la section Webhooks URLs for Your Workspace, cliquez sur le bouton Add New Webhook to Workspace (Ajouter un nouveau Webhook à l'espace de travail ).
Vous serez alors redirigé vers une autre fenêtre où vous devrez sélectionner un canal Slack pour y 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 Webhook URLs for Your Workspace. Copiez cette URL, car vous l'utiliserez à l'étape suivante.
Veillez à garder cet onglet ou cette fenêtre du navigateur ouvert(e), car vous aurez besoin des informations contenues dans cette zone ultérieurement.
Ajouter votre Webhook Slack à un formulaire
Ensuite, vous devez ouvrir le formulaire dans lequel vous allez utiliser votre webhook. Si vous ne l'avez pas encore fait, assurez-vous de configurer votre addon Webhooks dans WPForms.
Une fois que vous avez activé les webhooks pour votre formulaire, collez l'URL que vous avez copiée depuis Slack dans le champ Request URL pour connecter votre formulaire à l'API de Slack.
Ensuite, configurez le reste des paramètres du webhook. Nous avons présenté ci-dessous tous les paramètres configurés pour cet exemple :
- Méthode de requête : Puisque nous allons chercher à envoyer des données de nos formulaires à Slack, nous allons définir la méthode de requête sur l'option POST.
- Format de la demande : Nous allons définir le format de la demande sur JSON standard.
- Secret : Pour notre exemple, nous laisserons le champ Secret vide et le laisserons se générer automatiquement lors de l'exécution de notre webhook. 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 la demande : Nous n'avons pas de valeurs spécifiques à envoyer avec notre requête, nous laisserons donc le paramètre Request Headers vide. Lorsque le webhook sera exécuté, le Secret généré automatiquement sera placé ici.
- Corps de la demande :
- Clé : Saisissez du texte dans le champ clé du paramètre Request Body, car le formulaire enverra des informations en texte brut. Si vous ne saisissez pas de texte dans ce champ, vous risquez de provoquer une erreur dans votre connexion.
- Sélectionner le champ : Le paramètre Select Field (Champ sélectionné) indique le nom du champ dont vous souhaitez envoyer les données. Dans notre exemple, nous enverrons les données du champ Commentaire ou Message à Slack.
N'oubliez pas d'enregistrer vos modifications avant de quitter le générateur 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 doit être effectuée ou non en fonction des choix de l'utilisateur dans votre formulaire.
En guise d'exemple, nous allons vous montrer comment utiliser une logique conditionnelle pour envoyer un message à Slack si un utilisateur soumet une entrée dans notre formulaire de contact avec un message contenant le mot "Aide".
Pour ce faire, vous devez vous assurer que votre formulaire dispose d'un champ Texte à une ligne ou Texte à un paragraphe. Dans notre exemple, nous ajouterons un champ de type texte à paragraphe.
Vous devez ensuite adapter le libellé du champ de saisie du message. Pour notre exemple, nous ajouterons le libellé Commentaire ou Message.
Ensuite, vous devez configurer votre logique conditionnelle. En bas des paramètres de votre webhook Slack, activez l'option intitulée Enable Conditional Logic (Activer la logique conditionnelle ) pour faire apparaître les menus déroulants permettant de créer votre règle.
Ajoutez ensuite la règle pour votre logique conditionnelle. Pour notre exemple, nous allons définir les menus déroulants comme suit : Send this webhook if Comment or Message contains help ( Envoyer ce webhook si le commentaire ou le message contient de l'aide).
Note : Vous avez besoin d'aide pour mettre en place votre règle de logique conditionnelle ? Notre tutoriel pour débutants sur l'utilisation de la logique conditionnelle dans WPForms contient tous les détails.
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équemment posées concernant l'addon Webhooks.
Comment puis-je utiliser les Smart Tags dans l'en-tête et le corps de la requête ?
Les étiquettes intelligentes peuvent être utilisées pour insérer dynamiquement des informations dans l'en-tête et le corps de la requête de votre formulaire.
Pour utiliser les Smart Tags, sélectionnez Add Custom Value dans le menu déroulant Request Headers des paramètres de votre webhook, puis ajoutez le Smart Tag comme clé de paramètre. Vous pouvez répéter la même étape pour le paramètre Request Body.
Pour une liste complète des Smart Tags qui peuvent être utilisés, n'oubliez pas de consulter tous les Smart Tags disponibles dans WPForms.
Voilà, c'est fait ! Vous savez maintenant comment configurer l'addon Webhooks pour WPForms.
Ensuite, vous cherchez un moyen de transférer facilement vos WPForms d'un site à l'autre ? Consultez notre tutoriel sur l'importation et l'exportation de vos formulaires.