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
Les paramètres spécifiques selon les champs préconfigurés
Etape 4 : Paramètres avancés du formulaire
Double bouton du formulaire
Configurer des champs conditionnels
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 d’auto-complétion du formulaire (cela permet au participant de renseigner automatiquement ses informations. Les paramètres d’auto-passage du formulaire permettent ainsi de préremplir le formulaire à partir de données déjà connues.)
Lors de l’activation de cette option, vous devez tout d’abord sélectionner la provenance des données. Plusieurs sources sont disponibles, telles qu’un SDK/URL, une opération, la reconnaissance du participant ou d’autres modes de récupération des données.
Une fois la provenance définie, vous devrez choisir la méthode de fonctionnement :
Auto-complétion du formulaire : le formulaire est automatiquement prérempli à l’aide des données récupérées. Ces informations peuvent provenir d’un lien de jeu configuré avec de l’auto-fill, d’un SDK, d’un parcours entre une opération mère et une opération fille ou encore de la reconnaissance d’une participation précédente, selon la source sélectionnée. Le formulaire reste visible et le participant peut vérifier ou modifier les informations affichées.
Auto-complétion et passage automatique du formulaire : le formulaire est prérempli puis validé automatiquement. Il n’est donc pas affiché au participant, qui est directement redirigé vers l’étape suivante du parcours.
📢 Lors de la mise en place de l’auto-complétion via un SDK ou L'URL, 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. Vous pouvez les copier afin de les récupérer plus facilement.
Liste des champs supportés par l’auto-fill
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 |
customer_number | Numéro client |
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 statistiques sur le backoffice.
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
Champ Numéro client
Champ IBAN
Champ BIC
Champ Magasin
📢 Attention : Lors de la configuration de votre formulaire, privilégiez l’utilisation des champs préconfigurés pour les informations telles que l’adresse e-mail, le prénom, le nom, etc., plutôt que des champs simples.
En effet, lors de l’export des participations, les champs simples ne seront pas reconnus comme des champs standards et apparaîtront sous forme de champs étendus (extend).
Par ailleurs, si vous devez collecter plusieurs fois un même type d’information (par exemple un nom de naissance et un nom marital), n’ajoutez pas plusieurs fois le même champ préconfiguré. Les données seraient écrasées, car elles seraient enregistrées dans le même champ.
Dans ce cas, nous vous recommandons d’utiliser un champ préconfiguré pour l’information principale (par exemple le nom) et un champ simple pour la seconde information (par exemple le nom marital). Les deux données seront ainsi enregistrées de manière distincte.
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
ASTUCE💡Lors de l'ajout des codes d'accès, deux possibilités s'offrent à vous : vous pouvez soit laisser la plateforme générer automatiquement les codes en définissant le nombre et le format souhaités, soit importer votre propre fichier CSV contenant les codes.
Pour que l'import soit valide, le fichier CSV doit obligatoirement contenir une ligne d'en-tête.
2. Les paramètres spécifiques selon les champs préconfigurés
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.
- L'option « E-mail généré automatiquement » permet de créer automatiquement une adresse e-mail pour chaque participant. Cette fonctionnalité simplifie le parcours lorsqu'il n'est pas nécessaire de collecter une véritable adresse e-mail.
Le champ E-mail reste présent sur le formulaire par défaut, mais vous pouvez choisir de le masquer si vous ne souhaitez pas qu'il soit visible par les participants.
ASTUCE 💡Le champ E-mail ne peut être ajouté qu'une seule fois dans le parcours de votre jeu. Il est indispensable pour les mécaniques d'instant gagnant, car il est obligatoire pour permettre la délivrance des dotations et l'envoi des communications aux participants.
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.
Champ Numéro client
- 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 IBAN et BIC
- 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 Magasin
- Possibilité de modifier le texte pour le label et le placeholder
- Possible de rendre obligatoire le champ
Vous pouvez configurer vos magasins en cliquant sur le bouton « + ». Deux méthodes d’ajout sont disponibles : l’import via un fichier CSV ou la création manuelle.
En cas d’ajout manuel, vous devez renseigner au minimum la région et l’emplacement du magasin. Vous pouvez également compléter les informations en indiquant le nom du magasin, son adresse, son code postal et sa ville afin de disposer d’une fiche magasin plus complète.
Une fois les magasins importés via un fichier CSV ou ajoutés manuellement, vous disposez d’une vue d’ensemble de l’ensemble des magasins configurés. Vous pouvez ainsi consulter facilement les informations de chaque magasin et vérifier que l’import ou la création a bien été effectué.
Etape 4 : Paramètres avancés du formulaire
Double bouton du formulaire
Il est désormais possible de configurer deux types de validation du formulaire :
une soumission avec acceptation de l’opt-in
une soumission classique du formulaire.
Pour mettre en place une soumission avec acceptation de l’opt-in, ajoutez un bouton de soumission sur votre formulaire, puis associez-lui le champ checkbox correspondant. Ce champ peut être visible ou masqué sur le formulaire selon vos besoins.
Une fois le bouton associé au champ checkbox, si le participant valide le formulaire en cliquant sur ce bouton, la valeur de la case à cocher sera automatiquement enregistrée. Vous pouvez ainsi gérer plusieurs actions de soumission au sein d’un même formulaire, avec ou sans acceptation de l’opt-in.
2. Configurer des champs conditionnels
Il est désormais possible de définir des conditions d'affichage sur les champs d'un formulaire.
Cette fonctionnalité permet d'afficher ou de masquer dynamiquement certains champs en fonction des réponses du participant. Les conditions se configurent directement depuis l'éditeur de formulaire.
Lorsque vous cliquez sur l'icône permettant d'ajouter une condition d'affichage, une fenêtre de configuration s'ouvre.
Vous pourrez alors sélectionner le champ du formulaire sur lequel appliquer la condition, puis choisir l'opérateur parmi les options suivantes : est rempli, est vide ou est égal à. Si vous sélectionnez est égal à, il vous suffira de renseigner la valeur attendue.
Pour le champ Date de naissance, plusieurs opérateurs sont disponibles pour configurer vos conditions : est égal à, est supérieur à, est inférieur à, est supérieur ou égal à et est inférieur ou égal à.
Enfin, choisissez le champ à afficher lorsque la condition est remplie.
Depuis l'éditeur de formulaire, vous pouvez également choisir d'afficher les champs conditionnels. Cette option vous permet de visualiser l'ensemble des champs configurés et d'optimiser la mise en page ainsi que l'édition de votre formulaire.
