Navigate Steps Conditionally

Create conditional rules for how the user navigates from one step of your form to another.

Steps

A step is the core building block of a form and can be thought of as a page. By default, every Feathery form begins with a single step, to which you can add components and fields, style, and assign a name (e.g. a contact form).

From there, you can create new, additional steps—from scratch or by duplicating existing form steps—and connect these steps to create multi-step forms (e.g. a customer onboarding flow).

In Feathery, steps can be found in the form builder and are visually represented as nodes. Navigation between steps can be built by hovering over the edge of a step until the "+" cursor appears, and then clicking and dragging a connecting line from that step to another.

Once a connection between steps has been created, it can be clicked to assign navigation rules that must be met to move the form user between the two steps.

Navigation Rules

Each navigation rule is made up of a target and conditions.

Target

A target is a form element (e.g. button or field) or the form itself that can be interacted with in order to trigger step navigation. This could be a clickable element (such as a button) or a field where changing its value triggers navigation to the next step.

Condition

A condition is a field value comparison that must be met in order for step navigation to trigger a particular rule. For example, the criteria could be a particular field value being equal to a preset value, or if the user has been authenticated or not.

See the detailed discussion of Logic Conditions.