La création de formulaire dans Poool Access repose sur l'utilisation de composants basiques et de champs de formulaire.
Dans cet article nous vous présentons les champs de formulaire et leurs options.
Pour bien commencer...
Afin d'ajouter un champ, cliquez 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
Les champs de formulaire
Le type de champ 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.
Poool vérifie que l'information renseignée par l'utilisateur correspond à un format d'email avant l'envoi du formulaire. Si vous souhaitez ajouter des vérifications supplémentaires, vous pouvez consulter notre documentation technique à ce sujet.
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 des options.
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
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.
L'utilisation de ce champ nécessite d'avoir un compte Stripe et effectuer une intégration technique spécifique. Retrouvez la documentation technique ici.
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 notamment de donner une indication 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.
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.
Les options de Style
Marges internes
📚 Définition
Permet de modifier les espaces dans 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é