> ## Documentation Index
> Fetch the complete documentation index at: https://docs.feedal.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Layouts
> Choose how your form is structured on the page — Clean card, Navbar header, or branded Split panel.
A **layout** defines the page structure around your form card — where the navbar lives, whether there's a sidebar, how branding appears, and where the progress bar sits. The form card (questions, answers, buttons) is always the same; only the surrounding chrome changes.
Select a layout in the **Design → Customise → Layout** section. A thumbnail grid shows all available layouts. Switching layouts immediately updates the studio canvas preview.
***
## Built-in layouts
### Clean (default)
The simplest layout — a single centered form card on a plain page with no navbar.
```
┌──────────────────────────────────────────┐
│ │
│ [ Logo / Brand name ] │
│ │
│ ┌──────────────────────────────────┐ │
│ │ │ │
│ │ Question card │ │
│ │ │ │
│ └──────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
```
**Best for:** Minimal forms, surveys, quick polls. Keeps full attention on the question.
| Config option | Default | Description |
| ------------------- | ------- | ------------------------------- |
| Show progress bar | On | Slim bar at the top of the page |
| Show question count | Off | "Question 1 of 5" counter |
***
### Navbar
A sticky top navbar containing your logo and brand name, with the form card centered in the remaining space.
```
┌──────────────────────────────────────────┐
│ [ Logo ] Brand name │ ← sticky navbar
├──────────────────────────────────────────┤
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░│ ← progress bar
│ │
│ ┌──────────────────────────────────┐ │
│ │ Question card │ │
│ └──────────────────────────────────┘ │
│ │
└──────────────────────────────────────────┘
```
**Best for:** Branded forms, lead capture, onboarding flows. The navbar keeps your brand visible throughout.
| Config option | Default | Description |
| ------------------- | ------- | -------------------------------- |
| Show progress bar | On | Slim bar just below the navbar |
| Show question count | Off | "Question 1 of 5" counter |
| Navbar shadow | On | Subtle drop shadow on the navbar |
| Navbar border | Off | 1 px border under the navbar |
***
### Split
A two-column layout with a branded coloured sidebar on the left and the form card on the right.
```
┌────────────────┬─────────────────────────┐
│ │▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░│ ← progress bar
│ [ Logo ] │ │
│ Brand name │ ┌───────────────────┐ │
│ │ │ Question card │ │
│ Current │ └───────────────────┘ │
│ question │ │
│ title here │ │
│ │ │
│ [ image ] │ │
└────────────────┴─────────────────────────┘
```
The sidebar uses your **primary colour** as its background. On mobile screens the sidebar collapses into a slim header bar at the top.
**Best for:** High-stakes forms, research surveys, brand-forward experiences. The sidebar gives context to every question.
| Config option | Default | Description |
| ------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
| Show progress bar | On | Slim bar at the top of the right pane |
| Show question count | Off | Counter at the bottom-right of the right pane |
| Sidebar width | 38% | Width of the sidebar, between 30% and 50% |
| Show question title in sidebar | On | Displays the current question's title and description in the sidebar as the respondent progresses |
| Sidebar image URL | — | Optional decorative image shown at the bottom of the sidebar |
The sidebar automatically shows the current question's title as the respondent progresses — no extra setup needed. This gives respondents context without repeating it on the form card.
***
## Layout config vs. theme config
Layout config (progress bar, sidebar width, etc.) is stored **inside** the theme under `layout.config`. Saving a theme saves the layout choice and its settings together — switching themes also switches layouts.
***
## Next steps
Fine-tune colors, fonts, shape, and branding.
Developer guide for registering your own layout.