Badge Webflow Award Winner 2023

Comment gérer plusieurs formulaires Webflow avec Make (Integromat) ?

Publié le 
7/10/2021
Modifié le 
27/3/2023
Temps de lecture : 5 min
Module webflow sur Make (Integromat) avec une femme qui tient une roue outil
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

Un site web contient souvent plusieurs types de formulaires. Cela se traduit par plusieurs types de données à traiter et relier avec vos outils. Voici comment connecter facilement tous vos formulaires Webflow.

Points clés à retenir

Il existe plusieurs types de formulaires Webflow à vos outils. Plus vous intégrerez de formulaires web à votre site, plus vous devrez gérer de données. Cela peu donc très vite devenir une charge pour vous et vos équipe. C'est là que vous trouverez un itérer à automatiser votre site Webflow. Le but va être de relier l'ensemble des données issues de votre site web à vos outils d'entreprise. Cela peut être des outils RH, outils commerciaux CRM, outils produits, etc.

Il existe plusieurs techniques pour relier votre site web à vos outils no-code et low-code et nous utilisons ici celle de l'outil d'automatisation : Comment connecter plusieurs formulaires Webflow avec Make (Integromat) ? Dans cet exemple le but va être de gérer les données de 3 formulaires différents pour envoyer un message personnalisé à nos équipes. Nous utiliserons pour cela l'outil d'automatisation Make (Integromat) avec les modules Webflow et Slack.

1 - Ajoutez le module Webflow

Ajoutez le module Webflow à Make (Integromat) pour commencer votre automatisation.

Ajout du module Webflow dans l'interface integromat
Module Webflow dans Make (Integromat)

2 - Choisissez le déclencheur “Watch Event”

Ce webhook instantané va vous permettre de recevoir les données dès la soumission d’un nouveau formulaire.

Ajout d'un déclencheur de type webhook pour le module webflow
Déclencheur webhook

3 - Ajoutez votre site Webflow

Vous devez connecter Webflow à Integromat en sélectionnant le bon projet.

Sélection du projet webflow dans l'interface d'automatisation Integromat
Choix du site web Webflow

4 - Ajoutez un premier module Slack

Vous allez maintenant connecter Slack à Make (Integromat). Ajoutez un nouveau module slack et sélectionnez comme action “create a message”. L’objectif est d’envoyer un message personnalisé sur un chanel précis.

Ajout du module slack dans l'interface d'automatisation Integromat
Module Slack

5 - Paramétrez le premier module Slack

Sélectionnez le type de canal utilisé puis le canal ou la personne à qui vous allez envoyer le message.

Choix du type de canal Slack utilisé pour l'automatisation Integromat
Canal Slack

6 - Envoyez les données de votre premier formulaire

Il est maintenant temps d’envoyer les premières données à votre webhook Webflow. Pour cela, faite un clic droit sur le module webflow et cliquez sur “Run this module only”.

Allez ensuite sur votre site Webflow et remplissez un premier formulaire.

Attention 🚨 Chaque formulaire Webflow doit avoir un nom unique pour être bien identifié
Bouton pour lancer le module webflow depuis l'epace de travail integromat
Récupération des données dans le webhook

7 - Filtrez votre premier formulaire

Le système de filtrage Make (Integromat) est extrêmement puissant, et c’est lui qui va nous permettre d'identifier les différents formulaire. L’objectif ici est donc de dissocier vos formulaires pour ne pas mélanger les données.  Pour filtrer, cliquer sur la liaison entre les deux modules.

Clé pur ajouter un système de filtrage à l'automatisation Integromat
Ajout d'un filtre

8 - Renommez votre filtre

Il est important d’identifier chaque filtre en les renommant. Nous vous conseillons pour cela d’appeler le filtre par le nom de votre formulaire. Une fois tous vos formulaires ajoutés vous pourrez ainsi facilement repérer les automatisations propres à chacun d’entre eux.

Espace pour renommer le filtre depuis l'espace de travail Integromat
Renommer son filtre

9 - Ajoutez une condition de filtrage

Le filtrage permet d’indiquer à Make (Integromat) de prendre en compte les données uniquement dans certains cas. Ici, nous demanderons au webhook de faire passer les données si et seulement si il s’agit du premier formulaire. Voici comment procéder :

Ajout d'une balise nom de formulaire

Dans la première ligne : ajoutez la balise "name" de votre formulaire webflow. La balise "name" permettra d'indiquer au filtre de quel formulaire il s'agit, et ainsi de le rediriger vers le bon endroit de la chaine d'automatisation. C'est la raison pour laquelle il est important que chaque formulaire est un nom unique.

Ajout d'une balise nom dans le système de filtrage Integromat
Ajout d'une balise "name"

Ajout d'un type de filtrage

Sélectionnez une condition “Equal to” de type “Text operators”. Celle-ci indique au filtre qu'il faudra que le contenu texte de la balise "name" corresponde exactement au formulaire indiqué pour cette partie de la chaine.

Ajout d'un type de filtrage text "equal to"
Type de filtrage "Equal to"

Ajout d'une condition de filtrage

Indiquez le nom de votre formulaire pour que le filtre envoie uniquement les données de ce formulaire vers cette partie de l'automatisation.

Ajout du nom du formulaire dans le système de filtrage integromat
Condition de filtrage

10 - Balisez les modules suivants

Vous pouvez maintenant baliser les modules suivants avec les données du premier formulaire. Nous paramétrons ici le message personnalisé dans Slack.

Ajout des différentes balises webflow dans le module slack sur l'espace de travail Integromat.
Balisage des modules suivant de la chaine

11 - Ajoutez d’autres modules

Maintenant que votre premier formulaire est filtré pour prendre un chemin précis et s’adresser à une certaine partie de la chaine, vous pouvez recommencer cette opération avec d’autres formulaires :

1 - Ajoutez un autre module

2 - Faites tourner le webhook Webflow

3 - Remplissez un autre formulaire

4 - Filtrez à l’entrée du workflow avec le nom du nouveau formulaire

5 - Balisez les modules suivants

Chaine d'automatisation avec formulaires Webflow multiples sur l'espace de travail Integromat
Automatisation avec formulaires multiples Webflow
projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop