Style Text in XLSForm: Bold, Colour and Size

To style text in XLSForm, type Markdown into the label or hint cell: **bold**, *italic*, and ## Heading for bigger text. For colour, wrap the words in a span tag: <span style="color:red">Do not read aloud</span>. ODK Collect, ODK Web Forms and KoboCollect show both, and every example below compiles with pyxform and ODK Validate, the same check ODK Central runs when you upload a form.

Download example form (.xlsx)All six examples in one XLSForm, one group each. Tested with pyxform and ODK Validate; free to reuse under CC BY 4.0.Download

How do I make text bold or italic in XLSForm?

Put asterisks or underscores around the words, exactly as in Markdown. A consent note is a good place for it, because the enumerator must not skip the key sentence:

type	name	label	hint
note	consent_intro	Before we start: **taking part is voluntary** and the household can stop at any time.	Read this note *word for word* to the respondent.
select_one yes_no	consent	Does the respondent agree to take part?

◀ ▶surveychoicessettings+

list_name	name	label
yes_no	1	Yes
yes_no	0	No

◀ ▶surveychoicessettings+

Two rules from the ODK documentation decide whether it shows:

1. Underscores need a space around them. This is _important_ text is italic; This_is_important_ is not. Asterisks are the safer choice.
2. Labels are already bold and hints already italic in Collect. Bold inside a question label or italics inside a hint can look the same as the text around it, so emphasis is most useful in notes.

How do I make text bigger?

There is no font-size column. Start the cell with a Markdown header instead: # is the largest and ###### the smallest, with a space after the hashes. A section heading as a note works well at the start of each module:

type	name	label
note	section_b_title	## Section B: Water and sanitation
select_one water_source	main_water	What is the main source of drinking water for the household?
note	section_c_title	## Section C: Food consumption
integer	meals_yesterday	How many meals did the household eat yesterday?

◀ ▶surveychoicessettings+

list_name	name	label
water_source	1	Piped water
water_source	2	Tube well or borehole
water_source	3	Protected dug well
water_source	4	Surface water
water_source	-96	Other

◀ ▶surveychoicessettings+

How do I change the font colour in XLSForm?

Wrap the words in a span tag with a style attribute. Named HTML colours such as red and green work, and so do hex codes such as #c62828. Here an interviewer instruction is shown in red so it is never read aloud, and a calculated value is highlighted for checking:

type	name	label	calculation
note	instruction	<span style="color:#c62828">Interviewer: do not read the options aloud.</span>
integer	hh_size	How many people live in this household?
integer	children_under5	How many of them are under 5 years old?
calculate	adults		${hh_size} - ${children_under5}
note	size_check	Please confirm: the household has <span style="color:#c62828">**${adults}** people aged 5 or older</span>.

◀ ▶surveychoicessettings+

The tag can hold a ${} reference and Markdown at the same time, as in the last row. When you edit the form in Excel, type the quotes normally; the doubled quotes above are only how CSV writes them.

How do I colour choice labels?

The same tag goes in the label column of the choices sheet. A red-amber-green scale makes a severity question quick to read:

type	name	label
select_one severity	shelter_damage	How badly is the shelter damaged?

◀ ▶surveychoicessettings+

list_name	name	label
severity	1	<span style="color:#2e7d32">No damage</span>
severity	2	<span style="color:#ef6c00">Partly damaged, still usable</span>
severity	3	<span style="color:#c62828">Destroyed or unsafe</span>

◀ ▶surveychoicessettings+

Keep the words doing the work. About one man in twelve has some colour blindness, and the colour can disappear in a web form, so the label must make sense without it.

How do I change the font or centre text?

The span tag also takes font-family. ODK recommends the generic names serif, sans-serif, monospace and cursive, which every phone has; a named font only works if the device has it. Settings can be combined with a semicolon:

type	name	label
text	hh_id	Enter the household ID from the listing sheet.
note	receipt_code	Write this code on the receipt: <span style="font-family:monospace;color:#1565c0">HH-${hh_id}</span>
note	thank_you	<p style="text-align:center">Thank you for your time.</p>

◀ ▶surveychoicessettings+

Centring uses a p or div tag with text-align:center. ODK warns that alignment on choice labels also applies to the list of selected choices, which can look odd on a select_multiple.

How do I show a real asterisk or underscore?

Put a backslash in front of it. Without one, A_12_ or a pair of asterisks can turn part of the label into italics or bold. A literal backslash needs a second backslash:

type	name	label
text	voucher_code	Enter the voucher code exactly as printed, for example WFP\_12\_B.
note	starred_note	Questions marked \* are required by the donor.

◀ ▶surveychoicessettings+

Common mistakes when styling text

Most styling mistakes compile without any message and only show up on the phone. The one that does fail is a misspelt reference inside the tag:

You wrote	Write instead	What you will see
<span style="color:red">${hh_sise}</span>	The exact name from the survey sheet	Reference variables must contain a name from the 'survey' sheet. Could not find the name 'hh_sise'.
<span style="color:red">Red (no closing tag)	Close it with </span>	No error; the rest of the label may turn red or show the tag
A ## Heading cell with a second line	The heading alone in its own note	No error; the heading styling breaks
This_is_important_	This is *important*	No error; the underscores show as typed
**Bold** inside a question label	Bold in a note, or plain label text	No error; looks the same as the rest of the label
A coloured choice label in a KoboToolbox web form	Words that work without colour	No error; colour or tag missing in Enketo
font-size in the span style	A Markdown header such as ##	No error; ODK documents only colour and font family

For other messages, see common XLSForm errors, or paste the form into the free XLSForm validator.

Does this work the same in ODK, KoboToolbox and SurveyCTO?

The text sits in the same label and hint cells everywhere, but each app draws it differently:

Platform	Markdown (bold, italics, headers)	Span colour and font	Choice labels
ODK Collect and ODK Web Forms	Yes	Yes	Yes
KoboToolbox (KoboCollect)	Yes	Yes	Yes
KoboToolbox web forms (Enketo)	Yes	Not supported per the ODK docs; test it	No
SurveyCTO	Use HTML through the form designer	HTML in field labels	Web forms only, not SurveyCTO Collect

SurveyCTO formats labels with HTML through its form designer's editor, and HTML display can be switched off in SurveyCTO Collect's admin settings, so check that setting if tags show as raw text. If one form must run on more than one platform, keep styling light and test it in each app.

If your form uses several languages, style each label:: column on its own: the tags are part of the text, so a translator must keep them (see adding languages to an ODK form).

When is styling worth it?

Use it where a misread costs data: interviewer instructions that must not be read aloud, section headings that show the enumerator where they are, and a summary note that asks for a final check. Colouring every question does the opposite, because nothing stands out any more. For how a question is drawn rather than how its text looks (dropdowns, Likert rows, signature pads), use the appearance column, and for the full list of types see XLSForm question types.

Build my first form free

Next: XLSForm appearance column →