Pages split one form into validated steps while keeping every answer in the same response.
When to add a page
Add a page when the respondent hits a clear phase change, when a follow-up shouldn't distract from the first decision, or when a long form needs a visible sense of progress. Related questions can stay together — Fillo doesn't force one question per page.
In the dashboard
- Select Add block where the next step should begin.
- Choose Page break.
- Give the new page a short title when the phase needs explanation.
- Reorder fields within the page.
- Preview Back, Next, validation, and narrow-screen behavior.
The built-in renderer shows progress on a multi-page form unless showProgress is false.
In code
const onboarding = defineForm({
id: "onboarding",
pages: [
{
id: "account",
title: "Your account",
blocks: [
{ id: "email", kind: "email", label: "Work email", required: true },
],
},
{
id: "goals",
title: "What you need",
blocks: [
{ id: "goal", kind: "long_text", label: "What are you trying to do?" },
],
},
],
settings: { showProgress: true },
});Page IDs are jump targets, so keep them stable when logic points to them.
Layout limits
The default React and DOM renderers stack blocks in one column. There's no column-width or grid-position setting in the schema. Use the appearance slots for visual spacing, or reach for FilloProvider or createFormController when your app needs a multi-column layout.
Progress shows the current reachable page position. Page jumps and early end can change which pages are reachable — and the shared logic engine uses that same path during server validation.