# Form structure

Pages, columns, drag-and-drop, and the progress bar.

## Form structure

Pages, columns, drag-and-drop, the progress bar, and the thank-you page — everything that controls your form's layout.

<h2 id="pages">Pages</h2>

<p>
  Every form starts as a single page. For short forms (under ~7 fields), that is usually enough. When a form gets longer or branches into
  different flows, split it into pages so respondents see one focused set of questions at a time.
</p>

<h3 id="when-to-use-multiple-pages">When to use multiple pages</h3>

- **7+ fields** — a long scroll feels heavy; pages break the work into manageable steps.
- **Mixed-purpose forms** — intake, payment, and confirmation each belong on their own page.
- **Conditional branching** — logic rules can jump to or skip whole pages based on answers.

<h3 id="adding-a-page">Adding a page</h3>

<p>
  Respondents navigate between pages with <strong>Next</strong> and <strong>Back</strong> buttons that formbase adds automatically. The
  final page shows a <strong>Submit</strong> button instead of Next. <strong>Back</strong> retraces the pages the respondent actually
  visited, so a page jump is undone step by step rather than dropping them on the page before.
</p>

<p>The thank-you page is not one of these pages — it is the screen after submitting, and it never appears in the page count.</p>

<h2 id="progress-bar">Multi-page progress bar</h2>

<p>A thin progress bar at the top of the form shows respondents how far along they are.</p>

<h3 id="how-it-works">How it works</h3>

> ℹ️ **Page jumps with logic**
> <p>
>     Conditional logic can jump to a specific page — for example, "If the respondent picks 'Self-employed', skip to page 4". The jump happens
>     when the respondent presses Next on the page with that question. On later pages, Next goes on in page order. A rule that reads only
>     hidden or calculated fields can jump from any page, but only forward. A page the jumps skip counts as hidden: its questions are not
>     required, and its answers are dropped. See <a href="/building-forms/conditional-logic">Conditional logic</a>.
>   </p>

<h2 id="columns">Columns</h2>

<p>
  Columns let you place blocks side-by-side. Use them for compact layouts — a name and email on one row, an image next to a description, or
  grouped choice fields.
</p>

<h3 id="adding-columns">Adding columns</h3>

> ℹ️ **What cannot go in a column**
> <p>
>     Logic, Hidden Field, Calculated Field, Page Break, Thank You Page, and a repeating group only work at the top level of the form. The
>     block menu hides them while the cursor is inside a column. A repeating group forbids a little more: Payment, Schedule appointment, and
>     Documents are also out, because a submission pays, books, and is handed documents once — not once per entry.
>   </p>

> ℹ️ **Responsive behavior**
> <p>Columns stack vertically on small screens. Respondents on mobile see one column at a time, so the form stays readable.</p>

<h2 id="drag-and-drop">Drag and drop</h2>

<p>Every block has a drag handle on its left edge. Grab it to reorder blocks within a page or move them between columns.</p>

<h3 id="reordering-blocks">Reordering blocks</h3>

- **Within a page** — drag a block up or down to change its position.
- **Between columns** — drag a block from one column into another.

<h3 id="block-menu">Block menu</h3>

<p>
  Click the drag handle (or tap the block indicator on touch devices) to open a menu. What it offers depends on the block; these are the
  entries you will meet most.
</p>

<p>
  Select several blocks at once — drag a rectangle around them, shift-click a second block to take the range, or press <kbd>Cmd/Ctrl+A</kbd>{' '}
  twice — and the same menu acts on all of them: turn into, required, title visibility, wrap into a group, duplicate, move, hide, delete.
</p>

<h2 id="repeating-groups">Repeating groups</h2>

<p>
  A repeating group is a labeled container that holds a set of member fields — like a "Add additional guests" group with Name and Age.
  Respondents add as many entries as they need, so you don't have to guess how many you'll get up front. Insert a fresh{' '}
  <strong>Repeating Group</strong> from the block menu, or select a run of existing fields and pick <strong>Create repeating group</strong>.
</p>

<p>
  For the full guide — building groups, filling them out, and how entries show up in submissions — see{' '}
  <a href="/building-forms/repeating-groups">Repeating groups</a>.
</p>

<h2 id="thank-you-page">Thank-you page</h2>

<p>
  Every form has a <strong>thank-you page</strong> — always the last page. It is what respondents see after they submit. Customize it with
  headings, images, links, and piped answers — or redirect to an external URL instead.
</p>

<p>
  For the full guide, see <a href="/building-forms/custom-thank-you">Custom thank-you page</a>.
</p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Question types](/building-forms/field-types) — Every question type and when to use each one
  - [Conditional logic](/building-forms/conditional-logic) — Show, hide, and branch based on answers
  - [Repeating groups](/building-forms/repeating-groups) — Let respondents add as many entries as they need
  - [Content blocks](/building-forms/content-blocks) — Images, videos, embeds, and rich text
</div>
