You can include questions in your form that display images or that play video or audio files by including a media column in your XLSForm. Files referenced should be included in your form's media folder.
Adding an image to a question displays the image as part of the question.
|select_one yesnodk||coffee||Do you want coffee?||mug.jpg|
|yesnodk||dk||I don't know|
Adding audio to a question adds a play/stop button that controls the audio clip.
|text||feel||How does this song make you feel?||amazing.mp3|
Adding video to a question adds a button that will play the video clip full screen when clicked.
|integer||people||How many people do you see in the video?||people.mp4|
Audio and video on questions can also be played automatically when a question is viewed by adding an autoplay column specifying either audio or video.
|text||feel||How does this song make you feel?||amazing.mp3||audio|
Some considerations for autoplaying:
- Audio/video included in select choices will be autoplayed after the question's media in display order
- If using a field-list appearance for a group no media will be autoplayed
- Appearances for selects that hide buttons will disable autoplay for media
Labels and hints can be styled with one of six header levels.
# Header H1 ## Header H2 ### Header H3 #### Header H4 ##### Header H5 ###### Header H6
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.
## Attempted H2 Label Header
A line below the headline
### Attempted H3 hint headline,
Here is some text below the headline.
Collect's Markdown support also includes bold and italic styling.
_italic_ *italic* __bold__ **bold**
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.
|note||emphasis||This label has bold and italic text.||This hint has bold and italic text.|
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.
|note||escape_md||# This headline is normal sized||*Asterisks* and _underscores_ and one slash: \|
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
font-family, it is best to use generic font categories rather than specific fonts:
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||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>|
To add alignment to hint, label, and choice labels, use the style attribute on a p or div tag.
|select_one options||select_question||<p style="text-align:center">Centered label</p>||<p style="text-align:center">Centered hint</p>|
The style will be applied to the list of selected choices and that this might have unexpected results especially if used with a select_multiple question.
Emoji can be used in form labels, hints, and answer choices.
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.
|select_one pain||pain_level||What is your current pain level?|