# Formulaire Pour rendre ce tuto plus clair, nous prendrons l’exemple d’un formulaire créé par une organisation afin de renseigner toutes les informations essentielles sur leurs nouveaux adhérents. ## 1. Préparer une liste {% embed url="" %} Avant de vous lancer dans la création d’un formulaire sur Kis, il est nécessaire de [**préparer une liste**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) qui permettra de recueillir toutes les informations saisies par vos utilisateurs. Dans notre exemple, on crée une liste “**formulaire-adherent**” avec des colonnes dédiées aux futurs champs que l’on intégrera dans le formulaire : * nom ; * prenom ; * date-adhesion ; * photo-adherent ; * bulletin-adhesion ; * cotisation-payee ; * numero-telephone ; * adresse ; * code-postal ; * ville ; * date-fin-adhesion ; * referent. {% hint style="warning" %} Le nom d'une liste ne doit **pas comporter d'espaces, de majuscules ou de caractères spéciaux**. {% endhint %} Si votre formulaire nécessite l’utilisation de données provenant d’une autre liste (par exemple, un listing à jour de tous les référents qui peuvent accompagner les nouveaux adhérents), **préparez également cette liste secondaire**. Elle nous permettra de créer des sélections dynamiques dans notre futur document. ## 2. Créer une première page de formulaire {% embed url="" %} ### Création de la page **1 -** Dans notre micro-application dédiée (ici, **Formulaire Adhérents**), **on crée une nouvelle page** que l'on nomme de manière explicite, par exemple, “**Ajouter un nouvel adhérent**”. Il est possible de **personnaliser cette page avec une icône** pour la rendre plus facilement identifiable. **2 -** On ajoute un **nouveau container** dans la page puis on fait **glisser-déposer un formulaire** depuis la catégorie **Composants**. Attention, il faut veiller à enregistrer régulièrement votre travail. ### Créer une source de données Maintenant, il faut [**créer une source de données**](https://doc.kis.work/documentation/guide-de-demarrage/source-de-donnees). **1 -** Dans l’onglet **Données**, on clique sur **Ajouter**.\ **2 -** On **nomme la source de données** de la manière la plus claire possible. Ici, “**Créer un nouvel adhérent**”.\ **3 -** On **relie la source de données à la liste** de notre choix (dans notre exemple, “**formulaire-adherent**”). 4 - On retourne ensuite dans notre page et **on donne un titre au formulaire**. Par exemple : “**Créer un nouvel adhérent**”. Si on le souhaite, on peut également **personnaliser le texte du bouton de validation** du formulaire. 5 - Enfin, **on lie notre page à la source de données** que l'on vient juste de créer. ## 3. Ajouter des champs au formulaire Sur Kis, **différents types de champs peuvent être intégrés au formulaire**. Avant de créer de nouvelles lignes, il faut s'assurer d’avoir sélectionné “**Édition de données**”. On peut **ajouter autant de lignes qu'on le souhaite** puis les paramétrer et : * les nommer ; * sélectionner le type de champ ; * renseigner une valeur par défaut ; * choisir une condition d’affichage particulière. {% hint style="success" %} **Bon à savoir :** Pour chaque champ créé, veillez à le lier à la bonne colonne de la liste à laquelle est rattachée le formulaire. Par exemple, le champ “*Date d’adhésion*” sera lié à la colonne “*date-adhesion*” de notre liste “*formulaire-adherent”*. {% endhint %} Faisons un petit tour d’horizon des **différents champs disponibles pour habiller notre formulaire**. ### Texte {% embed url="" %} Les **champs au format texte** restent les plus courants dans un formulaire. Dans ce cas de figure, l’utilisateur pourra **saisir librement ses informations**, par exemple, leurs noms et prénoms. Si on le souhaite, on peut **décider du caractère obligatoire d’un champ**, en cochant la case correspondante au moment de paramétrer le champ. ### Date {% embed url="" %} Pour renseigner des dates de naissance ou d’adhésion, on sélectionne simplement le format “*Date*”. **Petite astuce :** pour définir automatiquement la date du jour dans le formulaire, il faut changer le champ en format texte et, dans “**Valeur par défaut**”, utiliser la [**balise**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques/balises) **\[date: 0]**. On peut d’ailleurs **adapter le numéro de la formule** pour programme une date différente : * **\[date: -1]** pour hier ; * **\[date: 1]** pour demain ; * **\[date: 2]** pour après-demain, etc. ### Fichiers {% embed url="" %} Avec Kis, il est possible d'**intégrer des fichiers directement dans le formulaire**. Pour ce faire, il suffit de sélectionner : * **Téléverser une image :** pour une photo d’identité, un logo, etc. ; * **Téléverser un document :** pour fournir un justificatif, un bulletin d’adhésion, etc. ### Case à cocher {% embed url="" %} Pour **entrer des informations binaires** ("oui ou non"), on utilise le format “**Case à cocher**” pour l’intégrer à notre formulaire. {% hint style="success" %} **Bon à savoir :** Pour gagner du temps lors de la saisie, on peut définir une valeur par défaut et taper “*true*”. De cette manière, la case sera automatiquement cochée. {% endhint %} Dans notre exemple, pour un champ “**Cotisation payée**”, cette simple formule peut se montrer utile si on considère que tous les nouveaux adhérents ont déjà réglé leurs cotisations. ### Champs de taille minimale et maximale {% embed url="" %} Pour les données devant respecter un calibrage précis, dans les paramètres du champ, on peut **cocher les cases de taille minimale et/ou maximale**. Dans notre cas, pour l’inscription d’un nouvel adhérent, cela peut se montrer pertinent pour l’ajout d’un numéro de téléphone : * On coche les cases “**Taille minimale**” et/ou “**Taille maximale**” ; * On **renseigne les valeurs** de notre choix : par exemple, 10 pour un numéro de téléphone ; * On **rédige le message d’erreur**. Ici, "*Veuillez saisir un numéro valide*". Cette fonctionnalité permet **d’éviter les erreurs de saisie et de garantir la bonne uniformité des données**. Ainsi, pour le numéro de téléphone, nous sommes certains d’avoir **précisément 10 chiffres**, et non pas certains numéros renseignés avec des espaces entre les nombres, d’autres avec des tirets, etc. ### Champs conditionnels {% embed url="" %} Comme leur nom l’indique, **les champs conditionnels n’apparaissent que lorsqu’une condition prédéfinie est remplie**. C’est particulièrement utile pour créer des formulaires progressifs et éviter de surcharger l’interface. Plus clairement, pour reprendre notre exemple, cela peut concerner **l’adresse, le code postal et la ville** de résidence de l’adhérent. Dans le détail, on commence par créer le champ “**Adresse**” dans un **format texte** classique. Ensuite : * On crée le champ “**Code Postal**” dans un **format texte** ; * On clique sur “**Condition d’affichage**” ; * On lie le code postal au champ “**Adresse**” ; * On sélectionne l’option “**Non nul**”. De cette manière, le champ “**Code Postal**” deviendra visible dans le formulaire uniquement si l’utilisateur a **renseigné le champ “Adresse”**. Il suffit de répéter l’opération pour la ville, en sélectionnant “**Code Postal**” et “**Non nul**” dans les conditions d’affichage. ### Champs invisibles {% embed url="" %} Un champ invisible permet de renseigner une information qu’on souhaite voir apparaître dans notre liste, **sans qu’elle soit visible par les utilisateurs**. Dans notre cas, cela peut concerner la date de fin d’adhésion qui est la même pour tous les adhérents de l’organisation. Il suffit donc de : * Créer le champ “**Date de fin d’adhésion**” ; * Sélectionner le type “**Champs invisibles**” ; * Renseigner la valeur par défaut, par exemple, **31/12/2026**. De cette manière, dès qu’un formulaire sera complété et validé, la date de fin d’adhésion sera **automatiquement enregistrée dans la liste** mais ne viendra pas encombrer inutilement le formulaire. ### Champ de sélection dynamique / Menu déroulant {% embed url="" %} Grâce au champ de sélection, on va pouvoir **renseigner des valeurs** qu’on retrouvera ensuite dans le formulaire, **dans une liste déroulante**. Pour cet exemple, on décide qu’un référent de l’association sera assigné à chaque nouvel adhérent. On crée donc un champ “**Référent**”, en le reliant, comme d’habitude, à notre liste. Et dans le type de champ, on coche “**Sélection**”. Deux possibilités s’offrent à nous. #### Options de sélection La première : choisir “**Option de sélection**” et **ajouter des valeurs manuellement**. Dans notre cas, le nom de tous les référents. **Pratique s’il y a peu de valeurs à renseigner**. Mais cette démarche peut prendre du temps. Et en cas de départ ou d’arrivée d’un nouveau référent, on devrait modifier ces champs à la main. #### Données dynamiques La deuxième option, c’est **d’intégrer une sélection qui provient d’une autre liste**. En l’occurrence, une liste stockant la liste à jour de tous référents pouvant être assignés à un adhérent. Dans la catégorie “**Données**”, on crée une nouvelle source qui va utiliser les données de la liste “**Référents**”. De retour dans notre formulaire, on clique sur le **symbole avec les deux rectangles**, à côté de “**Options de sélection**” et on renseigne nos données dynamiques. On va faire apparaître les noms de nos référents, issus de la bonne colonne de la liste. Et les rattacher à leurs valeurs dans cette table. Et dans ce cas, c’est facile, puisqu’il s’agit également de leurs noms. Maintenant, dans le formulaire, **on a accès à de vraies données dynamiques, constamment mises à jour**. Résultat, on ne peut choisir que des référents qui sont réellement disponibles pour notre adhérent. ## 4. Modifier des données {% embed url="" %} Jusqu’à présent, nous avons configuré le formulaire pour enregistrer de nouvelles informations. Mais que se passe-t-il si l’on veut **mettre à jour une fiche existante et modifier des données** ? **1 -** On crée une **nouvelle page** (dans notre exemple, “**Les Adhérents**”). **2 -** On ajoute un **nouveau container** puis un **tableau** issu des composants. **3 -** Dans le tableau, on crée des **colonnes au nom des données** qu’on souhaite pouvoir modifier : nom, prénom, date d’adhésion, etc. Dans notre exemple, pour aller plus vite, on ne pourra modifier que le nom. **4 -** On relie chaque colonne à la bonne source de données (ex : “**Créer un nouvel adhérent**”) puis à la valeur correspondante. **5 -** Dans “**Lien vers une autre page**”, on configure le texte affiché sur le bouton de redirection. Ici, ce sera tout simplement “**Modifier**”. **6 -** Pour pouvoir modifier les données du formulaire, on va avoir besoin d’une troisième page, reprenant tous les champs de notre formulaire de base. Pour gagner du temps et ne pas recréer manuellement chaque champ, on duplique notre page “**Nouvel Adhérent**” que l’on renomme “**Modifier adhérent**”. **7 -** Une fois créée, on masque cette page qui n’a pas vocation à être accessible directement dans le menu, côté utilisateur. **8 -** Dans la page “**Les Adhérents**”, dans la catégorie “**Lien vers une autre page**”, on renseigne que notre bouton “**Modifier**” renvoie vers la page masquée “**Modifier adhérent**”. **9 -** Dans la page “**Modifier adhérent**”, on sélectionne la case “**Éditions de données”**. **10 -** Pour chaque champ modifiable, dans les valeurs par défaut, on tape une [**balise**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques/balises) importante à retenir : **\[data\_in:** *nom-de-la-colonne***]**. Par exemple, **\[data\_in: nom]** ou **\[data\_in: date-adhesion]**. Plus clairement, la formule **\[data\_in: xxx]** permet d’afficher la donnée de la page précédente et d'isoler une valeur précise dans votre liste. {% hint style="warning" %} **Attention :** Il faut répéter l’opération pour tous les champs que vous souhaitez rendre modifiable. À l’inverse, si vous ne souhaitez pas permettre la modification d’un champ, vous pouvez le supprimer de votre page. {% endhint %} Côté utilisateur, on peut tester notre nouveau formulaire, ainsi que la page de modification. Toutes les informations renseignées dans ce formulaire seront **mises à jour en temps réel dans la liste**. Avec Kis, créez des formulaires adaptés à tous vos besoins. Et grâce à notre plateforme collaborative personnalisée, **centralisez toutes vos données et gagnez un temps précieux pour mener à bien toutes vos missions associatives**.