Comment envoyer les données de formulaire WordPress à n'importe quelle API avec des Webhooks

WPForms a un module complémentaire pour une quarantaine de services. Mailchimp, Salesforce, Stripe, Google Sheets et le reste de la pile habituelle sont à un écran de configuration. Le système de réservation interne de votre client ne l'est pas.

Le module complémentaire Webhooks comble cette lacune. Il prend une soumission de formulaire et l'envoie sous forme de requête HTTP à n'importe quelle URL que vous lui indiquez, dans le format attendu par l'API réceptrice. Ce tutoriel explique la configuration : obtenir les détails du point de terminaison, mapper vos champs, ajouter l'authentification et le tester avant qu'une vraie soumission en dépende.

Créez votre formulaire WordPress maintenant

Comment envoyer les données de formulaire WordPress à n'importe quelle API avec des Webhooks

Un visiteur soumet votre formulaire. WPForms formate les réponses en une requête HTTP comme votre API le souhaite, ajoute votre en-tête d'authentification et l'envoie. Votre entrée est toujours enregistrée dans WordPress dans les deux cas.

Quand un Webhook est l'outil approprié

Vérifiez d'abord s'il existe un module complémentaire natif. Mailchimp, Salesforce, Google Sheets, Notion, Airtable et une quarantaine d'autres se connectent en quelques clics, et ces connexions sont plus profondes. Zapier, Make et n8n couvrent la longue traîne des applications SaaS, avec un coût par tâche et un compte supplémentaire dans la chaîne.

Les webhooks sont faits pour le reste : un système interne propriétaire, un service régional, le backend personnalisé d’un client, un point de terminaison que vous avez écrit vous-même. Ils n’ont pas non plus de limite de transfert, donc un formulaire recevant 4 000 soumissions par mois coûte le même prix qu’un formulaire en recevant 40.

Ce dont vous aurez besoin

• WPForms Elite (le module complémentaire Webhooks est inclus à ce niveau de licence)
• Un formulaire sur votre site
• La documentation de l’API réceptrice

Vous n’écrirez aucun code. Tout cela se passe dans le constructeur de formulaires.

Étape 1 : Obtenez les détails de l'API

Sauter cette étape est la raison pour laquelle la plupart des webhooks échouent du premier coup. D’après la documentation de l’API, notez :

1. L’URL du point de terminaison, comme https://api.example.com/v1/deliveries
2. La méthode de requête, généralement POST pour créer un enregistrement
3. La méthode d’authentification, généralement une clé dans un en-tête tel que Authorization: Bearer VOTRE_CLE
4. Les noms exacts des paramètres. Si l’API attend customer_email et que vous envoyez email, la requête réussit et la valeur disparaît.

Exemple concret : un client fleuriste dont le système de distribution des livraisons accepte les nouvelles commandes à ce point de terminaison via POST et attend customer_name, customer_email, customer_phone, arrangement, quantity et order_total. Aucun plugin WordPress n’existe pour cela, c’est exactement quand vous utilisez un webhook.

Étape 2 : Installez le module complémentaire et activez-le

Allez dans WPForms » Modules complémentaires, recherchez Webhooks, et cliquez sur Installer le module complémentaire. Il s’active tout seul.

Ouvrez ensuite votre formulaire, cliquez sur Paramètres » Webhooks, et activez Activer les Webhooks.

Cliquez sur l’icône en forme de crayon pour le renommer de manière à le reconnaître plus tard, par exemple « API de distribution ».

Étape 3 : Définissez l'URL de requête, la méthode et le format

Configurez ensuite ces paramètres :

URL de requête. Collez le point de terminaison. Faites attention au segment de version, car /v1/ et /v2/ sont faciles à confondre.

Méthode de requête. GET, POST, PUT, PATCH ou DELETE. POST crée un nouvel enregistrement et couvre la plupart des configurations.

Format de requête. JSON envoie application/json et convient à la plupart des API modernes. FORM envoie application/x-www-form-urlencoded, utilisez-le donc uniquement lorsque la documentation le demande. En cas de doute, JSON.

Étape 4 : Ajoutez vos en-têtes d'authentification

Enfin, ajoutez vos en-têtes d’authentification.

En-têtes de requête accepte des paires clé/valeur. Pour un jeton porteur, utilisez Authorization comme clé et Bearer VOTRE_JETON comme valeur. Pour un en-tête personnalisé, utilisez le nom que la documentation indique, comme X-API-Key. Ajoutez autant de lignes que nécessaire.

Le champ Secret fonctionne dans l’autre sens, et WPForms le remplit pour vous. Il signe chaque requête sortante afin que le serveur récepteur puisse confirmer que les données proviennent bien de votre site. Utilisez-le lorsque vous contrôlez le point de terminaison et que vous pouvez vérifier la signature ; la plupart des API tierces l’ignorent.

Traitez la valeur de l’en-tête comme l’identifiant qu’elle est. Toute personne ayant accès au constructeur peut la lire, alors limitez la portée des clés API des clients et faites-les pivoter lorsque quelqu’un quitte le projet.

Créez votre formulaire WordPress maintenant

Étape 5 : Mappez vos champs de formulaire

Le corps de la requête est l’endroit où le formulaire rencontre l’API. Chaque ligne associe un nom de paramètre que vous tapez à un champ de formulaire que vous choisissez :

• customer_name → Nom
• customer_email → E-mail
• customer_phone → Numéro de téléphone
• arrangement → Arrangement
• quantity → Quantité
• order_total → Total

Copiez les noms des clés directement depuis la documentation. La casse et les tirets bas sont importants, et une discordance entraîne une requête qui réussit tout en ignorant la valeur.

Les cases à cocher, les sélections multiples et les champs d’adresse envoient des valeurs séparées par une double barre oblique (||), alors divisez cette chaîne côté serveur si l’API attend un tableau.

Choisissez Ajouter une valeur personnalisée pour envoyer quelque chose qui n’est pas un champ de formulaire, comme un paramètre source statique ou une balise intelligente pour l’ID de l’entrée.

Étape 6 : Ajoutez une logique conditionnelle (facultatif)

Activez Activer la logique conditionnelle pour contrôler quand le webhook se déclenche. Vous pourriez envoyer un seul type d’arrangement à l’API d’expédition, ou retenir les commandes qui n’ont pas besoin de livraison du tout. Pour deux destinations, cliquez sur Ajouter un nouveau webhook et donnez à chacune sa propre règle.

Étape 7 : Testez avant de lancer

Testez en deux passes.

D’abord, envoyez à un inspecteur de requêtes. Webhook.site et RequestBin génèrent une URL temporaire qui montre exactement ce qui est arrivé. Collez-la dans URL de la requête, enregistrez et soumettez le formulaire. Vos en-têtes et votre charge utile s’affichent immédiatement, ce qui vous indique si les noms des clés sont corrects.

Ensuite, basculez vers le point de terminaison réel, soumettez à nouveau et confirmez que l’enregistrement a bien été reçu. Vérifiez également WPForms » Entrées.

Si vous êtes bloqué, allez dans WPForms » Outils » Journaux, activez Activer les journaux et vérifiez Fournisseurs et Erreurs sous Types de journaux. Soumettez à nouveau et le journal affichera la réponse de l’API. Désactivez à nouveau la journalisation par la suite, car ces entrées peuvent contenir des données que vous ne souhaitez pas laisser sur le serveur.

Erreurs courantes de Webhook

• 401 ou 403. Authentification : clé incorrecte, clé expirée, préfixe Bearer manquant ou nom d’en-tête incorrect.
• 404. L’URL : faute de frappe, segment de version manquant ou barre oblique finale que l’API rejette.
• 400 ou 422. L’API a reçu la requête et a rejeté le contenu, généralement un paramètre obligatoire manquant ou une date non analysable.
• 200 mais rien n’apparaît. Discordance du nom de la clé : l’API a accepté la requête et ignoré les champs qu’elle n’a pas reconnus.
• Rien ne se déclenche. Vérifiez la logique conditionnelle : sur les formulaires multipages, le webhook s’exécute une fois, après la soumission finale.

FAQ sur l'envoi de données de formulaire WordPress à une API

Quel plan WPForms inclut le module complémentaire Webhooks ?

Elite. Ce niveau couvre également Salesforce, Authorize.Net, ActiveCampaign et Airtable, c’est pourquoi c’est là que les agences effectuant des travaux d’intégration personnalisés atterrissent généralement.

Dois-je savoir coder pour utiliser les webhooks ?

Non. Tout se passe dans le constructeur WPForms. Il vous suffit de lire la documentation de l’API suffisamment attentivement pour trouver son URL, sa méthode d’authentification et ses noms de paramètres.

Quelle est la différence entre les webhooks et les modules complémentaires Zapier ou Make ?

Zapier et Make s'intercalent entre votre formulaire et la destination, vous offrant des flux de travail multi-étapes et un large catalogue de connexions pour un coût par tâche. Un webhook va directement au point de terminaison, fonctionne avec n'importe quelle API et ne limite pas les soumissions.

Un formulaire peut-il envoyer des données à plusieurs API ?

Oui. Cliquez sur Ajouter un nouveau webhook et configurez la deuxième connexion avec sa propre URL, ses en-têtes et son mappage. Chacun peut avoir sa propre logique conditionnelle.

Comment envoyer une clé d'API avec mes données de formulaire ?

Ajoutez-la dans les en-têtes de requête sous forme de paire clé/valeur. La plupart des API attendent Authorization et Bearer VOTRE_CLÉ, bien que certaines utilisent un nom personnalisé comme X-API-Key.

Que se passe-t-il si l'API est hors service lorsqu'une personne soumet mon formulaire ?

La soumission s'achève toujours et votre entrée et vos notifications sont transmises, car le webhook est une requête distincte. Seul le webhook échoue, alors ajoutez une surveillance côté réception pour tout ce qui est critique pour l'entreprise.

Ensuite, acheminez automatiquement vos soumissions vers le bon endroit

Une fois la connexion API fonctionnelle, la prochaine étape consiste à la gérer, de sorte que les demandes de devis, les questions de support et les inscriptions à la newsletter aillent chacune quelque part de différent. Comment acheminer les soumissions de formulaires vers différentes listes et outils en fonction des réponses explique la procédure.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.