Tracking avance des formulaires Webflow avec GTM : scripts et data layers sans thank-you page

Pourquoi le déclencheur Form Submit natif de Google Tag Manager ne fonctionne pas bien sur Webflow

Lorsque vous installez Google Tag Manager sur un site Webflow et configurez un déclencheur de type Form Submit, il est naturel de penser que cela suffira pour mesurer les soumissions de formulaires. En réalité, cette approche pose plusieurs problèmes concrets qui compromettent la fiabilité du suivi.

Webflow n'utilise pas la soumission HTML standard

Le déclencheur Form Submit de GTM fonctionne en interceptant l'événement natif submit du navigateur, qui se produit lorsqu'un formulaire HTML est soumis de manière classique, avec rechargement de page ou redirection. Webflow, quant à lui, traite les soumissions de formulaires via une requête AJAX asynchrone. Le formulaire est envoyé en arrière-plan sans rechargement de la page, ce qui signifie que l'événement submit du navigateur peut ne jamais se déclencher, ou se déclencher avant que la soumission ne soit réellement complétée et validée par les serveurs de Webflow.

Le résultat, des conversions comptées à tort ou pas du tout

Selon la configuration du site et la version du navigateur, le déclencheur Form Submit de GTM peut :

• Ne jamais se déclencher, faisant manquer toutes les soumissions réelles.
• Se déclencher avant que la requête AJAX ne soit complétée, comptant des conversions même si le formulaire retourne une erreur côté serveur.
• Se déclencher plusieurs fois sur la même page en cas d'interactions répétées, gonflant artificiellement les chiffres.

L'absence de page de remerciement complique encore les choses

Sur de nombreux sites Webflow, les formulaires affichent un message de succès sur la même page plutôt que de rediriger vers une URL de confirmation. Cela retire la possibilité de déclencher un tag GTM sur le chargement d'une page de confirmation, qui est pourtant la méthode la plus simple et la plus fiable dans d'autres contextes. Il faut donc détecter l'état de succès du formulaire directement dans le code de la page.

La bonne approche, écouter l'événement de succès Webflow et pousser un data layer

Webflow expose un événement JavaScript natif appelé formSuccess qui se déclenche uniquement lorsque la soumission du formulaire a été traitée avec succès par les serveurs de Webflow. C'est cet événement qu'il faut intercepter pour assurer un suivi précis.

Étape 1, ajouter le script d'écoute sur votre site Webflow

Rendez-vous dans les paramètres de votre site Webflow, puis dans la section Custom Code. Ajoutez le script suivant dans la zone Before </body> tag. Ce script peut aussi être ajouté directement dans un embed HTML sur les pages concernées si vous souhaitez le limiter à certains formulaires spécifiques.

<script>Webflow.push(function() { $('form').on('submit', function(e) { var formEl = this; $(formEl).one('formSuccess', function() { var formName = $(formEl).attr('data-name') || $(formEl).find('[name]').closest('form').attr('id') || 'formulaire_inconnu'; window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'form_submit_success', form_name: formName, form_location: window.location.pathname }); }); });});</script>

Ce script attend que Webflow soit initialisé, puis attache un écouteur à chaque formulaire de la page. Lorsqu'une soumission réussie est détectée via l'événement formSuccess, il pousse un objet dans le data layer avec trois informations, le nom de l'événement (form_submit_success), le nom du formulaire tel qu'il est défini dans Webflow, et le chemin de la page sur laquelle la soumission a eu lieu.

Comment récupérer le nom du formulaire dans Webflow

Dans l'interface Webflow, chaque formulaire possède un champ appelé Form Name dans le panneau des paramètres du formulaire (volet droit, onglet Settings). Ce nom est exposé dans le DOM via l'attribut data-name sur la balise <form>. Le script ci-dessus lit cet attribut automatiquement, ce qui permet de distinguer plusieurs formulaires sur un même site ou une même page.

Étape 2, créer le déclencheur dans GTM

Dans Google Tag Manager, créez un nouveau déclencheur de type Custom Event. Dans le champ Event Name, saisissez exactement form_submit_success. Ce déclencheur s'activera chaque fois que le script pousse cet événement dans le data layer.

Si vous souhaitez distinguer différents formulaires, vous pouvez ajouter une condition supplémentaire sur la variable form_name. Pour cela, créez une variable de type Data Layer Variable dans GTM avec le nom de variable form_name, puis ajoutez ce filtre à votre déclencheur.

Étape 3, configurer les variables du data layer dans GTM

Pour exploiter pleinement les données poussées dans le data layer, créez les variables suivantes dans GTM :

• Variable de type Data Layer Variable, nom GTM, dlv_form_name, nom de variable data layer, form_name.
• Variable de type Data Layer Variable, nom GTM, dlv_form_location, nom de variable data layer, form_location.

Ces variables pourront ensuite être utilisées dans vos tags Google Analytics 4, Google Ads ou toute autre destination pour enrichir les événements de conversion avec des informations contextuelles sur le formulaire soumis.

Étape 4, créer le tag de conversion dans GTM

Créez un tag de type Google Analytics, GA4 Event. Donnez-lui le nom d'événement generate_lead (recommandé par Google pour les conversions de formulaires) ou un nom personnalisé selon votre convention de nommage. Associez ce tag au déclencheur form_submit_success créé à l'étape 2. Ajoutez les paramètres d'événement suivants pour enrichir la conversion :

• Paramètre, form_name, valeur, la variable GTM {{dlv_form_name}}.
• Paramètre, form_location, valeur, la variable GTM {{dlv_form_location}}.

Cas particulier, formulaires avec plusieurs étapes ou champs conditionnels

Si votre formulaire Webflow est divisé en plusieurs étapes affichées successivement via JavaScript, l'événement formSuccess ne se déclenchera qu'à la soumission finale, ce qui est le comportement souhaité. Vous n'avez donc pas à modifier le script pour les formulaires multi-étapes gérés par Webflow Interactions ou Finsweet Attributes.

En revanche, si vous utilisez un formulaire entièrement personnalisé qui ne passe pas par le système natif de Webflow (par exemple, un formulaire intégré via un embed Typeform, HubSpot ou un autre outil), l'événement formSuccess de Webflow ne se déclenchera pas. Il faudra alors adapter le script pour écouter les événements propres à ces outils.

Comment vérifier que le suivi fonctionne correctement

Avant de publier vos modifications, testez votre configuration avec le mode Preview de GTM. Ouvrez votre site en mode Preview, soumettez un formulaire de test, puis vérifiez dans le panneau GTM Preview que l'événement form_submit_success apparaît bien dans la liste des événements détectés et que vos variables form_name et form_location contiennent les valeurs attendues.

Vous pouvez également vérifier que le data layer est bien alimenté en ouvrant la console du navigateur après une soumission et en tapant dataLayer pour afficher l'ensemble des objets qui y ont été poussés.

Conclusion

Le déclencheur Form Submit natif de GTM n'est pas conçu pour les soumissions AJAX asynchrones utilisées par Webflow. Pour un suivi fiable et précis sans page de remerciement, la bonne méthode consiste à écouter l'événement formSuccess de Webflow et à pousser manuellement un événement dans le data layer. Cette approche garantit que seules les soumissions réellement réussies sont comptées, que les données contextuelles sont disponibles pour la segmentation, et que votre reporting de conversions reflète la réalité.