Styling your forms using XLSForm

Last updated: 25 Nov 2025

With KoboToolbox, you can customize the appearance of your forms and questions to highlight key information and adapt the layout to your data collection needs. This includes applying themes to Enketo web forms, adding headers and lists in note questions, and using color or bold formatting for emphasis.

This article covers themes for Enketo web forms as well as styling options for notes and questions within a form.

Note: This article focuses on styling forms in XLSForm. To learn about setting Enketo themes in the KoboToolbox Formbuilder, see Using alternative Enketo web form styles.

Themes for Enketo web forms

Enketo themes allow you to customize the appearance and layout of Enketo web forms. Themes apply only to Enketo web forms and are not visible in KoboCollect.

Adding themes in XLSForm

To add a theme in XLSForm:

1. Add a style column in your settings worksheet.

2. Specify the theme you want to use, using the exact name shown in the table below.

settings worksheet

style
theme-grid
settings

Note: Themes can be combined by entering both themes in the same cell of the style column, separated by a space (e.g., theme-grid pages).

Available themes for Enketo web forms

The following themes are available to customize your forms:

XLSForm theme	Description	Preview
Default theme	Displays questions one after another, on a single page.
pages	Displays one question per screen or a group of questions together on the same screen, similar to the KoboCollect layout.
theme-grid	An alternative display that is more compact, similar to paper forms, and efficiently uses space, arranging multiple questions per row. Questions are capitalized by default. Requires setting up your XLSForm.
theme-grid no-text-transform	Same as theme-grid, but without automatic capitalization of questions.

Setting up an XLSForm for theme_grid

In Enketo web forms, the theme_grid layout allows you to display questions in multiple columns, making your form more compact and visually organized. The set-up of these columns, including how many there are and how wide each one should be, is controlled by assigning w-values to each question inside the appearance column of your XLSForm.

For a comprehensive overview of using theme_grid in XLSForm, see this Grid Theme Tutorial and sample XLSForm.

Before assigning w-values to each question, start by placing all questions into question groups. The default width for a group or repeat is four columns (w4), so a group with w4 can hold a maximum of four w1 questions in a single row. A question’s w-value is relative to its group’s w-value.

To specify the relative width of each question within a row:

1. Add an appearance column in your survey worksheet.

2. For each question, assign appearance values (e.g., w1, w2, w3) to specify its relative width within a row.

3. Modify the group width if needed using the same approach.

Rows will always automatically expand to the full width of the page. For example, a row containing one question with an appearance value of w2 and another with w1 will divide the row into two-thirds and one-third, respectively.

Note: Apply w-values only to top-level groups or repeats. Although applying them to nested groups or repeats is supported, it may not display well.

Styling text

You can use Markdown and HTML in XLSForm to style text, add emphasis with bold or italics, create headers of different sizes, change fonts and colors, and add clickable web links. Text styling can be applied to questions, notes, and choice labels.

Note: Some styling features may not be supported in KoboCollect or Enketo. It is recommended to preview your forms in your chosen data collection method to confirm that all styling features are fully supported.

Text styling features in XLSForm include:

Feature	Formatting
Italics	*italics* or _italics_
Bold	**bold** or __bold__
Hyperlink	[name of link](url)
Headers	# Header 1 (biggest) to ###### Header 6 (smallest)
Bullet lists	- This is an unordered list - in markdown
Numbered lists	1. This is a numbered list 2. in markdown
Emojis	For example, 🙂 😐 🙁 😦 😧 😩 😱
Superscript	100 m<sup>2</sup> turns into 100 m²
Subscript	H<sub>2</sub>O turns into H₂O
Colored text	<span style="color:#f58a1f">orange</span> turns into orange <span style="color:red">red</span> turns into red
Font	<span style="font-family:cursive">cursive</span> turns into cursive <span style="color:red; font-family:cursive">red and cursive</span> turns into red and cursive
Align center	<p style="text-align:center">Centered label</p> centers the text on the screen

Note: Use the \ character before #, *, _, and \ to prevent special styling effects from being triggered by these characters.