SOMMAIRE
Etape 1 : Conception du formulaire
L’élément formulaire
Ajout et positionnement des champs
Etape 2 : Les différents champs
Type de champs
Champs préconfigurés
Etape 3 : Paramétrage des champs
Les paramètres spécifiques selon le type de champs
Etape 1 : Conception du formulaire
L’élément formulaire
Sélectionnez depuis la liste des éléments le formulaire à ajouter sur votre page.
Sur le formulaire, vous pourrez accéder aux paramètres d’affichage qui vous permettront de désactiver l’apparition des labels ( def : représente un intitulé à un champ du formulaire ) et des placeholders ( def: est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ du formulaire).
Vous aurez accès aussi aux paramètres qui permettent de restreindre les emails temporaires ( def : la restriction des emails temporaires, permet de bloquer la soumission du formulaire lorsque des domaines comme yopmail… sont utilisés) et à l’option qui permet de passer automatiquement le formulaire (def : Les paramètres d’auto-passage du formulaire permettent au participant de saisir automatiquement ses informations) . Lors de l’activation de cette option, vous devrez choisir entre l’auto-complétion du formulaire, autrement dit le formulaire est auto-rempli grâce à de l’auto-fill configuré sur le lien du jeu ou sur le code sdk ou bien encore sur un parcours opération mère/fille. Ou alors l’auto-complétion et le passage du formulaire dans ce cas là, le formulaire est automatiquement rempli et non visible auprès des participants.
📢 Lors de la mise en place de l’auto-complétion, il faudra que vous ajoutiez soit dans les paramètres avancés de votre code sdk ou soit dans l’url du jeu des attributs en plus d’activer l’option. Vous devrez récupérer l’identifiant des champs courants voir liste ci-dessous, par contre pour les champs extend, le format doit être “extend_” suivi du hash_id du champ.
exemple : ?email=test@test.fr&firstname=Test&extend_kZq42b=magasin,
Pour récupérer l’identifiant des champs extend, il vous suffit de vous rendre dans la liste des éléments et vous retrouverez les hash_id des champs de votre formulaire.
Liste des champs supportés par l’autofill
Nom | Description |
Email du participant | |
firstname | Prénom du participant |
lastname | Nom du participant |
address | Adresse du participant |
city | Ville du participant |
postal_code | Code postal du participant |
birthday | Anniversaire du participant |
phone | Téléphone du participant |
access_codes | Code d’accès |
extend_kZq42b | Le format doit être “extend_” suivi du hash_id du champ.
Les types de champs extend concernés sont :
|
Vous aurez la main sur la modification des messages d’erreurs des champs du formulaire. De plus vous pourrez personnaliser l’apparence du formulaire en définissant l’espacement entre les champs et les colonnes.
Vous pourrez changer la couleur, la hauteur, la typographie des textes de chaque composant du formulaire : champs, label, placeholders, erreurs
Astuce💡 Au sein de votre parcours, il est possible d’ajouter plusieurs pages formulaires. Il vous suffit d’ajouter une page simple et d’insérer à l’intérieur de la page un élément formulaire.
2. Ajout et positionnement des champs
Pour insérer des nouveaux champs dans votre formulaire, nous vous proposons de cliquer sur le bouton représenté par l’icône “+” pour sélectionner le champ parmi la liste et le glisser à l’intérieur du formulaire.
Puis, vous pourrez modifier la position des champs en le sélectionnant et en le déplaçant à l’intérieur du formulaire.
💡Astuce : Afin de structurer votre formulaire, vous pouvez créer un formulaire en plusieurs colonnes . Il vous suffit de déplacer le champ pour le mettre à côté d’un autre champ.
Nous recommandons pour le format desktop un formulaire à 3 colonnes maximum tandis que pour le mobile 2 colonnes maximum.
Etape 2 : Les différents champs
Type de champs
Dans la liste que nous vous proposons, vous retrouverez certains types de champs que vous pourrez personnaliser :
Champ Simple
Champ import ( utilisé pour permettre aux participants d’ajouter une preuve d’achat lors d’un jeu avec obligation d’achat, ou des images … Possible d’ajouter un seul champ sur son formulaire )
Champ checkbox ( un champ unique avec une case à cocher)
Champ choix ( un champ pour mettre de sélectionner une à plusieurs réponses )
Champ sélection ( un champ représenté par un sélecteur pour permettre de choisir une réponse)
Champ date
Champ code d’accès ( permettre d’indiquer le code d’accès)
💡 Astuce : Pour ajouter un champ optin et un champ règlement sur votre formulaire, il faudra que vous utilisez un champ de type checkbox .
Concernant l’optin, vous devrez activer l’option lors de la configuration pour que les données remontent bien dans les exports.
2. Champs préconfigurés
Outre les différents champs à configurer, nous vous proposons notamment des champs préconfigurés à insérer dans votre formulaire.
Champ téléphone
Champ code postal
Champ email (ce champ peut-être installé qu’une seule fois sur un formulaire du jeu)
Champ civilité
Champ prénom
Champ date de naissance
Champ nom
Champ adresse
Champ ville
📢 Attention : Lors de la configuration de votre formulaire, veuillez utiliser des champs préconfigurés que des champs simples pour des champs de type Email, Prénom.. Sinon lors de l'exportation, les noms des champs ne seront pas pris en compte et apparaîtront comme des champs extend.
Pour chaque type de champ vous retrouverez des paramètres communs tels que ajustements des espacements, personnalisation de l’apparence des champs, des labels, des placeholders et des messages d’erreurs.
Il sera possible d’ajouter des regex sur les champs (ce sont des outils techniques qui permettent de contrôler le format des données renseignées dans le formulaire)
❔Consultez ici l’article sur comment rédiger vos expressions régulières ?
Puis, il existe des configurations spécifiques à chaque typologie de champ.
Etape 3 : Paramétrage des champs
Les paramètres spécifiques selon le type de champs
Champ Simple
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage ( l’option de dédoublonnage permet de créer un “profil” du participant à sa première soumission du formulaire. Le dédoublonnage pour qu’il soit fonctionnel doit être rattaché à l’identifiant unique qui est le champ email. Le dédoublonnage va bloquer la validation de la soumission si les données de la deuxième participation sont différentes. Le dédoublonnage à pour objectif de limiter l’usage de données différentes alors que c’est la même personne qui rejoue.)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ import
- Possibilité de modifier le texte pour le label et le placeholder et l’intitulé du bouton d’import
- Possible de rendre obligatoire le champ
Champ checkbox
- Ajout du texte du champ
- Possible de rendre obligatoire le champ
- Dans le cadre d’un champ optin, activer l’option optin
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ choix
- Modification du texte du label
- Possible de rendre obligatoire le champ
- Possible d’activer le choix multiple en définissant un minimum de réponses à cocher et un maximum de réponses à cocher.
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
- Ajout des différentes options du champ
Champ sélection
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
- Ajout des différentes options du champ
Champ date
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
- Configurer l’année minimale et l’année maximale
Champ code d’accès
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ et/ou unique
Champ téléphone
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage ( le champ participe au dédoublonnage de la participation autrement dit si le participant tente de rejouer en modifiant la donnée, il sera bloqué)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ code postal
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage ( le champ participe au dédoublonnage de la participation autrement dit si le participant tente de rejouer en modifiant la donnée, il sera bloqué)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ email
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage (l’option de dédoublonnage permet de créer un “profil” du participant à sa première soumission du formulaire. Le dédoublonnage pour qu’il soit fonctionnel doit être rattaché à l’identifiant unique qui est le champ email. Le dédoublonnage va bloquer la validation de la soumission si les données de la deuxième participation sont différentes. Le dédoublonnage à pour objectif de limiter l’usage de données différentes alors que c’est la même personne qui rejoue.)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Le champ email peut être ajouté qu’une seule fois sur le parcours du jeu.
Champ civilité
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Configuration des intitulés pour les civilités et d’activer l’option “non genré”
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ prénom et nom
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage ( l’option de dédoublonnage permet de créer un “profil” du participant à sa première soumission du formulaire. Le dédoublonnage pour qu’il soit fonctionnel doit être rattaché à l’identifiant unique qui est le champ email. Le dédoublonnage va bloquer la validation de la soumission si les données de la deuxième participation sont différentes. Le dédoublonnage à pour objectif de limiter l’usage de données différentes alors que c’est la même personne qui rejoue.)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
Champ date de naissance
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.
- Configurer l’année minimale et l’année maximale
Champ adresse et ville
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
- Possible d’activer le dédoublonnage (l’option de dédoublonnage permet de créer un “profil” du participant à sa première soumission du formulaire. Le dédoublonnage pour qu’il soit fonctionnel doit être rattaché à l’identifiant unique qui est le champ email. Le dédoublonnage va bloquer la validation de la soumission si les données de la deuxième participation sont différentes. Le dédoublonnage à pour objectif de limiter l’usage de données différentes alors que c’est la même personne qui rejoue.)
- Possibilité de rendre non modifiable et non visible le champ dans le cadre d’une auto-complétion du formulaire.