Formulaire

Vous souhaitez créer un formulaire personnalisé pour votre organisation sur Kis ? Ce tuto détaillé vous accompagne pas à pas dans la conception de formulaires dynamiques, adaptés à vos besoins.

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

Avant de vous lancer dans la création d’un formulaire sur Kis, il est nécessaire de préparer 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.

Le nom d'une liste ne doit pas comporter d'espaces, de majuscules ou de caractères spéciaux.

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

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.

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.

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

Faisons un petit tour d’horizon des différents champs disponibles pour habiller notre formulaire.

Texte

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

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 [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

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

Pour entrer des informations binaires ("oui ou non"), on utilise le format “Case à cocher” pour l’intégrer à notre formulaire.

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.

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

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

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

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

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

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

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.

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.