Formulaire, CRM, alerte en 30 secondes : automatiser vos leads avec Webflow et n8n (tuto)

Un prospect remplit votre formulaire un mardi à 17 h 42. Combien de temps faut-il avant que quelqu'un de votre équipe le voie ? Une heure ? Le lendemain ? En B2B, la rapidité de réponse est un avantage commercial énorme : le premier prestataire qui répond a souvent une longueur d'avance.

Dans ce tutoriel, nous construisons pas à pas un système simple : le formulaire de votre site Webflow envoie les informations à n8n, qui crée le contact dans votre CRM, prévient votre équipe en quelques secondes, répond automatiquement au prospect et garde une trace de la source du lead. Nous utilisons n8n au quotidien, et cette base fonctionne pour la plupart des PME.

Ce que vous allez obtenir

• Une alerte instantanée (Slack ou email) à chaque nouveau lead.
• Un contact créé sans doublon dans votre CRM.
• Un email de confirmation envoyé au prospect, avec un lien de prise de rendez-vous.
• La source du lead conservée (campagne, canal) pour mesurer ce qui rapporte.
• Une base pour remonter les leads qualifiés à Google Ads.

Prérequis

• Un site Webflow avec un formulaire publié (et un plan qui permet les webhooks de formulaire : vérifiez votre plan).
• Un compte n8n (version cloud ou auto-hébergée).
• Un CRM ou un tableur : Pipedrive, HubSpot, Airtable, Twenty, Google Sheets…
• Un canal d'alerte : Slack, email ou Google Chat.

Étape 1 : préparer le formulaire Webflow

Un bon formulaire est court. Chaque champ supplémentaire fait baisser le taux de conversion. Visez : nom, email professionnel, société, message, et une case de consentement.

1. Donnez un nom clair à chaque champ (par exemple nom, email, societe, message). Ces noms serviront de repères dans n8n.
2. Ajoutez des champs cachés pour les sources : utm_source, utm_medium, utm_campaign, gclid et la page d'origine. Un petit script personnalisé lit ces paramètres dans l'URL et les copie dans les champs cachés.
3. Activez une protection anti-spam (reCAPTCHA ou champ piège) selon vos besoins.
4. Donnez un nom unique au formulaire (par exemple contact-site-principal) pour le retrouver facilement.

Note de conformité : le stockage des identifiants publicitaires et des paramètres de suivi est soumis au consentement. Assurez-vous que votre bandeau de consentement est correctement configuré.

Étape 2 : créer le workflow n8n

1. Créez un nouveau workflow.
2. Ajoutez un premier nœud Webhook, méthode POST.
3. Copiez l'URL de test pour la phase de développement. L'URL de production ne fonctionnera qu'une fois le workflow activé.

Étape 3 : connecter Webflow au webhook

1. Dans Webflow, ouvrez les réglages du site, section apps et intégrations, puis Webhooks (l'intitulé exact peut varier selon la version de l'interface).
2. Ajoutez un webhook avec le déclencheur Form submission.
3. Collez l'URL de test n8n.
4. Envoyez un formulaire de test depuis votre site publié. Dans n8n, l'exécution doit apparaître avec les données du formulaire.

Dans les données reçues, les champs du formulaire se trouvent généralement dans un objet de données, avec des informations complémentaires comme la date d'envoi et la page. Le format peut évoluer : inspectez toujours le JSON reçu lors de votre premier test.

Étape 4 : nettoyer et normaliser les données

Ajoutez un nœud de type Edit Fields (Set) pour créer des champs simples : prenom_nom, email, societe, message, source, campagne, page, gclid, date. Cette étape évite d'aller chercher des chemins complexes dans le reste du workflow, et elle protège le système si le formulaire évolue.

Étape 5 : filtrer le bruit

Ajoutez un nœud IF pour écarter les envois indésirables :

• email vide ou de forme invalide ;
• champ piège rempli ;
• domaines d'email jetables ou de messagerie personnelle si votre cible est strictement B2B (à utiliser avec discernement) ;
• message contenant des liens suspects.

Les envois écartés peuvent être archivés dans un tableur pour vérification, sans déclencher d'alerte.

Étape 6 : créer ou mettre à jour le contact dans le CRM

1. Ajoutez le nœud de votre CRM (Pipedrive, HubSpot, Airtable, etc.).
2. Cherchez d'abord la personne par email. Si elle existe, mettez à jour. Sinon, créez-la. Cela évite les doublons.
3. Créez une opportunité avec un statut de départ (nouveau lead).
4. Enregistrez la source, la campagne, la page d'origine et le message.
5. Attribuez un responsable selon une règle simple (par zone, par service, par tour de rôle).

Étape 7 : alerter l'équipe en quelques secondes

Ajoutez un nœud Slack (ou Gmail, Google Chat) qui envoie un message clair :

• nom, société, email et téléphone s'il est fourni ;
• le message du prospect ;
• la source et la campagne ;
• un lien direct vers la fiche dans le CRM.

Le but : qu'une personne s'approprie le lead en quelques minutes.

Étape 8 : confirmer au prospect

Envoyez un email de confirmation professionnel et court : merci, ce qui va se passer, sous quel délai vous répondez, et un lien pour réserver directement un créneau. Un prospect qui réserve tout de suite est un prospect qui ne compare pas trois autres agences dans la foulée.

Étape 9 : garder une trace et gérer les erreurs

• Ajoutez une ligne dans un tableur ou une base de suivi (date, source, statut).
• Créez un second workflow avec un nœud Error Trigger qui vous alerte si le premier plante. Un formulaire qui n'envoie plus rien sans que personne ne le sache est un cauchemar classique.

Étape 10 : tester de bout en bout, puis activer

1. Envoyez trois formulaires de test : cas normal, doublon (même email), envoi indésirable.
2. Vérifiez l'alerte, la création dans le CRM, l'email de confirmation et la ligne de suivi.
3. Remplacez l'URL de test par l'URL de production dans Webflow.
4. Activez le workflow dans n8n.

Aller plus loin : remonter les leads qualifiés à Google Ads

C'est ici que l'automatisation devient un levier d'acquisition. Vous avez conservé l'identifiant de clic Google (gclid) dans le CRM. Quand un lead devient rendez-vous ou opportunité, vous pouvez le remonter à Google Ads comme conversion hors ligne. Résultat : l'algorithme apprend à chercher des leads qui deviennent réellement des clients, plutôt que des formulaires à bas coût. Avec les nouveautés d'automatisation de Google, c'est plus important que jamais : lisez notre article sur AI Max et notre guide du budget Google Ads B2B. Ce point est plus technique et dépend de votre CRM, de votre consentement et de la configuration de votre compte publicitaire.

Les erreurs classiques

• Oublier d'activer le workflow et de passer de l'URL de test à l'URL de production.
• Ne pas gérer les doublons dans le CRM.
• Envoyer des données personnelles à un service sans avoir vérifié le cadre RGPD.
• Ne pas prévoir d'alerte d'erreur.
• Multiplier les champs de formulaire et perdre des conversions.

RGPD : les points de vigilance

• Affichez une mention claire d'information et une case de consentement adaptée.
• Choisissez des outils dont vous maîtrisez l'hébergement et les sous-traitants.
• Définissez une durée de conservation et purgez les données inutiles.
• Limitez les accès au CRM et aux workflows.

Questions fréquentes

Combien de temps faut-il pour tout mettre en place ?

Une base fonctionnelle (alerte + CRM) se monte généralement en une demi-journée. Les étapes plus avancées (champs cachés, conversion hors ligne, règles d'attribution) demandent plus de temps de test.

Peut-on faire la même chose avec Make ou Zapier ?

Oui, le principe est identique : un déclencheur sur le formulaire, puis des actions. n8n offre une grande flexibilité et la possibilité de l'héberger soi-même.

Les formulaires natifs de Webflow suffisent-ils ?

Pour la plupart des sites vitrines, oui. Pour des besoins très avancés (multi-étapes, calculs), un outil de formulaire dédié peut se justifier.

Que faire si le webhook ne reçoit rien ?

Vérifiez que le site est bien publié, que vous utilisez la bonne URL (test ou production), que le workflow est actif pour l'URL de production et que le déclencheur choisi correspond bien au formulaire.

Besoin d'un coup de main ?

Les intégrations et automatisations font partie de nos sites Sama' Perf. Parlons de votre parcours de lead : nous mettons en place l'ensemble avec vous, comme une extension de votre équipe.