Un formulaire de contact Webflow est visuellement soigné dès la sortie de la boîte, mais Webflow se contente de t'envoyer les données par e-mail - il ne stocke pas les soumissions dans une base de données, ne se connecte pas à ton CRM et ne déclenche aucune logique personnalisée. Si tu as besoin de plus qu'une simple notification par e-mail, tu dois router tes soumissions de formulaire Webflow vers un service externe. La bonne nouvelle, c'est que tu peux le faire sans écrire une seule ligne de code côté serveur.
Table des matières
Ce que Webflow propose par défaut
Le gestionnaire de formulaires intégré à Webflow fait trois choses : envoyer une notification par e-mail au propriétaire du site, afficher un message de succès, et enregistrer les soumissions dans le tableau de bord Webflow (sur les offres payantes). C'est suffisant pour un formulaire de contact basique sur un petit site, mais ça montre vite ses limites dès que tu as besoin de l'une des fonctionnalités suivantes :
- Réponses automatiques à la personne qui a rempli le formulaire
- Soumissions transmises à une boîte de réception d'équipe spécifique ou à un CRM
- Logique conditionnelle (par exemple, router les prospects selon leur intérêt produit)
- Filtrage du spam au-delà du honeypot basique de Webflow
- Un historique de livraison fiable avec horodatage et tentatives de renvoi
Rien de tout cela n'est disponible nativement. Il te faut une couche externe, et il existe trois façons réalistes de l'ajouter.
Intégrations natives - Zapier et Make
Webflow dispose d'une intégration directe avec Zapier et Make (anciennement Integromat). Lorsqu'une nouvelle soumission de formulaire arrive, le trigger se déclenche et tu peux enchaîner n'importe quelle action : ajouter une ligne dans Google Sheets, créer un contact HubSpot, envoyer un message Slack, etc.
C'est la solution no-code vers laquelle la plupart des designers se tournent en premier. La configuration ressemble à ceci :
- Dans Webflow, va dans Paramètres du projet > Intégrations et connecte ton compte Zapier.
- Dans Zapier, crée un nouveau Zap avec Webflow - New Form Submission comme trigger.
- Sélectionne le formulaire concerné par son nom.
- Ajoute ton action (Gmail, Slack, Airtable, etc.).
- Teste avec une vraie soumission et active le Zap.
Make est moins cher pour les workflows complexes, mais les deux plateformes ajoutent une dépendance : si Zapier ou Make tombe en panne ou que ton compte atteint sa limite, les soumissions échouent silencieusement ou se mettent en file d'attente.
Utiliser un webhook Webflow
Un webhook Webflow est une approche plus directe. Webflow envoie un HTTP POST à une URL que tu spécifies à chaque fois qu'un formulaire est soumis. Tu contrôles l'endpoint récepteur, ce qui te permet de faire ce que tu veux avec le payload.
Pour en configurer un :
- Va dans Paramètres du projet > Intégrations > Webhooks dans Webflow.
- Clique sur Ajouter un webhook , puis choisis le trigger Form Submission .
- Colle l'URL de l'endpoint de ton service récepteur.
- Enregistre et teste avec une vraie soumission.
Le payload envoyé par Webflow est un objet JSON contenant toutes les valeurs des champs, le nom du formulaire et les métadonnées du site. Voici à quoi ressemble un payload typique :
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}Le problème : tu as besoin de quelque chose pour recevoir ce webhook. Les options incluent un petit Cloudflare Worker , un workflow Pipedream, ou un backend de formulaire dédié. Écrire ton propre récepteur, c'est exactement le problème de "backend personnalisé" que cet article cherche à t'aider à éviter. C'est là que les services de formulaire vers e-mail deviennent la solution la plus propre.
Remplacer l'endpoint du formulaire par un service dédié
Plutôt que d'utiliser le gestionnaire de formulaires de Webflow, tu peux pointer l'attribut
action
de ton formulaire vers un service de formulaire tiers. Le service reçoit le POST, le valide, filtre le spam et t'envoie les résultats par e-mail. Aucun backend requis de ton côté.
Le processus dans Webflow est le suivant :
- Dans le Designer Webflow, sélectionne ton élément de formulaire.
-
Dans le panneau
Paramètres du formulaire
, définis le champ
Action
sur l'URL de l'endpoint de ton service de formulaire (par exemple,
https://sendform.net/!your-form-id). - Définis la Méthode sur POST .
-
Assure-toi que chaque champ de saisie possède un attribut
name- Webflow les définit par défaut. - Publie le site et teste une soumission.
Cette approche contourne entièrement le gestionnaire de formulaires de Webflow. La soumission part directement du navigateur du visiteur vers le service de formulaire. Tu reçois l'e-mail, le service gère les tentatives de renvoi et le filtrage du spam, et Webflow n'est plus que la couche d'interface.
Ce même schéma fonctionne pour n'importe quel site statique ou no-code. Si tu héberges aussi sur GitHub Pages ou Cloudflare Pages, l'article sur l'hébergement d'un site statique gratuitement avec des formulaires de contact fonctionnels couvre exactement la même approche.
Sendform face aux alternatives
Plusieurs services de formulaire fonctionnent avec Webflow. Voici comment les principales options se comparent sur ce qui compte vraiment pour la configuration d'un formulaire de contact :
| Service | Offre gratuite | Complexité de configuration | Redirection personnalisée | Filtrage du spam | Compatible RGPD |
|---|---|---|---|---|---|
| Sendform | Oui | Coller une URL | Oui | Oui | Oui |
| Formspree | 50 soumissions/mois | Inscription + coller l'URL | Payant uniquement | Basique (reCAPTCHA en payant) | Partiel |
| Netlify Forms | 100 soumissions/mois | Hébergement Netlify requis | Oui | Oui | Partiel |
| Zapier (via webhook) | 100 tâches/mois | Workflow multi-étapes | Manuelle | Aucun intégré | Dépend du Zap |
| Basin | 100 soumissions/mois | Inscription + coller l'URL | Oui | Oui | Partiel |
Sendform se distingue pour plusieurs raisons concrètes qui ne tiennent pas dans un tableau :
- Configuration sans friction : Tu obtiens une URL d'endpoint de formulaire sans avoir à créer un compte au préalable. Colle-la dans le champ Action de Webflow, c'est terminé.
- Pas de stockage des soumissions par défaut : Sendform envoie les données par e-mail sans les conserver sur ses serveurs, ce qui est le bon comportement par défaut pour la conformité RGPD. Des concurrents comme Formspree stockent toutes les soumissions dans leur tableau de bord, ce qui signifie que les données de tes utilisateurs vivent indéfiniment sur un serveur tiers.
- Pensé pour les développeurs, utilisable sans code : Contrairement à Zapier, il n'y a aucun workflow à maintenir. Contrairement à Netlify Forms, il n'est pas lié à un hébergeur spécifique - il fonctionne avec Webflow, GitHub Pages ou n'importe quel autre hôte.
- Offre gratuite honnête : Pas de murs cachés du type "passe à l'offre payante pour débloquer les redirections" que d'autres services utilisent pour te pousser vers leurs plans premium.
Quelle approche choisir ?
La bonne réponse dépend de ce dont tu as réellement besoin après la soumission du formulaire :
- Juste des notifications par e-mail : Utilise Sendform. Colle l'URL de l'endpoint dans le champ Action de Webflow, c'est réglé en deux minutes.
- E-mail + synchronisation CRM ou tableur : Utilise Sendform pour la livraison par e-mail et ajoute optionnellement une étape Zapier déclenchée par l'e-mail entrant, ou utilise la sortie webhook de Sendform si elle est disponible sur ton offre.
- Automatisation complexe multi-étapes : Un webhook Webflow vers Make ou Zapier a du sens ici, mais prévois le budget pour l'offre payante.
- Tu es déjà sur Netlify : Netlify Forms convient pour les cas simples, mais tu atteindras rapidement le plafond de 100 soumissions par mois sur tout site actif.
Pour la grande majorité des formulaires de contact Webflow - un champ nom, e-mail et message qui doit atterrir de façon fiable dans ta boîte de réception - Sendform est la solution la plus rapide et la plus propre. Pas de backend, pas de limites de tâches mensuelles à surveiller, et pas de données de soumission qui traînent dans un tableau de bord tiers que tu as oublié de supprimer.
Gère ton formulaire de contact Webflow sans écrire de backend
Sendform te fournit un endpoint de formulaire prêt à l'emploi que tu peux coller directement dans le champ Action de Webflow - tes soumissions arrivent instantanément dans ta boîte de réception, avec filtrage du spam et paramètres conformes au RGPD inclus.
Essayer Sendform gratuitement →
Lorsque tu pointes l'Action du formulaire Webflow vers un endpoint externe, l'état de succès intégré de Webflow ne se déclenchera plus automatiquement. La plupart des services de formulaire gèrent cela en redirigeant vers une page de remerciement que tu spécifies. Dans Sendform, tu définis une URL de redirection dans les paramètres de ton formulaire, de sorte que les visiteurs arrivent sur ta page de confirmation personnalisée après la soumission. Tu peux aussi utiliser JavaScript pour intercepter l'événement de soumission du formulaire, envoyer un POST via fetch(), et afficher manuellement l'état de succès de Webflow.
Oui. Dans Paramètres du projet > Intégrations > Webhooks, tu peux ajouter un webhook qui se déclenche à chaque nouvelle soumission de formulaire. Webflow envoie un POST JSON à l'URL que tu as spécifiée, contenant toutes les valeurs des champs, le nom du formulaire et un horodatage. Cela nécessite un endpoint récepteur - une fonction serverless, un workflow Pipedream, ou un service de formulaire qui accepte les webhooks. La fonctionnalité webhook est disponible sur les offres CMS et Business de Webflow.
Zapier s'intercale entre Webflow et ta destination (e-mail, CRM, etc.) et ajoute une couche de workflow. C'est puissant pour l'automatisation multi-étapes, mais ça coûte de l'argent au-delà de 100 tâches par mois et ça ajoute un point de défaillance potentiel. Sendform est un endpoint de formulaire direct - les soumissions vont directement du navigateur à Sendform, qui t'envoie un e-mail immédiatement. Pas de workflow à maintenir, pas de compteur de tâches, et aucun risque qu'un Zap casse silencieusement. Pour les formulaires de contact simples, Sendform est plus rapide à configurer et plus fiable au quotidien.
Cela dépend du service. Les services qui stockent les soumissions dans leur propre base de données (Formspree, Basin, Netlify Forms) agissent en tant que sous-traitants, ce qui signifie que tu as besoin d'un accord de traitement des données et que tu dois les mentionner dans ta politique de confidentialité. Sendform est conçu pour transmettre les données sans les conserver par défaut, ce qui réduit considérablement la charge de conformité. Quel que soit le service que tu utilises, tu dois mettre à jour ta politique de confidentialité pour préciser comment les données du formulaire de contact sont traitées et transmises.
Oui, et tu as plusieurs options. La plupart des services de formulaire, dont Sendform, incluent un filtrage du spam intégré de leur côté. Tu peux aussi ajouter un champ honeypot - un champ caché que les bots remplissent mais que les vrais utilisateurs ne voient pas - et le service récepteur ignore les soumissions où ce champ contient une valeur. Pour les formulaires à fort trafic, les services qui prennent en charge reCAPTCHA v3 ou hCaptcha t'offrent une couche de protection supplémentaire. Le filtre anti-spam de Webflow ne s'applique que lorsque tu utilises le gestionnaire de formulaires natif de Webflow, donc passer à un endpoint externe signifie s'appuyer sur les outils anti-spam du service choisi.
Non. Pointer l'attribut Action du formulaire vers une URL externe fonctionne sur n'importe quelle offre Webflow, y compris l'offre Starter gratuite, car tu modifies simplement un attribut HTML sur une page publiée. La restriction sur les offres gratuites concerne le gestionnaire de formulaires propre à Webflow (stockage dans le tableau de bord, notifications par e-mail via Webflow), qui nécessite une offre site payante. Utiliser un service externe comme Sendform contourne entièrement cette restriction - le formulaire envoie simplement un POST aux serveurs de Sendform, quel que soit ton niveau d'offre Webflow.