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éé pour une association, et utilisé par les membres pour renseigner toutes les informations clés sur leurs nouveaux adhérents.

1. Préparer une table de données

Avant de vous lancer dans la création d’un formulaire sur Kis, il est nécessaire de préparer une table de données qui permettra de recueillir toutes les informations saisies par vos utilisateurs.

Dans notre exemple, on crée une table “Formulaire adhérents” avec des colonnes dédiées aux futurs champs que l’on intégrera dans le formulaire : nom, prénom, photo, date d’adhésion, etc.

Si votre formulaire nécessite l’utilisation de données provenant d’une autre source (par exemple, la liste à jour de tous vos référents), préparez également cette table 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

Dans votre app dédiée au formulaire sur Kis, créez une nouvelle page que vous nommerez de manière explicite, par exemple, “Nouvel adhérent”. Vous pouvez personnaliser cette page avec une icône pour la rendre plus facilement identifiable.

Ajoutez un nouveau container dans votre page puis intégrez un formulaire depuis la catégorie “Composants”. Attention, veillez à enregistrer régulièrement votre travail.

Configuration de la table de données

Maintenant, il faut créer une source de données. Dans l’onglet “Données”, cliquez sur “Ajouter”, nommez la source de la manière la plus claire possible (“Créer un nouvel adhérent”), et reliez-la à la table de données de votre choix (ici, “Formulaire adhérents”).

Retournez ensuite sur votre page et donnez un titre à votre formulaire. Par exemple : “Créer un nouvel adhérent”. Si vous le souhaitez, vous pouvez personnaliser le texte du bouton de validation du formulaire.

Enfin, liez votre page à la source de données que vous venez 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, assurez-vous d’avoir sélectionné “Édition de données”.

Vous pouvez ajouter autant de lignes que vous le souhaitez 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 table de données à laquelle est rattachée le formulaire. Par exemple, le champ “Date d’adhésion” sera lié à la colonne “date-adhesion” de notre table de données “Formulaire adhérents”.

Faisons un petit tour d’horizon des différents champs disponibles pour habiller votre 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 vous le souhaitez, vous pouvez 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, sélectionnez simplement le format “Date”.

Petite astuce : pour définir automatiquement la date du jour dans votre formulaire, transformez le champ en format texte et, dans “Valeur par défaut”, utilisez la formule [date: 0].

Vous pouvez 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, vous pouvez intégrer des fichiers directement dans votre formulaire. Vous devez 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.

Cases à cocher

Pour entrer des informations binaires ("oui ou non"), vous pouvez utiliser le format “Case à cocher” pour l’intégrer à votre formulaire.

Bon à savoir : Pour gagner du temps lors de la saisie, vous pouvez définir une valeur par défaut et taper “true”. De cette manière, la case sera déjà 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 de votre champ, vous pouvez 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 :

• Cochez les cases “Taille minimale” et/ou “Taille maximale” ;

• Renseignez les valeurs de votre choix : par exemple 10 pour un numéro de téléphone ;

• Rédigez le message d’erreur de votre choix.

Cette fonctionnalité vous permet d’éviter les erreurs de saisie et garantir la bonne uniformité des données. Pour le numéro de téléphone, vous êtes sûr d’avoir précisément 10 chiffres, et 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, commencez par créer le champ “Adresse” dans un format texte classique. Ensuite :

• Créez le champ “Code Postal” dans un format texte ;

• Cliquez sur “Condition d’affichage” ;

• Liez votre code postal au champ “Adresse” ;

• Sélectionnez 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 vous suffira 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 table de données, 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’association. Il vous 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/2025.

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 votre table de données mais ne viendra pas encombrer inutilement le formulaire.

Champ de sélection dynamique

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 table de données. 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 table de données. En l’occurrence, une table 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 table “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 table de données. 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 la tableau, on crée des colonnes au nom des données qu’on souhaite pouvoir modifier : nom, prénom, date d’adhésion, etc.

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 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 formule importante à retenir : [data_in: nom-du-champ-dans-la-table-de-donnée]. 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 d'isoler une valeur précise dans votre table de données.

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.

Il ne vous reste plus qu’à passer côté utilisateur pour aller tester votre nouveau formulaire, ainsi que votre page de modification. Toutes les informations renseignées dans ce formulaire seront mises à jour en temps réel dans votre table de données.

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.