Customize ODK forms with fonts, colors, sizes, and links

May 3, 2016

Nafundi has added new styling options to ODK Collect that let form designers change fonts, colors, sizes, and add clickable links to ODK forms. Styling can be added using Markdown, a popular and easy-to-use markup language.

ODK Collect 1.4.9's Markdown support allows for increased emphasis through bold and italics, different sized headers, various fonts and colors, and even clickable web links. Markdown tags can be added to your existing forms, and in the table below, we show the results of adding these tags to your form.

Label in XLSForm Result in ODK Collect
normal text
<span style="color:red">red color</span>
<span style="font-family:cursive">cursive font</span>
<span style="font-family:monospace">monospace font in a sentence with no breaks</span>
[clickable link](http://example.com)
<span style="color:#f58a1f; font-family:serif">*[Nafundi.com link in serif font, italic style, and orange color](https://nafundi.com)*</span>
# large <span style="font-family:cursive">cursive</span> header
### medium *italic* header
###### small <span style="color:blue">blue</span> header

For more advanced users, ODK Collect supports HTML tags like <br>, <big>, <small>, and <h1> through <h6>. And you can even add your favorite emojis 😍📋😍!

Interested in customizing your own ODK forms with fonts, colors, sizes, and links? Follow the steps below, and as always, if you need help designing your forms, contact our ODK experts.

  1. Upgrade to ODK Collect 1.4.9 or greater in the Google Play Store.
  2. Download the Markdown Demo XLSForm file.
  3. Convert the XLSForm to XML. We recommend XLSForm Offline.
  4. Upload it to your favorite ODK server. We recommend ODK Aggregate VM.
  5. Enjoy your stylish new forms!

Recent posts