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:

And the result 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:

And the result in ODK Collect:

Hyperlinks

hyperlinks are also supported. When clicked they will open in the device’s default browser. Below is the syntax:

[Link anchor text](link.url)

Example:

And the result in ODK Collect:

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:

And the result in ODK Collect:

Font family example:

Option set example:

Note

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