Voulez-vous 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 d'une application web directement depuis votre formulaire WordPress, les webhooks sont la solution parfaite. Avec un formulaire webhook, vous n'avez pas besoin de faire appel à 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 vers vos applications et services préférés.
Mais d'abord, si vous êtes débutant, nous expliquerons ce que sont les webhooks et pourquoi ils sont importants. Gardez à l'esprit que la méthode que nous utiliserons aujourd'hui ne nécessite aucune compétence en codage.
Que sont les Webhooks ?
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 recevez un nouveau prospect ou un nouvel 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 n'importe quoi, comme des commentaires de blog, des achats de produits, des inscriptions d'utilisateurs et des soumissions de formulaires.
Si vous vous demandez pourquoi vous devriez utiliser les webhooks, voici quelques avantages :
- Transférer automatiquement des informations entre deux services/applications
- Automatiser les tâches et réduire le temps d'administration
- Réduire le coût d'utilisation de services connecteurs comme 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 façon de créer 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 tutoriel car il offre 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 offre des tonnes de modèles préconçus et de champs de formulaire prêts à l'emploi qui vous permettent de créer tous types de formulaires WordPress. Cela inclut les commandes de produits, les inscriptions, les réservations de rendez-vous, les formulaires de contact simples, et plus encore.
WPForms est livré avec un constructeur de formulaires par glisser-déposer qui rend la personnalisation des formulaires un jeu d'enfant. Il dispose de tonnes de modules complémentaires et d'intégrations que vous pouvez utiliser pour vous connecter à des applications d'e-mail, 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 webhook en fonction de la réponse de l'utilisateur au formulaire. Ainsi, ce n'est que si la valeur d'un champ est remplie que le webhook s'exécutera. Cela vous donne plus de contrôle sur les données que vous souhaitez envoyer et à quelle application.
Vous pouvez vous connecter à des tonnes d'applications et de services. Pour ce tutoriel, nous vous montrerons comment vous connecter à Slack. Mais rappelez-vous, vous pouvez 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 webhook à Slack, vous pouvez envoyer automatiquement des messages et des informations de votre site Web à vos canaux Slack. Vous pouvez informer les membres de votre équipe ou les départements lorsqu'une personne soumet un formulaire, abandonne un formulaire, et plus encore.
Maintenant, afin d'envoyer des données de WordPress à un autre service en utilisant des 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 pas à pas. Tout d'abord, vous devrez ouvrir la page Slack API 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 existe deux options :
- À partir de zéro
- À partir d'un manifeste d'application.
Ici, nous allons créer une application Slack à partir de zéro. Cela peut sembler beaucoup de travail, mais cela ne prend vraiment que quelques clics.
Ensuite, vous verrez la fenêtre contextuelle où vous pouvez ajouter le nom de l'application et choisir votre espace 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 Webhooks entrants.
Sur 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 des webhooks pour votre espace de travail sur la page.
Maintenant, vous devez créer un nouveau webhook pour obtenir des informations de votre formulaire WordPress. Cliquez donc sur le bouton Ajouter un nouveau webhook à l'espace de travail.
Ensuite, vous pouvez voir la fenêtre contextuelle où vous pouvez sélectionner un canal Slack pour publier les soumissions de votre formulaire.
Après avoir choisi un canal Slack, cliquez sur Autoriser.
Maintenant, vous pourrez voir la nouvelle URL du webhook pour votre application Slack.
Tout ce que vous avez à faire maintenant est de 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, inscrivez-vous pour un compte sur le site Web de WPForms.
Il existe une version gratuite du plugin, mais vous aurez besoin de la version premium pour accéder aux fonctionnalités de formulaire avancées telles que les webhooks. WPForms est assorti d'une garantie de remboursement sans risque à 100 % afin que vous puissiez essayer le service avant de vous engager.
Après votre inscription, vous trouverez le fichier de téléchargement du plugin et la clé de licence dans l'onglet Téléchargements.
Rendez-vous maintenant sur votre tableau de bord WordPress et installez le plugin. Si vous souhaitez plus de détails, vous pouvez consulter notre guide sur comment installer un plugin WordPress.
Une fois que vous aurez installé et activé WPForms sur votre site, vous devrez saisir votre clé de licence pour profiter de toutes vos fonctionnalités et extensions premium.
Avant de commencer à créer votre formulaire, vous devez installer le module complémentaire Webhooks.
Pour ce faire, accédez à l'onglet WPForms » Addons et vous y trouverez une multitude de modules complémentaires qui vous aideront à étendre les fonctionnalités de vos formulaires WordPress. Ici, cliquez sur le bouton Installer le module pour le module Webhooks.
Maintenant, vous êtes 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 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
- Formulaire de facturation/commande
- Formulaire d'enquête
- Formulaire de suggestion
...et plus encore ! Pour ce tutoriel, nous choisirons le modèle Formulaire de suggestion car nous avons créé une application Slack pour les commentaires des utilisateurs dans l'étape précédente. N'hésitez pas à en choisir un qui correspond le mieux à vos besoins.
Tout ce que vous avez à faire est de donner un nom à votre formulaire en haut de la page. Ensuite, choisissez un modèle en fonction de vos besoins ou vous pouvez choisir le modèle vierge pour commencer à partir de zéro.
Après avoir sélectionné un modèle, vous verrez l'outil de création de formulaire par 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, vous pouvez donc cliquer sur n'importe quel champ pour les modifier. Il vous permet de changer les noms des champs, les descriptions et des paramètres plus avancés.
Une fois que vous avez terminé d'ajouter les champs de votre formulaire, cliquez sur le bouton Enregistrer.
Dans l'étape suivante, nous apprendrons comment configurer les 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 naviguer vers 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 changer le nom du webhook. Cela vous aidera à le reconnaître plus tard.
N'oubliez pas l'URL du webhook que vous avez copiée de votre application Slack à l'étape 1 ? Vous devrez la coller ici dans l'option URL de la requête. Cela vous permettra de connecter votre formulaire WordPress à d'autres services comme Slack.
Après cela, vous verrez divers 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: It lets you choose what type of connection you want to create with your connected service. There are many types of HTTP methods that you can use based on what type of connection you’re looking to create:
- GET : Cela récupérera 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 poster 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.
- DELETE : Cela vous permet de supprimer des informations lorsque ce webhook spécifique s'exécute.
- Request Format: This option will show the server which type of content you are sending over. This is a bit technical but basically, there are two different request format types available:
- JSON : Formate vos données au format application/json et définira le type de contenu comme charset=utf-8.
- FORM : Formate vos données au 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 la laisserons donc vide.
- En-têtes de requête : Ceci envoie des valeurs spécifiques lorsque la requête est envoyée à l'application. Lorsque le webhook s'exécute, les champs seront générés automatiquement. Nous laisserons également ce champ vide.
- Corps de la requête : Pour cette option, vous devez configurer le type de message et sélectionner un champ pour publier les 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é les paramètres de la requête webhook, cliquez sur le bouton Enregistrer.
Étape 5 : Configurer les notifications de formulaire
Ensuite, vous pouvez configurer les 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 par e-mail, 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 des adresses e-mail de destinataires.
WPForms vous permet également d'envoyer des notifications par e-mail automatisées 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 intelligentes 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 e-mail, vous pouvez ajouter votre message personnalisé et utiliser la balise intelligente {all_fields} pour afficher toutes les données du formulaire saisies par l'utilisateur.
N'oubliez pas d'enregistrer vos paramètres à la fin.
Étape 6 : Personnaliser le message de confirmation
WPForms vous permet également d'afficher des messages de confirmation sur le front-end de votre site après 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 front-end après 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) : Envoyer les utilisateurs vers une URL spécifique.
Pour en savoir plus à ce sujet, vous pouvez consulter notre guide sur comment configurer les notifications et confirmations de formulaire correctement.
Une fois que vous avez terminé les réglages, 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.
Vous devez simplement accéder à cela sous l'onglet Marketing et 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 auprès de votre 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
Tout ce que vous avez à faire maintenant est de publier votre formulaire webhook sur votre site WordPress.
Étape 7 : Publier le formulaire Webhooks sur votre site
Pour commencer à envoyer les soumissions de formulaire à des services externes, vous devez d'abord publier le formulaire webhook. Avec le bloc personnalisé WPForms, vous pouvez ajouter vos formulaires à n'importe quelle page ou publication de votre site WordPress.
Pour ce tutoriel, nous allons ajouter le formulaire à une nouvelle page sur notre site. Naviguez donc vers l'onglet Pages » Ajouter sur votre panneau d'administration WP. Sur 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 permettra 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 en utilisant le bouton Ajouter un formulaire dans l'éditeur.
Vous pouvez même insérer votre formulaire webhook dans une zone prête pour les widgets, comme un pied de page ou une barre latérale. Pour ce faire, accédez à l'onglet Apparence » Widgets et faites glisser le widget WPForms dans la barre latérale ou le menu du pied de page à droite.
Ensuite, vous pouvez sélectionner le formulaire que vous avez créé dans le menu déroulant et enregistrer vos modifications.
Maintenant, votre formulaire webhooks est publié sur votre site. Lorsque les utilisateurs remplissent et soumettent le formulaire, vous recevrez 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 avez 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 comment utiliser les Webhooks sur vos formulaires WordPress. Avec WPForms, vous pouvez créer un formulaire 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, et plus encore. Vous pourriez également vouloir apprendre comment utiliser WPForms pour enregistrer les données de formulaire dans votre base de données WordPress.
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 de formulaire et augmenter les conversions
- Meilleurs outils de capture d'e-mails et constructeurs de formulaires pour WordPress
Ces articles vous aideront à ajouter la fonctionnalité d'enregistrement et de reprise plus tard sur vos formulaires WordPress et à réduire les taux d'abandon de formulaire. Le dernier vous aidera à développer votre liste de marketing par e-mail.
Commentaires Laisser une réponse