Comment pré-remplir des formulaires Webflow avec les paramètres URL grâce à Finsweet ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment pré-remplir des champs de formulaire et des éléments texte à partir des paramètres URL avec Finsweet Attributes Query Params.

Comprendre le cas d'usage

Query Params lit les paramètres de l'URL (ex: ?prenom=Jean&email=jean@exemple.com) et les injecte automatiquement dans les champs correspondants de votre formulaire ou dans des éléments texte. Très utile pour les tunnels de conversion multi-étapes, les emails personnalisés avec liens pré-remplis, ou les landing pages avec données UTM.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-queryparams@1/queryparams.js" defer>script>

2. Marquez vos champs à pré-remplir

Sur chaque Input de formulaire que vous voulez pré-remplir, ajoutez fs-queryparams-element="[nom-du-parametre]". Par exemple, pour pré-remplir un champ email depuis l'URL ?email=jean@exemple.com, ajoutez fs-queryparams-element="email" sur l'Input email.

3. Pré-remplissez des éléments texte

Vous pouvez aussi injecter des valeurs d'URL dans des Text Blocks ou des Headings. Ajoutez simplement fs-queryparams-element="[nom-du-parametre]" sur n'importe quel élément texte. Utile pour personnaliser le titre d'une landing page avec le nom de l'entreprise du visiteur : ?company=Gemeos → <h1>Bienvenue chez Gemeos</h1>.

4. Définissez des valeurs par défaut

Si un paramètre peut être absent de l'URL, ajoutez fs-queryparams-default="Votre prénom" pour afficher une valeur de fallback. Indispensable pour les éléments texte affichés publiquement.

Conclusion

Query Params personnalise l'expérience utilisateur à partir des données d'URL. Cas d'usage :

• Formulaires pré-remplis depuis des emails de nurturing personnalisés
• Landing pages avec nom de l'entreprise du visiteur dans le titre
• Tunnels multi-étapes qui transfèrent les données entre les pages