Comment pré-remplir un formulaire Webflow depuis les paramètres URL et UTM ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment pré-remplir automatiquement les champs d'un formulaire Webflow depuis les paramètres UTM ou les paramètres d'URL.

Exemple

Cas d'usage

Ce script est particulièrement utile pour les tunnels de conversion multi-étapes : vous passez les données d'une page à l'autre via l'URL, et chaque formulaire est pré-rempli automatiquement. Également utile pour les campagnes email personnalisées : un lien avec ?prenom=Jean&entreprise=Acme ouvre un formulaire déjà partiellement rempli, réduisant la friction.

1. Configurez vos champs dans Webflow

Pour chaque champ à pré-remplir, ajoutez un custom attribute name ou un id correspondant aux paramètres URL. Exemple : sur le champ Email, ajoutez name="email". Sur le champ Prénom, ajoutez id="prefill-prenom".

2. Masquez les champs UTM (optionnel)

Pour les champs UTM que vous voulez envoyer avec le formulaire sans les montrer à l'utilisateur, créez des champs input type="hidden" dans un Embed. Ils seront remplis par le script et envoyés avec la soumission.

<input type="hidden" name="utm-source" id="utm-source">
<input type="hidden" name="utm-campaign" id="utm-campaign">

3. Ajoutez le script dans Footer code

Personnalisez le mapping selon les paramètres que vous utilisez dans vos URLs.

(function() {
  var params = new URLSearchParams(window.location.search);
  var mapping = {
    'utm_source':   'input[name="utm-source"], #utm-source',
    'utm_medium':   'input[name="utm-medium"], #utm-medium',
    'utm_campaign': 'input[name="utm-campaign"], #utm-campaign',
    'utm_content':  'input[name="utm-content"], #utm-content',
    'utm_term':     'input[name="utm-term"], #utm-term',
    'prenom':       'input[name="prenom"], #prefill-prenom',
    'email':        'input[name="email"], #prefill-email',
    'entreprise':   'input[name="entreprise"], #prefill-entreprise',
  };

  Object.keys(mapping).forEach(function(param) {
    var value = params.get(param);
    if (!value) return;
    document.querySelectorAll(mapping[param]).forEach(function(el) {
      el.value = value;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    });
  });
})();

Conclusion

Le pré-remplissage depuis les UTM réduit la friction et améliore le taux de complétion des formulaires. Cas d'usage :

• Emails de nurturing avec lien vers un formulaire de démo pré-rempli
• Campagnes LinkedIn Ads avec prénoms et entreprises pré-remplis
• Tunnels multi-étapes qui transfèrent les données entre les pages

Paramètres UTM détectés dans l'URL actuelle

Aucun paramètre UTM dans l'URL actuelle. Ajoutez ?prenom=Jean&utm_source=linkedin à l'URL pour tester.