> For the complete documentation index, see [llms.txt](https://kb.craftformswp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.craftformswp.com/documentation/form-building/create-form/multi-step-forms.md).
# Multi-Step Forms
Split a long form into steps: a few fields per screen, with **Next** and **Back** buttons and a progress bar. With CraftForms PRO, the answers can decide which step comes next, and a form can run as a conversational form that asks one question per screen, full screen if you like.
> **Beta.** Multi-step forms are new in CraftForms 2.2 and marked as beta. They are ready to use, but their design and settings may still change after we hear your feedback.
### What you need
* **Steps, Next/Back and Step Progress** work in the free version.
* **Jump rules** (go to a different step depending on the answers), the **conversational layout** and the **full-screen link** need **CraftForms PRO**. On the free version, a form that has them still works: the steps run in order, in the classic layout.
### Add steps to a form
1. Open your form (**CraftForms → Forms → Edit**).
2. Add the **Steps** block. It starts with two steps.
3. Put your fields inside the steps. Each step can hold any blocks: fields, columns, groups, an InfoBlock, a chart.
4. Click **Add step** under the last step (or **+** in a step's header) to add more.
5. Put the **Submit button** in the last step.
**Already have a form?** Select its fields, open the block toolbar's **Transform** menu and choose **Steps**. The fields become Step 1; add more steps and move fields into them.
Blocks outside the Steps block stay visible on every step. Use this for a Step Progress bar or a running price total. Keep the **Notification** block outside the steps too.
#### See all steps while you edit
All steps stay open in the editor, one under the other. Each step has a tab above it, like **Step 2 · 3 fields · Then → 3. Contact**: its number, its title (type to change it), how many fields it holds and where it leads (**Ends with Submit** on the last step). The tab is only in the editor; the step itself shows in your form's own colours, with no grey card around it. Use the arrow in the tab to fold a step, or **Collapse all** / **Expand all** in the Steps toolbar.
### Steps settings
Select the Steps block to see these in the sidebar:
* **Require a valid step to continue** (on by default). **Next** checks the fields of the current step and shows their errors. The visitor can't move on, or submit, until they're fixed. Turn it off to let visitors move freely; the fields are then checked when the form is submitted.
* **Move on after a single choice.** When a step's only question is a single choice (radio buttons), picking an answer goes straight to the next step.
* **Show step titles**, **Scroll to the top of the form on step change**.
* **Next button text** and **Back button text** for all steps.
Select a single step to set its **Title**, a short **Progress label** for the progress bar, and its own **Next**/**Back** texts.
### How visitors move through the steps
* **Next** checks only the current step. Errors on steps the visitor hasn't reached yet stay hidden.
* **Back** goes to the step the visitor came from, without checking anything. After a jump from step 1 to step 4, Back on step 4 goes to step 1.
* **Enter** in a field goes to the next step (on the last step, it submits).
* If the visitor goes back and changes an answer so a field is no longer valid, they can't move forward past that step, or submit, until it's fixed.
* If the submit fails, the form opens the step with the first error.
* A step whose fields are all hidden by [Field Conditions](https://kb.craftformswp.com/documentation/form-building/create-form/form-settings-post-context/field-conditions) is skipped.
* After a successful submit (with the form set to clear), the form goes back to step 1.
### Show progress
Add the **Step Progress** block anywhere in the form outside the steps (above them is usual). Pick a style in the block's **Styles**:
* **Numbered steps**: circles joined by a line, with step labels. On phones only the current step keeps its label.
* **Bar**: a bar with "Step 2 of 4" and, if you like, the current step's name.
* **Labels**: the step names in a row, the current one underlined.
* **Text only**: "Step 2 of 4".
In the numbered and labels styles, visitors can click a step they've already seen to go back to it. Turn this off with **Let visitors click a step to go to it**. The count text can be changed; `{current}`, `{total}` and `{label}` are replaced.
The count follows the visitor's path. Steps the answers skip drop out, so "Step 2 of 4" can become "Step 2 of 3" when the visitor picks an answer that skips a step.
The colour follows the form style. To choose your own, select the Step Progress block and open **Styles → Color**: **Accent** (next to **Text** and **Background**) colours the done and current steps, the filled part of the bar and the underline.
### Go to a different step depending on the answers (PRO)
1. Select the step the visitor leaves (for example **What can we help with?**).
2. In the sidebar, open **After this step** and click **Add rule**.
3. Pick where to go (**Go to**): another step, or **Submit the form** to end the form here.
4. Set the conditions, as in Field Conditions (for example **Service is "Just a question"**), and click **Save rule**.
5. Choose **Otherwise go to**: the next step (default), another step, or Submit.
The first rule that matches wins; use **Move up** to change the order. The step's tab shows the rules under it ("If Service is 'Just a question' → 4. Contact", "Otherwise → 2. Details").
Good to know:
* A rule can only use answers from **this step or earlier ones**. A rule that uses a later answer is flagged in the sidebar.
* Fields on steps the visitor skips are left out: they aren't checked, used in formulas or sent. The server works this out from the submitted answers too, so a required field on a skipped step never blocks the submit.
* A step that no rule or "next" leads to gets a dashed border and **No step leads here**.
### The step map
The step map shows every step and where it can lead.
* **The strip** next to the steps in the editor shows the steps from top to bottom. Grey arrows are the plain "next" flow, blue curves are jump rules, dashed curves are "otherwise" jumps. Click a step to select it. Turn the strip on or off with **Map strip** in the Steps toolbar; it hides itself when the editor is narrow.
* **The full map** opens with **Step map** in the Steps toolbar, or **Open** on the strip. The steps sit in one row in their order, so the plain "next" flow is a straight arrow. Jumps forward curve above the row and jumps back curve below it, each on its own lane, so lines don't cover each other. Click a step (or press Enter on it) to open it in the editor.
* With PRO, click a jump's label to change or remove it, drag from a step's edge to another step (or to **Submit**) to add a jump, or drag the end of an arrow to another step to point it there. Doing that with the plain "next" arrow sets the step's **Otherwise go to**.
* You can drag the steps around to look at the map more closely. Their places aren't saved: **Tidy** (in the map's controls) or closing the map puts them back.
### Conversational forms (PRO)
A conversational form asks one question per screen, in large type, and moves on when the visitor clicks an answer or presses **Ctrl+Enter** (**⌘+Enter** on a Mac).
1. Select the Steps block.
2. Set **Layout** to **Conversational (one question per screen)**.
In this layout:
* Each step fills the screen (60% of the screen height when the form sits in a page, the whole screen on its full-screen link).
* **Ctrl+Enter** (**⌘+Enter** on a Mac) moves on, the same in every field (the button reads **OK**, with a hint next to it). Plain Enter adds a new line in a multi-line text box and never submits by accident.
* When a step has one choice field, its choices get letter keys: **A**, **B**, **C**… The letter takes the place of the radio button or checkbox and is highlighted when chosen.
* Clicking an answer in a single-choice step moves on by itself. An answer chosen with the arrow or letter keys waits for Ctrl+Enter or OK, so keyboard users can look through the choices first.
* Each step is always checked before moving on.
* If the form has no Step Progress block, a thin progress bar is shown at the bottom.
**Make it work well:** one question per step. Give the step a title that asks the question, then one field. You can add an InfoBlock or a chart next to it. Use radio buttons for choices, and keep the contact details and Submit button in the last step.
**Not for every form.** Conversational works best for lead forms, quizzes, surveys and booking requests. A product configurator with a live price is usually clearer with classic steps, where the visitor sees more at once.
### Full-screen link (PRO)
Give a form its own page, without your theme around it, to share as a link, in a newsletter or as a QR code. This works best with the conversational layout, but works for any form that doesn't depend on the page it's on. When a form uses the conversational layout, the Steps block shows the link (or **Set up**) under **Layout**.
1. Open the form and, in the sidebar on the **Form** tab, open **Full-screen link**.
2. Turn on **Share as a full-screen page**.
3. Optional: set the **Link name** (the end of the address; taken from the form title when empty), a **Page title** and a **Description** (shown when the link is shared on social media or in a chat).
4. **Hide from search engines** is on by default.
5. **Save** the form. It must be published.
The panel then shows two links you can copy:
* `yoursite.com/f//`
* `yoursite.com/?craftforms_form=