Comment Configurer le Widget Liste Paramétrable

November 17, 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:

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
    Accepte plus de texte dans les paragraphes ou les narrations.
    {étiquette}:textarea: {espace réservé}
    Exemple: Commentaires : textarea : Saisissez votre commentaire
  • liste déroulante
    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:

Voici ce que la configuration affichera sur votre formulaire:

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.

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

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:

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

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é.

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é ?
Contacter l'assistance :

Notre équipe d'assistance clientèle est disponible 24 heures sur 24 et 7 jours sur 7 et notre temps de réponse moyen est d'une à deux heures.
Notre équipe peut être contactée via :

Forum d'assistance : https://www.jotform.com/answers/

Contacter l'assistance Jotform : https://www.jotform.com/contact/

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.