Personnaliser vos formulaires à l’aide de XLSForm¶

Dernière mise à jour : 22 Jun 2026

Avec KoboToolbox, vous pouvez personnaliser l’apparence de vos formulaires et de vos questions pour mettre en valeur les informations clés et adapter la mise en page à vos besoins de collecte de données. Cela inclut l’application de thèmes aux formulaires web, l’ajout d’en-têtes et de listes dans les questions de type note, ainsi que l’utilisation de couleurs ou de la mise en gras pour souligner certains éléments.

Cet article traite des thèmes pour les formulaires web ainsi que des options de mise en forme pour les notes et les questions au sein d’un formulaire.

Note : Cet article porte sur la mise en forme des formulaires dans XLSForm. Pour en savoir plus sur la définition des thèmes de formulaires web dans l'interface de création de formulaires KoboToolbox (KoboToolbox Formbuilder), consultez l'article Styliser vos formulaires web dans le Formbuilder.

Thèmes pour les formulaires web¶

Les thèmes de formulaires web vous permettent de personnaliser l’apparence et la mise en page des formulaires web. Les thèmes s’appliquent uniquement aux formulaires web et ne sont pas visibles dans KoboCollect.

Ajouter des thèmes dans un XLSForm¶

Pour ajouter un thème dans un XLSForm :

Ajoutez une colonne style dans votre onglet settings.
Indiquez le thème que vous souhaitez utiliser, en reprenant exactement le nom indiqué dans le tableau ci-dessous.

onglet settings

style
theme-grid
settings

Note : Les thèmes peuvent être combinés en saisissant les deux noms de thèmes dans la même cellule de la colonne style, séparés par un espace (par exemple, theme-grid pages).

Thèmes disponibles pour les formulaires web¶

Les thèmes suivants sont disponibles pour personnaliser vos formulaires :

Thème XLSForm	Description	Aperçu
Thème par défaut	Affiche les questions les unes après les autres, sur une seule page.
`pages`	Affiche une question par écran ou un groupe de questions sur le même écran, de manière similaire à la mise en page de KoboCollect.
`theme-grid`	Un affichage alternatif plus compact, similaire aux formulaires papier, qui utilise efficacement l’espace en disposant plusieurs questions par ligne. Les questions sont mises en majuscules par défaut. Nécessite de configurer votre XLSForm.
`theme-grid no-text-transform`	Identique à theme-grid, mais sans mise en majuscules automatique des questions.

Configurer un XLSForm pour theme_grid¶

Dans les formulaires web, la mise en page theme_grid vous permet d’afficher les questions en plusieurs colonnes, rendant votre formulaire plus compact et visuellement organisé. La configuration de ces colonnes — notamment leur nombre et leur largeur — est contrôlée en attribuant des w-values à chaque question dans la colonne appearance de votre XLSForm.

Pour une présentation complète de l'utilisation de theme_grid dans XLSForm, consultez ce tutoriel sur le thème grille et cet XLSForm type.

Avant d’attribuer des w-values à chaque question, commencez par regrouper toutes les questions dans des groupes de questions. La largeur par défaut d’un groupe ou d’un groupe répété est de quatre colonnes (w4), ce qui signifie qu’un groupe avec w4 peut contenir au maximum quatre questions w1 sur une même ligne. La w-value d’une question est relative à la w-value de son groupe.

Pour définir la largeur relative de chaque question au sein d’une ligne :

Ajoutez une colonne appearance dans votre onglet survey.
Pour chaque question, attribuez des valeurs d’apparence (par exemple, w1, w2, w3) pour définir sa largeur relative au sein d’une ligne.
Modifiez la largeur du groupe si nécessaire en utilisant la même approche.

Les lignes s’étendent toujours automatiquement sur toute la largeur de la page. Par exemple, une ligne contenant une question avec une valeur d’apparence w2 et une autre avec w1 divisera la ligne en deux tiers et un tiers, respectivement.

Note : Appliquez les w-values uniquement aux groupes ou groupes répétés de premier niveau. Bien que leur application à des sous-groupes ou groupes répétés imbriqués soit disponible, l'affichage peut ne pas être optimal.

Mise en forme du texte¶

Vous pouvez utiliser Markdown et HTML dans XLSForm pour mettre en forme le texte, ajouter de l’emphase avec du gras ou de l’italique, créer des en-têtes de différentes tailles, modifier les polices et les couleurs, et ajouter des liens web cliquables. La mise en forme du texte peut être appliquée aux questions, aux indices de question et aux notes.

Note : Certaines fonctionnalités de mise en forme peuvent ne pas être prises en charge dans KoboCollect ou dans les formulaires web. Il est recommandé de prévisualiser vos formulaires dans la méthode de collecte de données choisie pour vérifier que toutes les fonctionnalités de mise en forme sont bien disponibles.

Les fonctionnalités de mise en forme du texte dans XLSForm incluent :

Fonctionnalité	Mise en forme
Italique	`italics` ou `_italics_`
Gras	`bold` ou `__bold__`
Lien hypertexte	`[nom du lien](url)`
E-mail	`[email@domain.org](mailto:email@domain.org)`
En-têtes	`# Header 1` (le plus grand) à `###### Header 6` (le plus petit)
Listes à puces	- Ceci est une liste non ordonnée - en markdown
Listes numérotées	1. Ceci est une liste numérotée 2. en markdown
Emojis	Par exemple, 🙂 😐 🙁 😦 😧 😩 😱
Exposant	`100 m<sup>2</sup>` devient 100 m²
Indice	`H<sub>2</sub>O` devient H₂O
Texte coloré	`<span style="color:#f58a1f">orange</span>` devient orange `<span style="color:red">red</span>` devient red
Police	`<span style="font-family:cursive">cursive</span>` devient cursive `<span style="color:red; font-family:cursive">red and cursive</span>` devient red and cursive
Centrer le texte	`<p style="text-align:center">Centered label</p>` centre le texte à l’écran (KoboCollect uniquement)
Masquer le libellé	`<span style="display:none">Hidden label</span>` masque le libellé de la question (formulaires web uniquement)
Supprimer le gras	`<span style="font-weight: normal;">What is your age?</span>` supprime la mise en gras du libellé de la question (formulaires web uniquement)
Soulignement	`<span style="text-decoration: underline;">This text is underlined</span>` souligne le texte (formulaires web uniquement)

Note : Utilisez le caractère \ avant #, *, _ et \ pour empêcher ces caractères de déclencher des effets de mise en forme spéciaux.

Comment pouvons-nous vous aider ?