Multi-Step Forms

Introduction

Multi-step forms are a great way to improve the user experience of your web forms. They are especially useful for long forms that collect a lot of data.

Each step of a form can contain multiple fields. For the end-user this provides a much better experience than a long form with many fields, or multi-step forms where each step contains only one field.

Formcrafts was purpose-designed as a multi-step form builder, as opposed to a conversational layout offered by alternatives like Typeform ↗.

Adding steps to a form

To add a step to your form simply click on the Add Step button in the form editor. You can find the Add Step button at the end of the last step in your form, just before the default success message.

This will add a new step at the end of the form. You can also re-order form steps using the Move step up and Move step down buttons. You can find these buttons on the top-right corner of each step.

Eager navigation

Multi-step forms have a feature called eager navigation. When the user fills out the last field on a particular step the form will automatically move to the next step. This improves the user experience.

Note that eager navigation only works when the last field is a choice-type field, like multiple choice, dropdown, or rating.

Here is eager navigation in action for a customer satisfaction survey ↗:

Using conditional logic

You can use conditional logic to make steps optional. This is done using the show steps action.

Example, we have a dog adoption application form. On the first step we ask the visitor if they have existing pets. If they answer yes, we will show the Existing Pets step of the form. If they answer no, we will skip the Existing Pets step.

This is done using a conditional logic step:

Note: Using conditional logic here doesn’t automatically take the user to that step. It simply makes certain steps hidden or visible. The user still has to follow the normal flow of the form.

When to use multi-step forms

Multi-step forms are an incredible tool and works really well in situations like:

1. Application forms
2. Surveys, and market research forms
3. Registration forms
4. Evaluation forms

When NOT to use multi-step forms

Are multi-step forms always the best choice? Absolutely not. Multi-step forms suffer from a key disadvantage: you are potentially hiding the effort involved in completing the form. There are cases where this backfires:

• Short contact forms: Think of a simple contact form on a website which asks visitors for their name, email, and comments. You don't want this to be multi-step.
• Call-back lead generation form: A lead-gen form that collects some personal information and phone number. This form is meant to get leads in quickly, without friction. If your use-case doesn't require learning about customer requirements at this stage it makes more sense to use a traditional layout.
• Email signup form: You simply want their name and email. A multi-step form can give the impression that your form intends to collect more information, which isn't true.
• Some calculation forms: A form that is meant to *primarily* show the result of a calculation doesn't always need a multi-step layout. Being able to input information, and see the calculated result on the same page enhances the user experience.