La création de formulaire repose maintenant sur l'utilisation de composants basiques et de champs de formulaire.
Pour plus d'informations sur les composants basiques, consultez l'article 👉 Quels sont les composants du nouvel éditeur de design ?
Dans cet article nous vous présentons les champs de formulaire et leurs options.
Pour ajouter un champ, il suffit de cliquer sur les boutons ⨁. Vous pourrez ensuite accéder à l'onglet "Champs de formulaire" où vous trouverez tous les types de champs mis à votre disposition.
Pour accéder aux options d'un champ, cliquez sur l'icône [✏️] du champ souhaité. Vous pourrez ensuite modifier les options dans les 3 onglets disponibles:
Paramètres : options du champ
Style : gestion de différentes options de style (couleur de fond, espacements etc.)
Reponsive : gestion de la compatibilité avec les tailles d'écrans
Pour faciliter votre navigation dans cet article :
Les champs de formulaire
Voici les différents champs mis à votre disposition:
Champ texte
Champ texte multilignes
Champ mot de passe
Champ email
Liste déroulante
Champ date
Boutons radio
Case à cocher
Champ carte de crédit
Le type correspond au format de donnée à renseigner.
Champ texte
Ce champ permet à l'utilisateur de renseigner un texte court (maximum 255 caractères, sauts de ligne non autorisés).
Champ texte multilignes
Ce champ permet à l'utilisateur de renseigner un texte long (maximum 1000 caractères, sauts de ligne autorisés).
Champ mot de passe
Ce champ permet à l'utilisateur de renseigner un mot de passe.
Par défaut, les caractères sont remplacés par des points, mais l'utilisateur a la possibilité d'afficher les caractères en cliquant sur l'icône [👁 ] dans le champ.
Champ email
Ce champ permet à l'utilisateur de renseigner un email.
🚨 Nous vérifions que l'information renseignée par l'utilisateur correpond à un format d'email avant l'envoi du formulaire.
Champ liste déroulante
Ce champ permet à l'utilisateur de sélectionner une option dans une liste.
Champ date
Ce champ permet à l'utilisateur de renseigner une date.
🚨 Nous vérifions avant l'envoi que la date renseignée par l'utilisateur correspond au format choisi dans les options du formulaire.
Boutons radio
Ce composant vous permet d'ajouter un ou plusieurs boutons radio. Le lecteur pourra sélectionner une option.
Case à cocher
Ce composant vous permet d'ajouter une case à cocher. Le lecteur pourra la cocher ou la décocher.
Champ carte de crédit
🚨 L'utilisation de ce champ nécessite d'avoir un compte Stripe, solution de paiement en ligne (plus d'infos), et une petite intégration technique. Retrouvez la documentation technique ici.
Ce champ permet à l'utilisateur de renseigner un numéro de carte de crédit.
Stripe vérifie avant l'envoi du formulaire que le numéro de carte renseigné soit valide.
Les paramètres de champ
Label
Le label correspond au "titre" du champ qui s'affiche pour l'utilisateur. Il est important qu'il soit clair pour vos lecteurs qui devront remplir le formulaire.
Placeholder
Le placeholder est un texte générique qui s'affiche dans le champ avant la saisie. Il permet par exemple d'aguiller l'utilisateur sur le type de donnée attendu.
Nom de variable
Le nom de variable correspond au nom donné à l'objet qui contiendra toute la donnée recueillie et que l'équipe de développement viendra récupérer.
Il est usuel de voir des noms de variables en anglais, en un seul mot, sans espace ni caractère spécial. Par exemple, pour une date de naissance, vous pouvez y saisir "birthdate".
Ces noms de variable doivent être communiqués à/par votre équipe technique.
🚨 Un nom de variable est automatiquement créé pour chaque champ, vous avez la possibilité de le modifier dans l'onglet "Paramètres".
Champ obligatoire
Ce paramètre vous permet de déterminer si un champ est obligatoire ou non pour qu'un formulaire complété par un utilisateur soit considéré comme valide.
Par défaut, les champs sont obligatoires.
👉 Valeurs possibles : Oui / Non
Options (uniquement pour "Liste déroulante", "Boutons radio")
Ce paramètre vous permet de définir les options possibles pour une liste ou des boutons radio.
Le label sera visible par l'utilisateur.
La valeur sera récupérée par l'équipe de développement.
Vous pouvez ajouter autant d'options que vous souhaitez.
À propos de la saisie des données
Les champs de type email et date sont contrôlés avant envoi du formulaire. Pour le reste, tout est prévu pour que vous puissiez mettre en place vos propres contrôles.
🚨 Pour des raisons évidentes de sécurité, les données récoltées dans les formulaires ne sont pas enregistrées mais envoyées dans un événement Javascript. Pour récupérer la donnée de chaque formulaire, il est nécessaire d'implémenter cette récolte techniquement. Elles ne sont donc pas stockées dans le Dashboard et sont perdues si elles n'ont pas été récupérées par l'équipe technique du média. Mais bonne nouvelle, les récupérer est très facile !
Les options de Style
Marges internes
📚 Définition
Permet de modifier les espaces dans de l'élément.
Par exemple pour une Rangée contenant un Texte, cette option vous permettra de gérer les espaces entre les bordures de la Rangée et les bordures du Texte.
Vous pouvez paramétrer individuellement chaque espace (haut, gauche, bas, droite).
👉 Valeurs possibles
Vous pouvez renseigner les marges avec un chiffre, en pixels, en %, en em, en vh ou vw.
Marges externes
📚 Définition
Permet de modifier les espaces autour de l'élément.
Vous pouvez paramétrer individuellement chaque espace (haut, gauche, bas, droite).
👉 Valeurs possibles
Vous pouvez renseigner les marges avec un chiffre, en pixels, en %, en em, en vh ou vw.
Image d'arrière-plan
📚 Définition
Permet d'ajouter une image en arrière-plan d'un composant.
Pour sélectionner une image, cliquez sur le bouton [+].
L'image doit être localisée sur votre ordinateur.
⚙️ Options
Taille
Permet de sélectionner la taille de l'image par rapport à son contenant (le composant.)
👉 Valeurs possibles :
Par défaut : l'image conserva sa taille par défaut
Remplir : l'image est redimensionnée, en conservant ses proportions, pour couvrir l'intégralité du contenant.
S'adapter : l'image est redimensionnée, en conservant ses proportions, pour couvrir un maximum d'espace du contenant (en hauteur ou largeur). Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan.
Positionnement
Permet de définir la position de l'image par rapport au contenant.
👉 Valeurs possibles : Centré / En haut / En bas / A droite / A gauche / Centré en haut / Centré en bas / Centré à gauche / En haut à gauche / En bas à gauche / Centré à droite / En haut à droite / En bas à droite
Répétition
Dans le cas où l'image ne couvrirait pas l'intégralité du contenant, cette option permet de répéter l'image pour couvrir tout l'espace.
👉 Valeurs possibles : Pas de répétition / Répétition horizontale / Répétition verticale / Répétition horizontale & verticale
Couleur d'arrière-plan
📚 Définition
Cette option permet de définir la couleur de l'arrière-plan du composant.
👉 Valeurs possibles
Vous pouvez définir une couleur grâce au sélecteur de couleur ou directement en renseignant le code Hex de la couleur (ex : #ff0000.)
🚨 La couleur sera appliquée au contenant du champ (wrapper) et non au champ lui-même.
Classe css additionnelle
📚 Définition
Cette option vous permet d'ajouter une ou plusieurs classe(s) CSS à votre composant.
Elle apparaîtra dans le HTML de votre page, à côté des autres classes du composant.
Cela vous permet d'appliquer à votre composant des règles de CSS personnalisé.
👉 Valeurs possibles
Renseignez le nom de la classe (sans "." devant) et séparée par un espace dans le cas où vous en renseigneriez plusieurs.
Les options Responsive (ou compatibilité avec les tailles d'écrans)
🚨 Le responsive est basé sur la largeur de l'iframe dans laquelle apparaît le wall. Celle-ci s'adapte en fonction de la largeur de l'écran mais elle n'est pas nécessairement égale à la largeur de l'écran, elle peut-être plus petite.
Ces options vous permettent de maîtriser précisément le comportement de chaque composant pour chaque taille d'écran.
*de l'iframe
👉 Valeurs possibles : Affiché / Caché