Form Styling

Labels, hints, and choices in an XLSForm can all be styled using Markdown, ref:fonts and colors <custom-fonts-colors>, and Emoji.

Markdown

XLSForm supports limited used of Markdown.

Headers

Labels and hints can be styled with one of six header levels.

# Header H1

## Header H2

### Header H3

#### Header H4

##### Header H5

###### Header H6
A note widget in Collect. The label is a large headline reading "Largest Headline - H1". The hint text is "This note has a label with a Markdown-style header."
A note widget in Collect. The label is six headlines of decreasing size, with text describing the size as: H1, H2, H3, H4, H5, H6.

A comparison of headline sizes. This exact effect cannot be produced using Markdown.

Warning

If a Markdown header is used, the label or hint can only be one line of text. Line breaks in the XLSForm cell will break the header styling.

A note widget in Collect. The label text is "## Attempted h2 Label Header (line break) A line below the headline". The hint text is "### Attempted H3 hint headline (line break) Here is some text below the headline."

XLSForm

survey
type name label hint
note broken_header
## Attempted H2 Label Header

A line below the headline
### Attempted H3 hint headline,

Here is some text below the headline.

Emphasis

Collect's Markdown support also includes bold and italic styling.

_italic_

*italic*

__bold__

**bold**

Note

The label of a form widget is already bold, so bolding text within the label has no effect. Similarly, the hint text of a form widget is already in italics, so italicizing text within the hint has no effect.

A note widget in Collect. The label text is "This label has bold and italic text." The hint text is "This hint has bold and italic text." The words "bold" and "italic" are styled to appear bold and italic.

XLSForm

type name hint label
note emphasis This label has bold and italic text. This hint has bold and italic text.

Escaping Markdown

New in version 1.15.

If you want to include literal asterisks or underscores, escape them with a back-slash (\). If you want to include a literal back-slash, you'll need to escape that too.

XLSForm

type name label hint
note escape_md # This headline is normal sized *Asterisks* and _underscores_ and one slash: \

Inline HTML

Many Markdown implementations support inline HTML, but Collect only supports a small subset of HTML elements. Support of HTML is further limited because:

  • Your exact Android device, operating system version, and other device-related factors will affect what HTML can be rendered, and how it is rendered.
  • HTML is not supported by other form rendering tools in the XForms ecosystem. For example, HTML elements that work in Collect may not work in Enketo.

For these reasons, we do not recommend using HTML in forms (except the <span> element noted below).

Fonts and colors

To add custom styling to hint, label, and choice labels, use the style attribute on a span tag. The style attribute accepts CSS-like key-value pairs for setting color and font-family.

  • For color, try one of the named HTML color values or use a hex color.

  • For font-family, it is best to use generic font categories rather than specific fonts:

    • serif
    • sans-serif
    • monospace
    • cursive
    • fantasy

    This will ensure support across most devices. You can also use specific font choices, but you should test these on the actual devices being used.

Note

These two attributes, color and font-family, are the only style attributes supported in Collect.

A note widget in Collect. The label text is "Going red", and the word "red" is colored red. The hint text is the source markup for the label: Going <span style="color:red">red</span> A note widget in Collect. The label text is "Going green", and the word "green" is colored green. This hint text is the source markup for the label: Going <span style="color:#008000">green</span> A note widget in Collect. The label text is "Cursive text", style in a cursive font. The hint text is the source markup for the label: <span style="font-family:cursive">Cursive text</span> A single select widget in Collect. The label text is "Formatting works on labels for choices also." The choices are "Yes" (which is colored green) and "No" (which is colored red). A note widget in Collect. The label text is "Color and font styling can be combined." The label is large, purple, and in cursive.

XLSForm

type name label
note red Going <span style="color:red">red</span>
note green Going <span style="color:#008000">green</span>
note cursive <span style="font-family:cursive">Cursive text</span>
select_one yn colored_choices Formatting works on labels for Choices also.
note combo # <span style="font-family:cursive;color:purple">Color and font styling can be combined.</span>
choices
list_name name label
yn yes <span style="color:green">Yes</span>
yn no <span style="color:red">No</span>

Emoji

Emoji can be used in form labels, hints, and answer choices.

Note

The exact visual representation of each emoji character is controlled by the device operating system, and may vary from device to device. If possible, you should check how your rendered forms look on the devices you are using for data collection.

A single select widget in Collect. The label text is "What is your current pain level?" The options are seven increasingly-unhappy emoji faces.

XLSForm

survey
type name label
select_one pain pain_level What is your current pain level?
choices
list_name name label
pain 1 🙂
pain 2 😐
pain 3 🙁
pain 4 😦
pain 5 😧
pain 6 😩
pain 7 😱