Multi-step webforms guide
- Jo Tayler
Multi-step forms can be used to reduce cognitive load for users when a form has lots of questions. This may contribute to successful form completion instead of abandonment.
Read our other guides on creating Drupal webforms. Make sure you understand the privacy requirements.
Getting started
Create a new form as usual (Structure > Webforms > Add webform).
Give it a name and category (if relevant, i.e. department).
Embed the form on a Landing page.
Setup the onboarding and success pages.
Pages for multistep forms
All Drupal webforms then have to be embedded on a page. The user experience guidance around multi-step forms is that they should have 3 pages:
onboarding screen, setting user expectations and providing information about how many steps the form has, approximately how long it will take and what happens after submission
screen with the form embedded - having the multi-step form on its own screen with no other content improves the likelihood of completion of long and complex forms
a success page that appears after submission of the form, confirming the information has been submitted and providing next steps. This screen should also include a link back to the page where the user started (where they were before entering the multi-step form suite of pages)
Creating the steps
Multi-step forms have pagination called Steps. These are used to break up a long form into sections. It can be a less-overwhelming user experience and may reduce form abandonment.
To add steps, you use the ‘Add page’ button at the top of the screen.
When you click Add page, you’ll see these fields on the right side of the screen:
Title (mandatory)
Previous page button label - you can leave this blank as it defaults to display ‘Back’.
Next page button label - our UX guidance is that this should always be labelled ‘Continue’ (not ‘Next’).
The Title will display as a Heading 2 on the website. Each step should have a descriptive heading, such as such as ‘Your contact details’.
Keep adding your step pages and questions.
Final step: Confirm and submit
On the final screen of multi-step forms, the user is shown a summary of all their answers. In the CMS you create this with the Review component. On the summary screen, each response has a Change link that takes the user back to update individual responses.
The helps to:
increase users’ confidence as they can clearly see that they have completed all the sections and that their data has been captured
reduce error rates as users are given a second chance to review their information and correct errors before submitting the form.
You need to
Create a ‘page’ and give it the title ‘Confirm and submit’.
Add the element ‘Review component’.
Drag your privacy statement to be indented under the Confirm and submit page.
Drag the Submit button to be indented as well.
Example: CMS view
Here’s what a completed form looks like in the CMS. Note the indenting of questions under the pages. This is how you arrange the elements into the steps.
To add more questions or text, you can either:
click the Add element button at the top. If you choose this, you’ll have to drag your question into position and indent it under the relevant ‘page’
click the Add element button next to the ‘page’. If you choose this, your question will be placed under the ‘page’.
Example: live website view
Here’s how each of the steps looks on a live site.
If a required field is not filled in and the user clicks the next button, you’ll see an error.
Here’s the step 2 page:
Here’s the step 3 page:
Here’s the final screen, which shows all the user’s answers and provides opportunity to go back or jump to a particular question.
Here’s a bit of the above screen but on smaller screen/mobile
After the user submits the form, all form fields are cleared and a success message is displayed:
