Comment utiliser les webhooks avec les formulaires WordPress

Vous souhaitez intégrer vos formulaires WordPress avec différentes applications et services Web ?

Si vous avez besoin d'un moyen simple d'envoyer des données sur une application Web directement depuis votre formulaire WordPress, les webhooks sont la solution idéale. Avec un formulaire webhook, vous n'avez pas besoin de l'aide d'un connecteur tiers comme Zapier.

Dans cet article, nous vous montrerons comment utiliser les webhooks sur vos formulaires WordPress afin que vous puissiez facilement envoyer des données en temps réel à vos applications et services préférés.

Mais d'abord, si vous êtes débutant, nous verrons ce que sont les webhooks et pourquoi ils sont importants. Gardez à l'esprit que la méthode que nous allons utiliser aujourd'hui ne nécessite aucune compétence en codage.

Qu'est-ce qu'un Webhook ?

Les webhooks permettent à deux applications Web de communiquer entre elles. Ainsi, par exemple, si quelqu'un soumet un formulaire de commande sur votre site Web, vous pouvez envoyer ces données à votre canal Slack pour informer votre équipe produit qu'une commande a été passée. Vous pouvez également le faire lorsque vous obtenez un nouveau prospect ou un abonné.

En termes techniques, les webhooks sont des rappels HTTP définis par l'utilisateur qui sont déclenchés par un événement dans un système source et envoyés au système de destination.

Cela signifie que lorsqu'un événement ou un déclencheur se produit sur votre site Web, des messages automatisés sont envoyés à un service connecté. Un déclencheur peut être quelque chose comme des commentaires de blog, des enregistrements d'utilisateurs d'achat de produits et des soumissions de formulaires.

Si vous vous demandez pourquoi vous devriez utiliser des webhooks, voici quelques avantages :

• Transférer automatiquement des informations entre deux services/applications
• Automatisez les tâches et réduisez le temps d'administration
• Réduisez le coût d'utilisation des services de connecteurs tels que Zapier et Hubspot pour traiter les données dans les applications.

Les webhooks sont incroyablement utiles pour les développeurs et les utilisateurs de WordPress férus de technologie.

Sur ce, commençons notre guide étape par étape sur la création d'un formulaire webhook dans WordPress.

Créer un formulaire Webhook dans WordPress [Méthode facile]

Il existe de nombreuses façons d'utiliser les webhooks pour envoyer vos soumissions de formulaire WordPress à d'autres applications Web.

Nous utiliserons WPForms pour ce didacticiel car il propose un module complémentaire Webhooks facile à utiliser pour tout le monde, y compris les débutants. Il n'y a absolument aucun codage impliqué.

WPForms est le meilleur plugin de création de formulaires pour les sites WordPress. Et ce que vous devez savoir, c'est qu'il propose des tonnes de modèles prédéfinis et de champs de formulaire prêts à l'emploi qui vous permettent de créer tous les types de formulaires WordPress. Cela inclut la commande de produits, l'enregistrement, la prise de rendez-vous, des formulaires de contact simples, etc.

WPForms est livré avec un générateur de formulaires par glisser-déposer qui fait de la personnalisation des formulaires un jeu d'enfant. Il contient des tonnes d'addons et d'intégrations que vous pouvez utiliser pour vous connecter aux applications de messagerie, de paiement et de marketing.

Avec son module complémentaire Webhooks, vous pouvez facilement connecter votre WordPress à n'importe quel service ou application. Il suffit de quelques clics pour activer cette fonctionnalité.

De plus, WPForms vous permet d'utiliser des règles conditionnelles pour déclencher une action de webhook en fonction de la réponse du formulaire de l'utilisateur. Donc, seulement si la valeur d'un champ est remplie, le webhook s'exécutera. Cela vous donne plus de contrôle sur les données que vous souhaitez envoyer et sur quelle application.

Vous pouvez vous connecter à des tonnes d'applications et de services. Pour ce didacticiel, nous allons vous montrer comment vous connecter à Slack. Mais n'oubliez pas que vous pouvez également utiliser les mêmes étapes pour vous connecter à d'autres applications et points de terminaison.

Étape 1 : créer une nouvelle application Slack

En connectant votre formulaire de webhook à Slack, vous pouvez automatiquement envoyer des messages et des informations de votre site Web à vos canaux Slack. Vous pouvez mettre à jour les membres de votre équipe ou vos services lorsqu'une personne soumet un formulaire, abandonne un formulaire, etc.

Désormais, pour envoyer des données de WordPress à un autre service à l'aide de webhooks, vous devrez créer un pont entre les deux applications. Donc, pour vous connecter à Slack, vous devrez créer une application Slack (le pont).

Si vous débutez, ne vous inquiétez pas, c'est assez facile et nous vous guiderons étape par étape. Tout d'abord, vous devrez ouvrir la page de l'API Slack et cliquer sur le bouton Créer une application .

Dans la fenêtre contextuelle suivante, vous pouvez choisir comment vous souhaitez créer une application avec Slack. Il y a deux options :

• De zéro
• À partir d'un manifeste d'application.

Ici, nous allons créer une application Slack à partir de zéro. Cela ressemble à beaucoup de travail, mais cela ne prend vraiment que quelques clics.

Ensuite, vous verrez la fenêtre contextuelle où vous pourrez ajouter le nom de l'application et choisir votre lieu de travail Slack. Une fois que vous avez terminé, cliquez sur Créer une application .

Cela ouvre la page Informations de base. Ici, vous devez cliquer sur l'option Incoming Webhooks .

Dans l'écran suivant, activez les paramètres Activer les webhooks entrants . Cela vous permet de publier des messages sur Slack à partir de services externes.

Une fois activé, vous verrez la section URL Webhooks pour votre espace de travail sur la page.

Maintenant, vous devez créer un nouveau webhook pour obtenir des informations à partir de votre formulaire WordPress. Alors, cliquez sur le bouton Ajouter un nouveau Webhook à l'espace de travail .

Ensuite, vous pouvez voir la fenêtre contextuelle dans laquelle vous pouvez sélectionner un canal Slack pour publier vos soumissions de formulaire.

Après avoir choisi un canal Slack, cliquez sur Autoriser .

Maintenant, vous pourrez voir la nouvelle URL du webhook pour votre application Slack.

Il ne vous reste plus qu'à copier l'URL du Webhook. Vous en aurez besoin quelques étapes plus tard.

Étape 2 : Installer et activer WPForms

Une fois que vous avez votre URL de webhook, vous pouvez l'ajouter à votre formulaire WordPress.

Pour commencer, créez un compte sur le site Web WPForms.

Il existe une version gratuite du plug-in, mais vous aurez besoin de la version premium pour accéder aux fonctionnalités de formulaire avancées telles que les webhooks. WPForms est livré avec une garantie de remboursement 100% sans risque afin que vous puissiez essayer le service avant de vous engager.

Après votre inscription, vous trouverez le fichier de téléchargement du plug-in et la clé de licence dans l'onglet Téléchargements .

Maintenant, rendez-vous sur votre tableau de bord WordPress et installez le plugin. Si vous voulez plus de détails, vous pouvez consulter notre guide sur la façon d'installer un plugin WordPress.

Une fois que vous avez installé et activé WPForms sur votre site, vous devrez entrer votre clé de licence pour profiter de toutes vos fonctionnalités et addons premium.

Avant de commencer à créer votre formulaire, vous devez installer le module complémentaire Webhooks.

Pour cela, allez dans l'onglet WPForms »Addons et vous trouverez des tonnes d'addons qui vous aideront à étendre les fonctionnalités de vos formulaires WordPress. Ici, cliquez sur le bouton Installer le module complémentaire pour Webhooks Addon.

Vous êtes maintenant prêt à créer votre formulaire webhook dans WordPress.

Étape 3 : Créer un formulaire Webhook

Pour créer un nouveau formulaire, rendez-vous sur la page WPForms »Ajouter un nouveau où vous verrez une liste de modèles prédéfinis. Ces modèles sont pré-remplis avec les champs dont vous aurez besoin en fonction de l'objectif de votre formulaire. La bibliothèque de modèles comprend :

• Formulaire de contact simple
• Formulaire de demande de devis
• Formulaire de don
• Facturation/Bon de commande
• Formulaire d'enquête
• Formulaire de suggestion

…et plus! Pour ce didacticiel, nous choisirons le modèle de formulaire de suggestion , car nous avons créé une application Slack pour les commentaires des utilisateurs à l'étape précédente. N'hésitez pas à choisir celui qui correspond le mieux à ce dont vous avez besoin.

Tout ce que vous avez à faire est de donner un nom à votre formulaire en haut de la page. Ensuite, choisissez n'importe quel modèle en fonction de vos besoins ou vous pouvez choisir le modèle vierge pour repartir de zéro.

Après avoir sélectionné un modèle, vous verrez le générateur de formulaire glisser-déposer dans la fenêtre suivante.

Si vous souhaitez ajouter plus de champs, faites simplement glisser et déposez de nouveaux champs du menu de gauche dans l'aperçu du formulaire.

WPForms offre de nombreuses options de personnalisation afin que vous puissiez cliquer sur n'importe quel champ pour les modifier. Il vous permet de modifier les noms des champs, la description et des paramètres plus avancés.

Une fois que vous avez terminé d'ajouter vos champs de formulaire, cliquez sur le bouton Enregistrer .

Dans l'étape suivante, nous apprendrons comment configurer des webhooks pour ce formulaire et connecter votre application Slack.

Étape 4 : Configurer un Webhook pour Slack

Pour que les webhooks fonctionnent sur votre formulaire, vous devez accéder à l'onglet Paramètres » Webhooks et cliquer sur l'option Activer les webhooks .

Un nouveau webhook sera créé que vous pourrez modifier pour configurer votre intégration Slack.

Tout d'abord, vous pouvez modifier le nom du webhook. Cela vous aidera à le reconnaître plus tard.

Vous souvenez-vous maintenant de l'URL Webhook que vous avez copiée depuis votre application Slack à l'étape 1 ? Vous devrez le coller ici dans l'option URL de demande . Cela vous permettra de connecter votre formulaire WordPress à d'autres services comme Slack.

Après cela, vous verrez différents paramètres pour configurer votre webhook. Nous allons discuter de ce que chacun fait et de ce qu'il faut ajouter à ces champs ici.

• Request Method : Il vous permet de choisir le type de connexion que vous souhaitez créer avec votre service connecté. Il existe de nombreux types de méthodes HTTP que vous pouvez utiliser en fonction du type de connexion que vous souhaitez créer :
  • GET : Ceci obtiendra les données du formulaire soumis et enverra les détails à une application connectée.
  • POST : Cela enverra les données à un service secondaire. Nous utiliserons la requête HTTP POST car nous devons publier les données de votre formulaire sur votre canal Slack.
  • PUT : Cela vous permet de mettre à jour les données lorsque votre webhook s'exécute.
  • PATCH : Cela vous permet de remplacer les données lorsque votre webhook s'exécute.
  • SUPPRIMER : cela vous permet de supprimer des informations lorsque ce webhook spécifique s'exécute.
• Format de demande : cette option indiquera au serveur le type de contenu que vous envoyez. C'est un peu technique, mais fondamentalement, il existe deux types de formats de requête différents :
  • JSON : formate vos données dans un format application/json et définira le type de contenu comme charset=utf-8 .
  • FORM : formate vos données dans un format application/x-www-form-urlencoded et définira le type de contenu comme charset=utf-8 .
• Secret : si vous êtes un développeur et que vous souhaitez intégrer votre propre API pour l'authentification, vous pouvez utiliser une clé secrète. Mais pour notre tutoriel, nous n'avons pas besoin de cette option, nous allons donc laisser ce champ vide.
• En -têtes de demande : cela envoie des valeurs spécifiques lorsque la demande est envoyée à l'application. Lorsque le webhook s'exécute, les champs sont générés automatiquement. Nous laisserons également ce champ vide.
• Corps de la demande : pour cette option, vous devez configurer le type de message et sélectionner un champ pour publier des messages. Comme les utilisateurs saisiront des suggestions au format texte, nous définirons la clé sur Texte . Ensuite, sélectionnez le champ où les utilisateurs saisiront leur message.

Une fois que vous avez terminé avec les paramètres de la demande de webhook, cliquez sur le bouton Enregistrer .

Étape 5 : Configurer les notifications de formulaire

Ensuite, vous pouvez configurer des notifications par e-mail pour le formulaire WordPress. Cela vous permet d'envoyer des e-mails automatisés à l'administrateur, à tout membre de l'équipe et au client/utilisateur une fois qu'ils ont soumis le formulaire.

Pour configurer ces flux de travail de messagerie, accédez à l'onglet Paramètres » Notifications , cochez l'option Activer les notifications pour voir les paramètres par défaut.

Ici, vous pouvez personnaliser les paramètres de notification et ajouter les adresses e-mail des destinataires.

WPForms vous permet également d'envoyer des notifications automatisées par e-mail aux utilisateurs du formulaire. Pour configurer cela, cliquez sur le bouton Ajouter une nouvelle notification dans le coin supérieur droit de la page.

Ensuite, vous devez utiliser l'option Afficher les balises actives et sélectionner E- mail . Avec cette balise, WPForms détectera automatiquement l'adresse e-mail saisie par l'utilisateur dans le formulaire.

Dans la section Message électronique , vous pouvez ajouter votre message personnalisé et utiliser la balise active {all_fields} pour afficher toutes les données de formulaire saisies par l'utilisateur.

N'oubliez pas de sauvegarder vos paramètres à la fin.

Étape 6 : Personnalisez le message de confirmation

WPForms vous permet également d'afficher des messages de confirmation sur le front-end de votre site une fois que les utilisateurs ont soumis le formulaire avec succès.

Dans l'onglet Paramètres » Confirmations , vous verrez les paramètres de confirmation. Par défaut, le type de confirmation est défini sur 'Message' mais il y a 3 options dans ce menu :

• Message : ajoutez un message de confirmation qui s'affiche sur le frontend une fois que les clients ont soumis leur commande.
• Afficher la page : Redirigez vos utilisateurs vers n'importe quelle page de votre site.
• Aller à l'URL (redirection) : rediriger les utilisateurs vers une URL spécifique.

Pour en savoir plus à ce sujet, vous pouvez consulter notre guide sur la façon de configurer correctement les notifications et les confirmations de formulaire.

Une fois que vous avez terminé avec les paramètres, cliquez sur le bouton Enregistrer .

Nous devons également mentionner ici que WPForms vous permet de vous intégrer à votre service de messagerie préféré comme Constant Contact et Mailchimp.

Il vous suffit d'y accéder sous l'onglet Marketing et de suivre les instructions à l'écran pour connecter votre compte de messagerie. Dans la plupart des cas, vous devrez fournir une clé API que vous pouvez générer avec le fournisseur de messagerie.

Si vous souhaitez également connecter des formulaires en ligne à une passerelle de paiement, vous pouvez apprendre à le faire ici : Comment créer un formulaire de commande en ligne

Il ne vous reste plus qu'à publier votre formulaire webhook sur votre site WordPress.

Étape 7 : Publier le formulaire Webhooks sur votre site

Pour commencer à envoyer des soumissions de formulaires à des services externes, vous devez d'abord publier le formulaire de webhook. Avec le bloc personnalisé WPForms, vous pouvez ajouter vos formulaires à n'importe quelle page ou publier sur votre site WordPress.

Pour ce didacticiel, nous allons ajouter le formulaire à une nouvelle page de notre site. Accédez donc à l'onglet Pages »Ajouter un nouveau sur votre panneau d'administration WP. Dans l'écran de l'éditeur de blocs, ajoutez un nouveau bloc et recherchez "WPForms".

Lorsque vous ajoutez le bloc WPForms à votre page, vous verrez un menu déroulant qui vous permet de sélectionner le formulaire webhook que vous venez de créer.

Ensuite, vous pouvez publier votre page sur votre site.

Si vous utilisez l'éditeur classique de WordPress, vous pouvez ajouter le formulaire à l'aide du bouton Ajouter un formulaire de l'éditeur.

Vous pouvez même insérer votre formulaire de webhook dans une zone prête pour les widgets comme un pied de page ou une barre latérale. Pour ce faire, rendez-vous sur l'onglet Apparence » Widgets et faites glisser et déposez le widget WPForms dans la barre latérale ou le menu de pied de page à droite.

Ensuite, vous pouvez sélectionner le formulaire que vous avez créé dans le menu déroulant et enregistrer vos modifications.

Votre formulaire de webhooks est maintenant publié sur votre site. Lorsque les utilisateurs remplissent et soumettent le formulaire, vous recevez des notifications Slack de votre site Web.

Ainsi, vous pouvez utiliser WPForms pour vous connecter à différentes applications à l'aide d'URL de webhook. Vous obtenez un contrôle total sur les données que vous souhaitez récupérer et envoyer à d'autres applications.

C'est tout! Nous espérons que cet article vous a aidé à apprendre à utiliser les Webhooks sur vos formulaires WordPress. Avec WPForms, vous pouvez créer un formulaire de webhook et vous connecter facilement à un service tiers.

Vous pouvez également l'utiliser pour créer d'autres formulaires WordPress professionnels tels que des formulaires de commande, des formulaires de réservation, des formulaires d'inscription, etc.

Pour vos prochaines étapes, vous pouvez consulter ces ressources :

• Comment ajouter l'option "Enregistrer et continuer plus tard" aux formulaires WordPress
• Comment réduire l'abandon des formulaires et augmenter les conversions
• Meilleurs outils de capture d'e-mails et créateurs de formulaires pour WordPress

Ces articles vous aideront à ajouter la fonctionnalité de sauvegarde et de reprise ultérieure sur vos formulaires WordPress et à réduire les taux d'abandon des formulaires. Le dernier vous aidera à développer votre liste de marketing par e-mail.