App appearance
Everything below lives in App settings → Design → Appearance. Colours, fonts and corner radius sit in the Palette section next to it, and the two are deliberately independent: you can recolour an app without rearranging it, and rearrange it without touching a single colour.
One long page, or one step at a time?
The one setting here that changes how the app is actually used, not just how it looks — the difference between reading a whole form on one page and being walked through a phone survey one screen at a time.
| Option | What a respondent sees |
|---|---|
| Stacked page | Every step laid out on one long page, top to bottom. The default, and the right choice for a short programme with only a step or two. |
| One step at a time | A page per step, with a progress bar, numbered chips for each step, and Back / Next buttons. The Submit button only appears on the final step. |
Paging suits a long programme, where one page holding every question at once feels discouraging to even open. It changes nothing about how the report is actually filed — answers still autosave as you go, and everything is still submitted together at the end, exactly as it would be on a single stacked page.
Moving between steps never loses anything, in either layout: you can jump forward and back freely using the chips — including to a step you have not reached yet — and every answer stays exactly as typed.
How wide the page runs
Think of this as choosing a newspaper column width versus a spreadsheet's: a narrow column is easy to read top to bottom, a wide one suits something you scan across. Every option here is only an upper bound, so a phone renders exactly the same regardless of which you choose — this setting only matters on a laptop or a desktop screen.
| Width | Best for |
|---|---|
| Narrow | A short, reading-length form — the same measure a single stand-alone form already uses. |
| Medium | A general-purpose middle ground. |
| Wide | The default. Several steps, or a step that repeats many times. |
| Full width | Many short fields side by side at once, or a wide matrix question. |
The header
The banner at the top of the app — its title, description and reporting period. Four treatments, from a plain card to a full photograph behind the title.
| Style | What it is |
|---|---|
| Plain card | Title, description and period shown on a plain card. The default. |
| Solid colour | Your brand colour filling a band behind the title — needs no image at all. |
| Cover image | A full-bleed photo with the title sitting over it, like a magazine cover. |
| Slim bar | A single line with a rule underneath — for dense, internal tools where every pixel of vertical space counts. |
How each step's heading looks
The visual style used for every step's own title, independent of whether the app is paged or stacked.
- Underlined heading — a plain title with a rule beneath it. The default.
- Numbered timeline — numbered discs joined by a connecting line, so the sequence of steps is visible at a glance, like a train line map.
- Collapsible — each step folds away once it is finished, useful when a step holds many repeated entries and would otherwise dominate the page.
- Plain heading — the title alone, with the least visual chrome around it.
A collapsed step reopens on its own the moment submission finds a problem inside it — an error can never hide behind a folded-away section.
Spacing and background
Spacing— compact, comfortable or spacious — controls the room around the page, the gaps between steps, and the padding inside cards. It does not touch the spacing between individual fields inside a form, which stays fixed so a form looks identical whether it is opened inside an app or on its own stand-alone link. “Compact” makes things tighter, not smaller.
Background paints dots, a grid, a soft gradient, or a single accent bar across the top of the page. All of it is drawn from your own theme colours — no image to upload, and nothing that can ever clash with your palette.
Layout and field widths
Design → Layoutdecides how the individual fields inside each step are arranged, and it is the one setting that governs whether a question's half or full width — set back when the form itself was built — is actually honoured here.
| Option | Effect on every step |
|---|---|
| Stacked | One field per row, no matter how the form itself was originally built. |
| Two column | Narrow fields pair up side by side, again regardless of how the form was built. |
| Follow each form | Each step uses the exact layout its own form was designed with, so a question's own width setting is respected. |
Choose Follow each form when
- Your forms were each designed individually, with deliberate field widths.
- One step is a dense grid of short codes and another is mostly long-answer text.
- You are using one step at a time — each step is already its own page.
Impose one layout when
- The steps should read as one continuous document, not several different ones stitched together.
- The forms were never given specific widths, so there is nothing to inherit from them.
- A column count that changes from step to step would look like something is broken.
A conversational form (one question per screen) is always shown stacked inside an app, regardless of this setting — an app already paces the respondent with its own steps, and one question at a time nested inside a paged step would be a wizard trapped inside another wizard.