Passer au contenu principal
Didacticiel - Formulaire
Mis à jour il y a plus de 2 mois

Description

Le formulaire est le module qui permet de collecter les données des participants dans vos campagnes. C’est l’un des éléments les plus importants, et il doit être conçu avec soin pour encourager les utilisateurs à remplir les champs. Un formulaire bien pensé avec un design attrayant permet d'augmenter l’engagement et le taux de complétion.

Conception et graphismes

Avant de vous lancer dans la configuration de votre formulaire, nous vous conseillons de consulter l'article Créer le graphisme de votre campagne et de télécharger le pack graphique général. Dans ce pack, vous trouverez des notices graphiques générales et des bonnes pratiques pour la création de votre formulaire. Des templates PSD sont également disponibles pour vous aider à concevoir facilement les différents éléments graphiques nécessaires.

Personnalisation de l'arrière-plan

  • Image de fond : importez votre fond d'écran Desktop en cliquant sur l'icône "+". Pour connaitre les spécifications graphiques des fonds, veuillez vous référer à l'article Réaliser le graphisme de vos jeux.

  • Couleur de fond : vous avez aussi la possibilité d'ajouter une couleur de fond unie qui entourera votre page - vous pouvez laisser la couleur de base ou choisir d'uniformiser votre campagne, avec une couleur qui rappelle votre marque ou vos pages de jeu par exemple.

Configuration du formulaire : Email ou Mobile

  • Authentification des utilisateurs via :

    • Email / Mobile : Activer cette option permet de restreindre l'inscription de chaque participant à une seule adresse email ou un seul numéro de téléphone mobile, qui sera automatiquement reconnu si le participant revient sur la campagne pour rejouer. Notez que les jeux à gains instantanés nécessitent une authentification par email ou par mobile pour fonctionner. Nous recommandons donc de laisser ce paramètre activé.

    • Aucune : Si l'option est désactivée, une nouvelle ligne utilisateur sera créée à chaque soumission du formulaire. Cela signifie qu'un même email pourrait générer plusieurs entrées si le formulaire est soumis plusieurs fois.

  • Pré-remplissage automatique des champs : Si vous avez opté pour un connecteur SSO sur votre campagne, vous pouvez activer cette option pour que les informations récoltées à propos de votre utilisateur soient automatiquement intégrées à votre formulaire dans les champs correspondants. L'utilisateur devra donc seulement cocher la case d'acceptation du règlement et valider le formulaire pour pouvoir accéder au jeu. À savoir : ce paramètre peut aussi servir à pré-remplir votre/vos champ(s) avec des données que vous choisissez. Consultez l'article dédié pour plus d'informations.

  • Après validation, rediriger vers : Vous devez préciser vers quelle page le formulaire redirigera une fois que l'utilisateur aura appuyé sur le bouton "Valider" ou "Valider avec Opt-in".

Contenu du formulaire

  • Choisir un template : Vous disposez de 4 templates de formulaire pour commencer votre configuration. Étant donné les nombreuses options de personnalisation, il est recommandé de créer vos propres templates pour gagner du temps lors de vos futures campagnes. Pour créer un template, cliquez sur "Ajouter un template" dans cette section et donnez-lui un nom. Vos paramètres actuels seront alors sauvegardés.

  • Sélection des champs : Les champs sont regroupés selon le type de données à recueillir. Pour ajouter un champ, cliquez simplement sur celui désiré, il sera automatiquement placé en bas des champs déjà configurés. Vous pourrez ensuite le déplacer librement sur le formulaire.

💡 Astuce : Vous pouvez aussi ajouter un champ personnalisé pour répondre à un besoin précis. Il n'y a pas de limites au nombre de champs que vous pouvez créer.

Chaque champ dispose d'options avancées pour affiner sa configuration et minimiser les erreurs des participants. Par exemple, en cliquant sur le champ email, un menu s'ouvre vous permettant d'accéder à ces options avancées.

Pour améliorer la qualité des données collectées et augmenter le taux de complétion de votre formulaire, voici quelques recommandations concernant les options avancées :

  • Activer l'aide à la saisie : Cette option facilite la saisie des adresses email des participants et améliore leur qualité en fournissant des suggestions ou des validations en temps réel. Nous vous conseillons de l'activer pour le champ email.

  • Activer le filtrage de ce champ : Cette option permet de restreindre les inscriptions en fonction des adresses email. Vous pouvez soit spécifier des adresses email autorisées en les séparant par des points-virgules (;), soit autoriser uniquement les emails d'un domaine spécifique.

    • Exemple : Pour autoriser uniquement les emails de votre entreprise, entrez @mon-entreprise.com. Seuls les emails contenant ce domaine, comme @mon-entreprise.com, pourront s'inscrire.

  • Limiter le nombre de caractères autorisés : Cette option permet de restreindre le nombre de caractères que les participants peuvent entrer dans un champ. Elle est particulièrement utile pour les champs tels que le numéro de mobile et le code postal. Par exemple, vous pouvez limiter le champ "mobile" à 10 caractères et le champ "code postal" à 5 caractères. Cela aide à éviter les erreurs en s'assurant que les entrées respectent les formats standardisés.

  • Rendre ce champ obligatoire : Cette option permet de rendre un champ obligatoire, ce qui signifie que les participants doivent le remplir pour soumettre le formulaire. Nous recommandons d'activer cette option pour les champs "email" et "mobile" car ce sont des champs authentifiants essentiels. Cependant, il n'est pas conseillé de rendre tous les champs obligatoires, car cela peut décourager les utilisateurs et augmenter le taux d'abandon du formulaire si trop de champs sont requis.

  • Activer le filtrage par expression régulière : Cette option permet de s'assurer que les adresses saisies respectent un format précis en utilisant des expressions régulières (regex). En savoir plus.

  • Activer le texte d'erreur dédié sur ce champ : Cette option permet d'afficher un message d'erreur spécifique pour guider les participants. Par exemple, pour le champ email, vous pouvez afficher un texte d'erreur comme : "Veuillez entrer votre adresse email professionnelle se terminant par @entreprise.com."

Option Data+

Cette option permet de vérifier l'existence et la validité complète de l'adresse email saisie par le participant. Un score de fiabilité est attribué à chaque adresse email en fonction de sa vérification. En analysant ce score, vous pouvez constituer des bases de données de prospects plus fiables et de meilleure qualité. Pour activer cette option, contactez votre Account Manager. En savoir plus.

Apparence des champs

  • Police : Choisissez parmi les polices d'écriture par défaut ou importez votre propre police personnalisée. Assurez-vous que la police personnalisée s'affiche correctement sur la plateforme.

  • Taille : Choisissez la taille du texte dans votre formulaire parmi les tailles par défaut ou entrez une taille personnalisée. La taille par défaut est de 16 pixels.

  • Position des labels : Les labels peuvent être désactivés pour économiser de l'espace, ou bien positionnés à côté ou au-dessus des champs. Par défaut, "Aucun" est sélectionné pour maximiser l'espace, car les labels sont déjà intégrés dans les champs.

  • Couleurs du formulaire : Modifiez les couleurs des éléments du formulaire en fonction de leur état :

    • À l'affichage

    • À la sélection

    • En erreur

Pour chaque état, vous pouvez ajuster la couleur de fond des champs, des bordures, des encadrés, des labels et des placeholders. Par exemple, vous pouvez créer un effet de champ transparent en insérant le mot "transparent" dans le code HEX.

Champs transparents
  • Grouper les champs : En activant cette option, vous pouvez déplacer tous vos champs simultanément, ce qui facilite leur placement. Pour revenir à un déplacement individuel des champs, sélectionnez un champ et cliquez sur l'icône "Dissocier".

💡 Astuce : Dans l'état "En erreur", vous pouvez choisir entre des messages d'erreur personnalisés pour chaque champ ou un message unique pour tous les champs. Pour utiliser un message unique, activez le toggle "Afficher un message d'erreur unique" et personnalisez le texte à votre convenance. Cela est pratique pour les champs classiques et permet de gagner de l'espace entre les champs !

Configurer la version Mobile

Une fois votre campagne Desktop configurée, passez en vue Mobile afin d'importer les images de fond et de mettre en forme vos différentes pages pour ce support. Les paramètres des champs (sélection, couleurs, textes d'erreur, etc.) resteront identiques à ceux de la version Desktop. Si vous avez dissocié vos champs, vous pourrez les déplacer librement sur la page Mobile sans affecter la version Desktop.

Export des données

En exportant les données de votre campagne, vous pouvez accéder aux données récoltées via le formulaire. Certaines informations seront présentées comme suit :

  • 0 : l'utilisateur n'a pas accepté le champ

  • 1 : l'utilisateur a accepté le champ

  • Pas de données : l'utilisateur n'a pas interagi avec le champ

Description des données du formulaire

  • user_id : identifiant unique attribué à l'utilisateur sur la campagne

  • first_connexion : date de première connexion à la campagne

  • last_connexion : date de dernière connexion à la campagne

  • timezone : fuseau horaire de l'utilisateur

  • form_lastname : nom de l'utilisateur

  • form_firstname : prénom de l'utilisateur

  • form_email : adresse email de l'utilisateur

  • form_reglement : champ règlement du formulaire

  • form_newsletter : champ newsletter du formulaire (optin)

  • language : langue de l'utilisateur (détectée à partir du navigateur)

  • campaign_language : langue de la campagne (varie en fonction des utilisateurs si la campagne est multilingue)

  • device : appareil utilisé par l'utilisateur pour se connecter à la campagne (desktop ou mobile)

  • media_key :

  • re_captcha_score : score attribué à l'utilisateur au recaptcha google. Plus d'informations dans le paragraphe Q&A de cet article.

  • cookies_consent_date : date à laquelle l'utilisateur a accepté les cookies pour la dernière fois

  • email_quality_code : si l'option Data+ est activée, ce score indique si l'email est considérée comme fiable par notre service de vérification. En savoir plus.

Exemple de formulaire

Cliquez ici pour voir la version mobile de ce formulaire

Q&A

Comment mettre en forme rapidement les champs du formulaire ?

Pour accéder aux raccourcis, cliquez sur le champ de votre choix et la fenêtre de configuration s'affichera, vous listant les options disponibles. Il existe une barre d'actions accessible directement dans la preview lors d'une sélection de plusieurs champs pour vous permettre de mettre en forme rapidement et simplement tous vos champs :

Barre d'actions
  1. Suppression des champs

  2. Groupement des champs (actif par défaut) / Dégroupement

  3. Alignement des champs sélectionnés : gauche / centré / droite

  4. Distribution verticale des champs sélectionnés

  5. Uniformiser l'ensemble des champs pour un rendu optimisé

Comment activer le Captcha ?

Le captcha est intégré par défaut et bloque automatiquement les bots. Le participant n'aura ni case à cocher, ni images à cliquer. Afin de renforcer le contrôle et la sécurité des adresses emails saisies sur le nouveau Formulaire, nous avons intégré le dernier captcha Google avec intégration d'un système de scoring pour chaque participant.

Le score donné va de 1 (pas de suspicion) à 0.0 (suspecté d'être un Bot). Ce score sera lié à l'adresse email, seul identifiant unique de chaque participant. Les adresses jugées de faible qualité (< 0.5) se verront présenter le Captcha de vérification (avec une case à cocher "je ne suis pas un robot"). Ce score est accessible sur les exports des participants, sous la colonne "re_captcha_score" :

Comment différencier le texte entre un champ et son label ?

Pour gagner de la place sur votre formulaire tout en aidant le participant à comprendre ce que vous attendez, nous recommandons de faire 2 textes distincts entre le label et le placeholder, comme dans cet exemple :

Cliquez sur un champ : sa fenêtre de configuration s'affichera, vous proposant alors d'écrire 2 textes différents si vous le souhaitez.

Votre agence
Avez-vous trouvé la réponse à votre question ?