Ajouter des champs dans un formulaire
Création des champs
Pour créer le contenu de votre formulaire, vous devez y ajouter des champs. Ce sont les questions auxquelles devront répondre les usagers d'une part, des éléments de mise en forme (Nouvelle page, Titre, Sous-titre, Commentaire) d'autre part.
Sur la page d'édition du formulaire que vous venez de créer ou que vous souhaitez éditer, dans la partie Champs vous avez un lien éditer :
En cliquant dessus vous êtes redirigé sur la page de création des champs. Vous avez sur cette page une section Nouveau champ :
Le Libellé est le texte qui sera affiché à l'utilisateur et Type propose une liste de différents types de champ. Les types disponibles permettent au concepteur du formulaire de créer une information texte, une date, de télécharger un fichier, de choisir une réponse dans une liste, de lui afficher une information ou encore de créer plusieurs pages, etc.
Pour créer un champ il faut obligatoirement saisir son libellé et choisir son type, puis, il faut cliquer sur Ajouter. Une fois créé le champ apparaît sur la page :
Les champs sont affichés les uns en dessous des autres. Pour chacun, le libellé et le type sont affichés.
Pour éditer un champ placez votre souris sur celui qui vous intéresse, un petit menu apparaît :
Vous pouvez supprimer le champ, le dupliquer ou l'éditer.
Pour chacun, la page d'édition vous proposera diverses options à paramétrer.
Options des champs
Chaque champ peut-être édité en cliquant sur le lien éditer qui apparaît au moment du survol.
Il existe deux types de champs, ceux qui demandent à l'usager d'entrer une information et ceux qui lui donnent une information (les champs de mise en forme). À l'exception des champs de mise en forme (Nouvelle page, Titre, Sous-titre, Commentaire), tous offrent les options suivantes :
Libellé : le texte du champs tel qu'il sera présenté à l'utilisateur.
Obligatoire : il s'agit d'une case à cocher qui fixe le caractère obligatoire d'une réponse pour le répondant, si la case n'est pas cochée, la réponse à la question est optionnelle.
Remarque : permet d'apporter une aide au répondant. Dans le cas d'un champ adresse électronique, on pourra faire figurer dans cette option : "par exemple : francis.kuntz@wanagro.com", et ce message sera affiché à l'utilisateur en-dessous du champ adresse électronique.
Affichage dans les listings : il n'est pas forcément pertinent que tous les champs figurent dans le listing de back-office (optimisation de la lisibilité). Cette option permet donc, par le biais d'une case à cocher de déterminer si le champ concerné doit figurer ou non dans ce listing.
Classe supplémentaire pour les styles CSS : permet d'indiquer une classe CSS pour le champ. Cette classe doit évidemment exister dans la feuille de style du thème choisi pour être opérante.
Nom de variable : permet d'attribuer un identifiant au champ en question. Cet identifiant pourra ensuite être utilisé pour faire des formulaires conditionnels.
Les différents types de champs
Champs demandant une information
Ces champs exigent que l'utilisateur entre du texte, une date, choisissent une ou plusieurs réponse(s), joigne un fichier...
-
Texte : C'est le champ de base, utilisé pour demander au répondant de fournir une information en texte libre. Le champ texte permet, dans sa configuration de base, une réponse comprenant des lettres et des chiffres et limitée à 20 caractères. Tout ceci peut être modifié aisément en éditant le champs. En plus des options communes, il offre :
Longueur de ligne : permet d'indiquer la largeur du champs (par défaut 20).
-
Regex de validation : ce champ permet d'appliquer une règle (en respectant la sysntace des expressions régulière Python) pour contrôler ce qui est saisi par l'utilisateur. Exemple de règles :
Imposer la saisie d'un numéro de téléphone à 10 chiffres : \d{10}$
Idem mais avec la possibilité d'avoir des espaces entre les groupes de 2 chiffres : \d{2}\D*\d{2}\D*\d{2}\D*\d{2}\D*\d{2}$
Code postal à 5 chiffres : \d{5}$
Valeur numérique : \d+$
-
La liste déroulante « Préremplir », permet de pré-remplir de 3 façons différentes le champ :
« Texte », qui en cliquant sur le bouton « appliquer » vous permettra de saisir une valeur fixe qui sera affichée indifféremment à tous les répondants.
« Champ utilisateur » qui permet de sélectionner une des caractéristiques du profil de l'utilisateur (nom, adresse téléphone...) pour alimenter le champs
« Formule Python » qui permet d'écrire une requête Python pour aller récupérer une information pouvant pré-remplir le champ.
Source de données externe : permet d'aller interroger un référentiel distant pour en extraire une information destinée à alimenter le formulaire. La source de données peut être de type webservice formattée en JSON.
Texte long : identique au champ Texte mais il s'étend sur plusieurs lignes. Dans les navigateurs récents, la taille du bloc de texte est modifiable par l'utilisateur en cliquant/déplaçant son coin inférieur droit. Par défaut le nombre de caractères par ligne est fixé à 20 et le nombre de lignes à 3. Pour un affichage occupant la largeur de la page, 70 caractères par ligne est une bonne valeur. 10 lignes par bloc permettent une réponse longue, sachant que si l'utilisateur dépasse, il disposera d'une barre d'ascenseur. L'option « texte préformaté » Permet de conserver les sauts à la lignes et les espaces supérieur à 1 caractère dans la réponse de l'usager.
Courriel : C'est un champ Texte sur lequel un contrôle est opéré pour vérifier que c'est bien une adresse électronique valable qui est saisie. Le répondant devra donc mentionner dans ce champ une adresse de courriel valide. Le contrôle porte à la fois sur la forme de l'adresse et sur la validité du nom de domaine.
Case à cocher : il s'agit d'une case à cocher permettant par exemple d'obtenir le consentement du demandeur.
Upload de fichier : permet à l'utilisateur de joindre un fichier au formulaire, par exemple une pièce justificative scannée.
-
Date : Propose à l'utilisateur de choisir une date (en l'écrivant ou en la sélectionnant dans un calendrier). Ce champs offre les options suivantes :
Date minimale : empêche l'utilisateur de choisir une date antérieure à celle définie ici.
La date doit être dans le futur : impose à l'utilisateur de choisir une date postérieure à la date du jour. Cette option n'est pas compatible avec l'option Date minimale.
Date maximale : empêche l'utilisateur de choisir une date postérieure à la date définie ici.
La date doit être dans le passé : impose à l'utilisateur de choisir une date antérieure à la date du jour. Cette option n'est pas compatible avec l'option Date maximale.
La date peut être le jour présent : option qui n'est utile que combinée aux options précédentes et qui leur ajoute la possibilité de saisir la date du jour.
-
Liste : Ce champ permet l'affichage d'une liste déroulante au répondant. « Éléments », permet de définir les différentes possibilités de réponse. Ajoutez autant d'éléments que nécessaire à votre liste. Vous pouvez choisir d'afficher les réponses sous forme de bouton radio à l'aide de la case à cocher prévue à cet effet.
-
La liste déroulante « Préremplir », permet de pré-remplir de 3 façons différentes le champ :
« Texte », qui en cliquant sur le bouton « appliquer » vous permettra de saisir une valeur fixe qui sera affichée indifféremment à tous les répondants.
« Champ utilisateur » qui permet de sélectionner une des caractéristiques du profil de l'utilisateur (nom, adresse téléphone...) pour alimenter le champs
« Formule Python » qui permet d'écrire une requête Python pour aller récupérer une information pouvant pré-remplir le champ.
Source de données externe : permet d'aller interroger un référentiel distant pour en extraire une information destinée à alimenter le formulaire. La source de données peut être de type webservice formattée en JSON.
-
Liste à choix multiples : identique à liste mais permet à l'utilisateur de choisir plusieurs réponses. Il est possible de limiter le nombre de choix avec l'option Nombre maximal de choix, 0 signifiant qu'il n'y a aucune limitation.
Tableau : Ce champ permet de mettre en place un tableau dans le formulaire. Lorsqu'on le paramètre on choisit le nombre de colonnes et de lignes qu'il va compter et les libellés choisis apparaîtront au-dessus des colonnes (pour les éléments saisis sous « Colonne ») et devant les lignes (pour les éléments saisis sous « Lignes »).
Tableau de listes : identique au type « Tableau » mais le contenu de chaque cellule est une liste définie dans l'option « Éléments » du champs.
Tableau de longueur libre : identique au type « Tableau » mais chaque fois qu'une ligne est remplie par l'utilisateur, il peut compléter une nouvelle ligne, le nombre de ces dernières n'est pas limité. Ce type offre par ailleurs la possibilité de faire le total des colonnes en cochant l'option « Ajouter une ligne de total ».
Éléments classés : Affiche à l'usager une liste de propositions précédées d'une zone de saisie permettant d'indiquer par un chiffre le classement qu'il souhaite donner à chacune d'entre elles.
Champs affichant une information
Ces champs permettent la mise en forme du formulaire.
Titre : permet d'insérer un titre dans le formulaire. La forme de son affichage dépend de la feuille de style du thème. Il est possible de spécifier une classe de la feuille de style dans le champs prévu à cet effet.
Sous-titre : permet d'insérer un sous-titre dans le formulaire. La forme de son affichage dépend de la feuille de style du thème. Il est possible de spécifier une classe de la feuille de style dans le champs prévu à cet effet.
Commentaire : permet d'insérer un commentaire dans le formulaire. La forme de son affichage dépend de la feuille de style du thème. Il est possible de spécifier une classe de la feuille de style dans le champs prévu à cet effet.
Nouvelle page : permet de spécifier qu'une nouvelle page doit commencer à cet endroit. Le champ nouvelle page permet donc de créer des formulaires multi-pages. Le champ nouvelle page permet de gérer la notion d'affichage conditionnel : certaines pages ne seront affichées que lorsqu'une réponse particulières est donnée (cf. les formulaires conditionnels). À noter qu'un formulaire multi-pages doit obligatoirement commencer par un champ de ce type. Le tite des pages sera affiché à l'utilisateur à côté du formulaire, lui permettant d'avoir une vue d'ensemble et de savoir sur quelle page il se trouve.
Différences entre champs « Commentaire » et option « Remarque »
Il est généralement déconseillé d'utiliser le champs « Commentaire » pour donner des indications sur la façon de remplir un champ particulier : il est préférable d'utiliser l'option « Remarque » du champ en question pour ce faire, le texte sera alors plus explicitement lié à ce dernier.