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 contains a logically grouped field set. 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.
![Welcome page of a multi-step job application form with a Start button](https://formcrafts.com/_app/immutable/assets/multi-step-form-welcome-page.KsKycOIi.png)
![Personal information page of a multi-step job application form with various input fields and a next button](https://formcrafts.com/_app/immutable/assets/multi-step-form-page-2.BCiMdWLd.png)
![Other information page of a multi-step job application form with various input fields and a submit button](https://formcrafts.com/_app/immutable/assets/multi-step-form-last-page.w_b2mgML.png)
Why exactly are multi-step forms so effective? Cognitive Load Theory (1), developed by John Sweller, posits that the human brain can only process a limited amount of information at a time. Multi-step forms break complex tasks into smaller, more manageable chunks, reducing cognitive load. Plus, progressing through steps gives users a sense of accomplishment, which can increase motivation to complete the form.
Formcrafts was purpose-designed as a multi-step form builder, as opposed to a conversational layout offered by alternatives like Typeform ↗.
Key features of multi-step forms
Welcome page
Multi-step forms start with an optional welcome page. This is the first step of the form. The welcome page can contain a title, description, and a start button. What do you do with a welcome page?
- Share form instructions: Example, a job application form can have a welcome page that explains the position, and the application process.
- Share event details: A registration form for an event can have a welcome page that explains the event, associated fees, times, and location.
- Obtain user consent: A form that collects sensitive information can have a welcome page that explains how the data will be used.
For some forms, like a waitlist signup form ↗, your welcome page acts like a landing page. It can contain a hero image, a catchy headline, and a brief description of the form.
Branching 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:
![Creating conditional steps](https://formcrafts.com/_app/immutable/assets/conditional-logic-optional-form-step.CsSEkJyR.png)
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.
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 ↗:
Progress indicators
Formcrafts indicates progress through two ways. Firstly, the form shows a progress bar denoting the percentage of the form completed.
Secondly, near the next button, the form shows the current step number and the total number of steps (which excludes steps that are hidden due to conditional logic).
Creating multi-step forms in Formcrafts
All forms in Formcrafts are multi-step by default. A classic form, where all fields are shown on a single page, is simply a form with one step.
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.
![Adding a new step / page to a form](https://formcrafts.com/_app/immutable/assets/form-editor-add-step.2yRoZgTb.png)
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.
When to use multi-step forms
Multi-step forms are an incredible tool and work really well in situations like:
- Application forms
- Surveys, and market research forms
- Registration forms
- 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.
Templates and examples
Here are some multi-step form templates you can use to get started, ranging from surveys to applications:
![Customer satisfaction survey form template](https://formcrafts.com/_app/immutable/assets/customer-satisfaction-survey-form-template-thumbnail.DLZdnQmE.png)
![Partnership application form form template](https://formcrafts.com/_app/immutable/assets/partnership-application-form-template-thumbnail.CsPGzD0X.png)
![Small business loan application form form template](https://formcrafts.com/_app/immutable/assets/small-business-loan-application-form-template-thumbnail.BOdA6qh6.png)
![Workshop registration form form template](https://formcrafts.com/_app/immutable/assets/workshop-registration-form-template-thumbnail.q-G9bFro.png)