Un paramètre d’URL permet de transmettre des données à une page web via un lien. Vous pouvez utiliser les paramètres d’URL pour pré-remplir des données connues de votre audience, comme son numéro de téléphone, suivre différents indicateurs dans des services comme Google Analytics ou Google Ads, ou même utiliser l’API Conversions de Facebook (la nouvelle version du Pixel Facebook).
Nous expliquons ici comment transmettre des paramètres d’URL à l’aide de champs masqués, capturer des valeurs UTM (supports, sources, campagnes de trafic, etc.) et pré-remplir automatiquement les champs d’un formulaire.
Pré-remplir les champs d’un formulaire via des paramètres d’URL
Commencez par ouvrir la page de l’éditeur de formulaire. Cliquez sur un champ, puis ajoutez un ID d’alias valide dans le menu latéral contenant les données du champ. L’ID doit contenir uniquement des lettres latines et des chiffres, sans espace ni autre caractère, à l’exception du tiret bas.
Le formulaire utilisé dans l’image ci-dessous est un bon de commande en plusieurs étapes, et je souhaitais accorder une remise uniquement à un groupe précis de mes clients.
Pour cela, j’ai ajouté au formulaire un champ de texte court servant de code promo. J’ai ensuite attribué un ID d’alias à ce champ.
Après avoir enregistré le formulaire, copiez l’URL depuis la fenêtre contextuelle et ajoutez à la fin l’ID d’alias avec la valeur souhaitée.
Elle doit respecter exactement le format des paramètres d’URL, comme dans l’exemple ci-dessous :
https://formaloo.net/6zjqj?discount_code=winterOff
Je peux maintenant partager cette URL avec le groupe de clients à qui je voulais accorder une remise avec le code winterOff.
Lorsqu’ils ouvrent le formulaire, le champ de remise est automatiquement rempli avec winterOff.
Même si votre formulaire est intégré à votre site, vous pouvez toujours utiliser cette fonctionnalité. Il suffit d’ajouter le paramètre discount_code=winterOff à l’URL du site hôte, comme ceci :
https://www.myblog.com/post=12?discount_code=winterOff
Pré-remplir plusieurs champs
Vous pouvez ajouter autant de paramètres d’URL que nécessaire à l’URL du formulaire pour pré-remplir plusieurs champs à la fois :
https://formaloo.net/6zjqj?discount_code=winterOff&city=tallinn&zipCode=10111
Pré-remplir un champ Linked row
Vous pouvez pré-remplir un champ Linked row pour qu’une ligne précise du formulaire lié soit déjà sélectionnée à l’ouverture de votre formulaire.
ℹ️ Vous ne pouvez pré-remplir un champ Linked row qu’avec une ligne qui existe déjà dans le formulaire lié. Il n’est pas possible de créer une nouvelle ligne via l’URL.
➔ Pour le configurer :
1. Vérifiez que votre champ Linked row possède un alias (ID de champ), par exemple client :
2. Ouvrez le formulaire lié et trouvez la soumission à utiliser pour le pré-remplissage. Copiez l’ID de la ligne depuis la barre d’adresse du navigateur : il s’agit de la valeur qui suit row= :
3. Ajoutez-le à l’URL de votre formulaire sous forme de paramètre (/form_slug?linked_row=row_id) :
https://formaloo.net/6zjqj?client=syVhYiXUuL2NCmRemIO7
Lorsqu’un répondant ouvre cette URL, cette ligne est déjà sélectionnée dans le champ Linked row :
Le répondant peut toujours supprimer la ligne pré-remplie et en choisir une autre. Si vous souhaitez l’en empêcher, voici comment faire :
➔ Comment rendre la ligne pré-remplie non modifiable
1. Définissez le champ Linked row sur Invisible dans ses paramètres. Le champ ne sera pas visible dans le formulaire, mais le pré-remplissage fonctionnera toujours.
2. Ensuite, dans le panneau de droite des paramètres du champ Linked row, ajoutez des champs de recherche (lookup fields). Ils récupèrent des champs précis de la soumission liée et les affichent en lecture seule : les répondants voient les informations mais ne peuvent pas les modifier.
3. Vous pouvez aussi attribuer des ID à vos champs de recherche et reporter leurs valeurs ailleurs dans votre formulaire :
Lorsque vous partagez l’URL personnalisée, la ligne liée invisible est pré-remplie avec la ligne sélectionnée et les champs de recherche affichent ses informations, visibles pour le répondant mais non modifiables :
💡 Vous pouvez aussi configurer cela à l’aide de l’IA et des connecteurs MCP.
Utiliser les paramètres d’URL dans les widgets de site web
Les ID d’alias utilisés comme paramètres d’URL fonctionnent sur tous les formulaires : widgets, formulaires en plusieurs étapes ou en une seule étape. Mais il existe une meilleure approche pour les widgets : ajouter les ID d’alias comme propriété du script du widget vous permet de gérer les valeurs des champs plus efficacement.
Voici un exemple de code de widget avec un ID d’alias. Commencez par accéder à la page de partage ou récupérez le code du widget dans la fenêtre d’enregistrement de l’éditeur de formulaire.
Ajoutez ensuite les ID d’alias, au format des paramètres d’URL, à alias_fields, en tant que nouvelle propriété des paramètres du widget :
<!-- Formaloo Widget --> <div data-widget-form="formaloo-widget" data-prop-slug="yKtEiEOL" data-prop-type="side-widget" dir="ltr" style="font-size:14px;line-height: normal;"> <script type="text/props"> { "position": "right", "once_per_user": false, "alias_fields": "discount_code=winterOff" } </script> </div> <script async src="<https://widget.formaloo.net/script.js>"></script> <!-- End Formaloo Widget -->
Cette méthode vous permet d’utiliser les variables et fonctions locales du site hôte pour définir les valeurs initiales des champs de votre formulaire.
Utilisez ce guide pour définir la valeur des ID d’alias :
Type de champ | Valeurs valides |
Text | texte (ex. winteroff) |
adresse e-mail valide | |
phone | nombre |
number | nombre |
long text | texte |
website | URL valide |
time | heure valide au format 24 h (ex. 13:50) |
date | date valide, toujours au format YYYY-MM-DD, ex. : 2025-09-25, quel que soit le format de date défini pour le champ |
star | Nombre entre 1 et 5 |
score | Nombre entre 0 et 10 |
CSAT | Nombre entre 1 et 5 |
like/dislike | 1 pour « j’aime », -1 pour « je n’aime pas » |
hidden | texte ou nombre |
Utiliser les paramètres d’URL dans un script
Vous pouvez désormais utiliser des paramètres d’URL dans le code Script qui sert à intégrer votre formulaire. Commencez par accéder à la page de partage ou récupérez le code Script dans la fenêtre d’enregistrement de l’éditeur de formulaire.
Copiez le code et collez-le dans la page où vous souhaitez intégrer votre formulaire :
data-alias-fields="[email protected]&message=code hello"
Votre script doit alors ressembler à ceci :
<div id="formz-wrapper" data-formz-slug="your-form-slug" data-formz-type="simple" data-alias-fields="[email protected]&message=code hello" ></div> <script src="https://formaloo.me/istatic/js/main.js"></script>
Comment utiliser des champs masqués avec les paramètres d’URL
Grâce aux ID d’alias, vous pouvez ajouter à vos formulaires des champs masqués avec des valeurs. Le champ n’est pas affiché à l’utilisateur, mais la valeur que vous lui attribuez est envoyée avec ses réponses.
C’est pratique pour enregistrer des données supplémentaires, comme la session de l’utilisateur, l’URL d’origine du formulaire (par exemple les UTM) ou toute autre information utile.
Pour cela, ajoutez un champ masqué (hidden) à votre formulaire depuis la page de l’éditeur.
Donnez-lui ensuite un titre et un ID d’alias. La suite est identique à ce que j’ai décrit plus haut : ajoutez son ID d’alias avec sa valeur sous forme de paramètres d’URL à l’URL du formulaire et partagez-la avec vos utilisateurs ou, s’il s’agit d’un widget, ajoutez-le au script du widget.
Le widget CSAT du tableau de bord Formaloo est un bon exemple de gestion des données d’analyse de nos utilisateurs avec des champs masqués.
Nous envoyons l’e-mail et le nom de l’utilisateur avec les réponses du widget afin d’améliorer le support et la satisfaction client.
Voici un exemple d’utilisation du widget et de champs masqués avec React dans le tableau de bord Formaloo :
import { useEffect } from "react" import { useUser } from 'src/use'; const CsatEmbeddedWidget = () => { const { user } = useUser(); useEffect(() => { const script = document.createElement('script'); script.src = "<https://widget.formaloo.ne/script.js>"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []) const widgetProps = { "position": "left", "once_per_user": false, "alias_fields": `email=${user.email}&first_name=${user.name}` } return ( <> {/* Formaloo Widget */} <div data-widget-form="formaloo-widget" data-prop-slug="eOysiTH7" data-prop-type="side-widget" dir="ltr" style={{ fontSize: 14, lineHeight: 'normal' }}> <script type="text/props"> {JSON.stringify(widgetProps, null, 2)} </script> </div> </>) } export default inject("profileStore")(CsatEmbeddedWidget)
Vous pouvez également utiliser des champs masqués pour capturer les valeurs UTM ou GCLID depuis votre formulaire Formaloo et les envoyer vers votre plateforme de données clients ou l’application de votre choix.
💡 Comment utiliser les paramètres d’URL pour transmettre des données entre formulaires :