Form Styling

Titles, hints, and option sets can all be styled using Markdown, fonts and colors.

Markdown

Headers

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

# Header H1

## Header H2

### Header H3

#### Header H4

##### Header H5

###### Header H6

This is an example of how an H1 Header is set in NEMO/ELMO:

Set an H1 title in Markdown

And the result in ODK Collect:

H1 Markdown title in ODK Collect

Emphasis

ODK 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.

Example:

Bold and italic in NEMO/ELMO

And the result in ODK Collect:

Emphasis in titles and hints

Fonts and colors

Use the style attribute on a <span> tag to add custom 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.

Example:

Color in style attribute of a span tag

And the result in ODK Collect:

Color in question title in ODK

Font family example:

Font family example in ODK

Option set example:

Styled option sets in ODK

Note

This document is a derivative of the original Form Styling licensed under a Creative Commons Attribution 4.0 International License.