Multi-Step Form

Multi-Step Form splits a form into steps. Visitors see one step at a time, and each step is checked before the next one opens. All answers are sent together when they press Submit.

Activate XPAC Forms before using this add-on. It has no settings page; you set it up in the form editor.

Build a form with steps

The Multi-step layout gives each step these buttons:

Back uses the Outline style. Steps fade in, which you can change in the Steps settings. Once the form is sent, it goes back to the first step and shows its success message; to show only the message, see After sending.

Add steps to an existing form

The layout choice shows only while the Form builder is empty. In a form that already has fields:

Work with steps in the editor

The editor shows one step at a time. To open another step:

• select a step and use the arrows or the step menu in its toolbar;
• click the step in the Step progress block;
• select the step, or any block in it, in List View.

Add step adds a step after the one you are on, with Back and Continue buttons. It is in the toolbar of each step and of the Steps block, and in the Steps block's sidebar.

With a step selected, the + block inserter at the top of the editor adds blocks to that step, above its buttons. A step that holds only its buttons shows its own + above them.

Step titles

Select a step and type its Title in the sidebar. The title shows in the Step progress block, in List View and in the step menu of the toolbar. Screen readers hear it with the step number, such as Step 2 of 3: Details. Without a title, a step shows only its number in the progress block and the step menu, and List View calls it Step.

Step buttons

Each step ends with a Step buttons row. Back sits on the left; Continue and Submit sit on the right. Buttons in a row share one height. When the row is narrow, as on a phone, the buttons stack at full width with Continue or Submit on top.

Select the row and press its + to add one of these blocks:

A new Next button reads Next and a new Back button reads Back; type over a label to change it. A form can have as many Back and Next buttons as it needs. On the site, Back and Next hide when there is no step to go to.

To style a Back or Next button, select it and open the Styles tab. Set colours, typography, padding and border, or pick Fill or Outline. In a Step buttons row, Outline shows a border with no fill.

Show a button only when rules match

Put a button inside Conditional logic to show it only when the visitor's answers match your rules. For example, for Submit:

While the rules do not match, the button is hidden and disabled. A Continue button held back this way also stops Enter from moving on. See conditional logic for how rules work.

Step progress

The Step progress block shows visitors where they are. The Multi-step layout puts one above the steps; you can add one anywhere in the form from Utils, and a form can have more than one. It lists the steps of the form's Steps block and needs at least two of them.

Choose its Type in the Settings tab:

The other settings depend on the type:

Custom counter text can use {current}, {total}, {percent} and {title}. For example, {title} · {current}/{total} reads Details · 2/4. {percent} counts the current step as done, so step 1 of 4 is 25%. Choosing Circle turns Step 1 of 3 into 1/3, which fits inside the ring.

Under Appearance:

Under Step colors, Active paints the current step, Finished the steps already done, Upcoming the steps ahead and the empty part of a line or bar, and Active number the number or check in a filled marker. Each type lists only the colours it uses.

The alignment buttons in the block toolbar place the progress left, centre or right, or stretch it across the form. A vertical Stepper has none. Text, background, typography and spacing are in the Styles tab.

On a narrow screen, a horizontal Stepper with more than three steps shows its counter text and a bar instead. With step names beside the markers, this starts at three steps.

Theme defaults

Theme authors can set defaults for every Step progress block in theme.json, under settings.custom.xp-form.step-progress:

{
	"settings": {
		"custom": {
			"xp-form": {
				"step-progress": {
					"active": "var(--wp--preset--color--primary)",
					"completed": "var(--wp--preset--color--primary)",
					"track": "#e5e7eb",
					"active-text": "#ffffff",
					"marker-size": "2.25rem",
					"line-weight": "3px"
				}
			}
		}
	}
}

Colours picked on a block win over these. Sizes S and L, lines Thin and Thick, and every size and line of the Circle use fixed values.

Skip a step

Skip logic uses Forms' built-in conditional logic. For example, skip a delivery address step when the visitor chooses collection.

The sidebar then reads Skip this step if all conditions match (or any), with the conditions below it.

A matching rule skips the step. Its fields are not required, and its answers are not submitted, stored or emailed. Rules update as visitors change their answers, and the progress counts again without the skipped step: Step 2 of 4 becomes Step 2 of 3.

If the current step is skipped, the form opens the next available step, or the last available step if there are none ahead. If the last step is skipped, its Submit moves into the button row of the new last step until the step comes back.

When setting up rules:

• Base them on answers from earlier steps to keep navigation predictable.
• Leave at least one step without a skip rule. If every step is skipped, the form hides its steps, disables Submit and shows No form steps are currently available.
• Use the step's skip rule to remove a whole step. Hiding its fields one by one can leave an empty step.
• Check rules after deleting or renaming a field they use. Password and Confirmation fields cannot be used in rules.

Steps settings

Select the Steps block, for example in List View, to change how the steps behave. Its sidebar has Add step, Behaviour and, when something needs attention, Checks.

A Steps block you add yourself starts with None, and the Multi-step layout uses Fade. After sending is set on the Form builder.

Checks

The sidebars of the Steps block and of each step show a Checks panel when something may stop visitors from finishing. For example:

• This form has no Submit button. Add one to the last step.
• Submit is outside the steps, so visitors see it on every step. Move it into the last step.
• Submit is in step 2, so visitors can send the form before step 3.
• Step 1 has no Continue button, so visitors can't move on.

Press Select on a check to select the block it is about. Checks are advice: nothing is moved for you, and you can still save. A Submit you put in an earlier step on purpose, for example inside Conditional logic, can stay where it is.

After sending

Once the form is sent, it clears the answers, goes back to the first step and shows its success message. To keep only the message on screen, select the Form builder, the block that holds the whole form, for example in List View. In its Settings tab, set After sending to Show the message only. The steps, the progress and the buttons then hide. A form with no success message to show resets instead.

Forms without steps have the same setting; see After sending in the Forms guide.

What visitors see

• Continue checks the answers in the current step. If one is missing or invalid, the step stays open and the first invalid field gets focus.
• Back goes back without checking. Answers stay in the form when visitors move between steps.
• Pressing Enter in a field moves on, like Continue. On the last step it sends the form. In a text area, Enter starts a new line.
• After each move, focus goes to the first field of the new step. If the progress is above the screen, the page scrolls back up to it.
• Screen readers hear each move, such as Step 2 of 4: Details, whichever progress type you use.
• If a submission is rejected, the form opens the first step with an invalid field.
• On a phone, a long horizontal Stepper folds into counter text and a bar, and button rows stack.
• Visitors who ask their device for less motion get no fade and no smooth scrolling.

Test the form with your theme, including keyboard navigation.

Forms with shared Next and Previous buttons

Older forms have one Next button and one Previous button after the Steps block, shared by every step, with Submit inside the last step. They keep working as they are. The Previous button is now called Back button.

To give each step its own buttons:

You can switch one step at a time: on a step with its own button, the shared one hides. Until a step has its own row, Add step adds an empty step. As long as the shared Next button is there, Checks does not ask for a Continue button in each step.

Limits

• A form can have one Steps block.
• Step progress needs at least two steps. With fewer, it shows nothing on the site.

Developer reference