# Sections And Multi-Step Forms

Long forms feel shorter when questions come a few at a time. Group them into
sections, and your live form takes people through them one step at a time.

## In The App: Sections And Steps

Add sections in the **Builder**, and rename or reorder them under **Flow**. A form
with two or more sections shows one at a time on its hosted page and in a script
embed, with Next and Back buttons and a counter such as "Step 2 of 4". A form with
one section stays on a single page. The preview in the app shows every section
together, so you can review them all at once.

- **A check at each step.** Next checks the current step on the server and shows
  any errors on the fields. To skip that check for a step, turn off **Validate
  before Next** under **Flow**. Submitting always checks the whole form, and a
  rejected answer brings people back to its step.
- **Enter moves forward.** Before the last step, pressing Enter in a field works
  like Next.
- **A summary for each section.** Add one under **Flow**, and it shows below the
  section's heading.
- **Sections that depend on an answer.** Set a section's **Visibility** under
  **Flow**. A section with nothing to show is skipped, and the counter follows.
- **Your form's language.** The buttons and the counter appear in French or
  English, to match the form.

## With The SDK Or API: Your Own Steps

Next and Back and section summaries are part of the hosted page, so the script embed
and the SDK's `mountFormerieEmbed()` helper, which load that page in an iframe, have
them too. `mountFormerieRuntimeForm()` and `mountFormerieForm()` get them with the
next SDK release, and `mountFormerieEmbed()` gets automatic resizing, which the
script embed already has.

If you build your own form UI, you can show one section at a time today. The public
schema lists each section as a step, and Formerie checks one step on the server.

npm:

```sh
npm install @formerie/client
```

pnpm:

```sh
pnpm add @formerie/client
```

Yarn:

```sh
yarn add @formerie/client
```

Bun:

```sh
bun add @formerie/client
```

```ts
import { FormerieRuntimeClient } from "@formerie/client";

const forms = new FormerieRuntimeClient();

const check = await forms.validate("example.com", "intake", {
  step: "your-project",
  fields: answers,
});
```

Your code handles the page changes, the progress display, and keeping the answers
between steps. A step check stores nothing and sends no email. The final
`submit()` validates the whole form again, and that result is the one that counts.
See [Validation](/guides/validation/) for the response shape.