Comment Configurer le Widget Liste Paramétrable

September 16, 2021

Introduction

Le widget Liste Paramétrable nécessite un peu plus de configuration, mais ce n’est pas difficile du tout. Il y a quelques éléments que nous devons considérer afin de comprendre comment cela fonctionne et que le widget soit opérationnel:

  • Le Widget ajoute dynamiquement un ensemble de champs sur votre formulaire sous forme de liste
  • Vous pouvez ajouter autant de lignes que possible
  • Vous pouvez définir le type de données ou d’informations qui peuvent être collectées pour chaque ligne ajoutée dynamiquement sur la liste
  • Pour restreindre le type d’informations pouvant être collectées, vous devez définir des types de champs
  • Les types de champs suivants sont autorisés dans la configuration pour chaque ligne de la liste dynamique:

Comment Configurer le Widget

La Boîte de dialogue de Configuration s’ouvre lorsque vous ajoutez le widget à votre formulaire. Vous pouvez toujours y accéder en cliquant sur l’icone baguette magique de l’assistant du widget à partir du générateur de formulaire:

Widget Settings

Nous avons préparé un tableau qui vous guidera dans la mise en place de votre liste dynamique grce à ce widget.

Commençons par la liste des configurations de champ:

Types de Champs

  • texte

    Accepte le texte brut.​

    {étiquette}:text:{espace réservé}

    Exemple:Nom : text : Saisissez votre nom

  • chiffre

    Accepte uniquement les chiffres.

    {étiquette}:number{espace réservé}

    Exemple: Age : number : Saisissez votre ge

  • zone de texte

    Accepts Accepte plus de texte dans les paragraphes ou les narrations.

    {étiquette}:textarea{espace réservé}

    Exemple: Commentaires : textarea : Saisissez votre commentaire

  • Une liste d’options dans une liste déroulante.

    {étiquette}:dropdown{option1},{option2},{…}{espace réservé}

    Pour que l’une des options soit sélectionnée par défaut, remplacez simplement le {espace réservé} par l’une des options de votre liste.

    Exemple: Fruits : dropdown : Pomme, Banane, Mangue, Orange : Banane

  • radio

    Choix unique (bouton radio) – sélectionnez l’une des options disponibles.

    {étiquette}:radio{option1},{option2},{…}

    Exemple: Accepter les conditions? : radio: Oui, Non

  • case à cocher

    {étiquette}:checkbox{option1},{option2},{…}

    Choix multiples – cochez les options disponibles.

    Exemple:Paiement : checkbox :  Complet, Partiel

  • date

    Un sélecteur de date avec un calendrier pop-up.

    {étiquette}:date{format}:{plage}

    Si la date {format} n’est pas définie ou n’est pas valide, sa valeur par défaut est y/m/d (a/m/j). Vous pouvez intervertir les lettres à votre guise.
    L’année {plage} a le format de début-fin, par ex. 2021-2031. S’il n’est pas défini ou n’est pas valide, la valeur par défaut s’étend d’il y a dix ans à l’année prochaine.

    Exemple:Date d’arrivée : date : m/d/y : 2021-2030

  • heure

    Un sélecteur d’heure.

    {étiquette}:time{format}[,now]

    Les valeurs {format} autorisées sont 12 (avec sélecteur AM/PM) et 24. Si non défini ou invalide, la valeur par défaut est 12.
    Pour définir l’heure actuelle comme heure par défaut, ajoutez “, now” au config.

    Example: Date d’arrivée: time : 24, now

  • statique

    Afficher un message ou un texte.

    {étiquette}:static{texte}

    Exemple:Message Iportant : static : Cliquez sur le bouton ‘+’ pour ajouter une nouvelle ligne.

La liste ci-dessus semble un peu effrayante, cependant, c’est assez facile. Voici un exemple de configuration:

Configurable List - Fields configuration

Voici ce que la configuration affichera sur votre formulaire:

Configurable List - Sample Output

Après avoir terminé chaque configuration de champ, appuyez sur la touche retour (entrée) pour ajouter une nouvelle configuration de champ sur une ligne différente afin que le widget puisse la traiter comme un nouveau paramètre de champ.

Autres configurations

Entrez le nombre dans la zone de saisie Nombre maximal de lignes pour limiter le nombre de lignes qui seront ajoutées à votre formulaire.

Pour charger automatiquement un nombre de lignes, saisissez le nombre dans le champ Nombre minimum de lignes.

Min/max Rows

Pour modifier le texte des boutons (ajouter et supprimer une ligne), définissez-les dans les champs de saisie suivants:

Label for Add/Remove

Définir un champ ou une entrée comme “Obligatoire”.

Dans la plupart des formulaires, certains champs ne doivent pas être ignorés, comme les noms et les champs d’e-mail. Pour empêcher l’utilisateur du formulaire de sauter ces champs obligatoires, vous devez définir le champ comme obligatoire en ajoutant un astérisque (*) avant la configuration du champ, comme indiqué ci-dessous:

Configurable List - Set field as required

Les utilisateurs ne seront autorisés à soumettre le formulaire que si ces champs sont remplis:

Configurable List - Required fields

Changer l’apparence de la liste

Il est souvent nécessaire de styliser votre formulaire pour qu’il ressemble exactement à ce que vous souhaitez – peut-être pour correspondre à l’image de votre produit ou à votre identité d’entreprise, entre autres raisons.

Avec ce widget, vous pouvez personnaliser davantage l’apparence de la liste en ajoutant du CSS personnalisé.

Custom CSS

Et voici un exemple de forrmulaire. Vous pouvez cloner ou copier le formulaire; regardez de plus près ou modifiez le formulaire comme le vôtre.

La partie CSS personnalisée peut sembler un peu trop technique – mais ne vous inquiétez pas – nous serions ravis de vous aider – faites-le nous savoir.

C’est tout ce qu’il faut pour configurer le widget.

Si vous souhaitez rendre le widget de Liste paramétrable réactif pour mobile, consultez ce guide: Comment Rendre le Widget de Liste Paramétrable Réactif pour Mobile.

Nous aimerions entendre ce que vous en pensez ou partager votre expérience afin que nous puissions continuellement améliorer les outils qui rendent votre formulaire génial!

Ce guide vous a-t-il aidé ?

Envoyer un commentaire:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Commentaire:

Podo CommentSoyez le premier à commenter.