Creating a Multi-Page Form
Last updated
Last updated
In this tutorial, you will learn how to create a multi-page form using Umbraco Forms. Multi-page forms are particularly useful when you need to collect detailed information from users in a structured and user-friendly way.
Multi-page forms are ideal for use cases such as event registration, job applications, booking a meeting, and so on.
Pre-built Website including a Document Type with the Form Picker Data Type.
Log in to the Umbraco backoffice.
Go to the Forms section.
Click + next to the Forms folder.
Select New Form.
Enter a Name for the form. For example: Book a Meeting.
Click Save.
Let us begin by adding some fields to the first page of the form. By default, the Data Consent field is already available, and we will call this group Data Consent.
To create a new group:
Click Add new group.
Enter the Name of the group. For example: Personal Information.
Click Add question.
Select Short answer as the field type.
Enter a Name for the field type. For example, First Name.
Select Text as the Field Type from the drop-down list.
Mark the field as Mandatory.
Click Submit.
Click Save.
Similarly, you can also add other relevant fields such as last name or email based on your requirements.
For this tutorial, the following fields are added with the respective specifications:
| Field Name | Data Type | Field Type |
|---|---|---|
Surname | Short answer | text |
Age | Short answer | number |
Country | Short answer | text |
Phone number | Short answer | tel |
Email address | Short answer |
If you wish to reorder your fields, click Reorder.
To create a multi-page form, you need to add more pages:
Click Add new page to create the second page of your form.
Enter a Name for this page. For example: Company Information.
Click Add question.
Select Short answer as the field type.
Enter a Name for the field type. For example, Company Name.
Provide a Default Value. For example, Enter the name of your company.
Click Submit.
Click Save.
Similarly, you can also add other relevant fields based on your requirements.
Umbraco Forms allows you to customize the flow of your multi-page form. You can add conditional logic to control which questions appear based on user inputs.
To add conditions, follow these steps:
Click Add question.
Select Single choice as the field type.
Enter a Name for the field type. For example, Do you work with Umbraco.
Enter the Value and Caption in the Options field.
For this tutorial, the following values are added:
Yes
No
Mark the field as Mandatory.
Click Submit.
Click Save.
Repeat steps 1-4 to create a conditional question titled: If yes, how many years?
Enter the Value and Caption in the Options field.
For this tutorial, the following values are added:
1-5 years
5-10 years
10+ years
Enable Conditions.
Set the parameters for the condition as follows:
Show this field if all of the following match:
Question: Do you work with Umbraco?
Condition: is
Value: Yes
Click Submit.
Click Save.
Click Add new page to create the final page of your form.
Enter a Name for this page. For example: Products.
Click Add question.
Select Multiple choice as the field type.
Enter a Name for the field type. For example, Select the products you are interested in.
Enter the Value and Caption in the Options field.
For this tutorial, the following values are added:
Umbraco CMS
Umbraco Cloud
Umbraco Deploy
Umbraco Heartcore
Umbraco Forms
Umbraco Commerce
Umbraco Workflow
Click Submit.
Click Save.
Once you are satisfied with your multi-page form, it is time to embed it on your website.
To display the form on the website, follow these steps:
Go to the Content section.
Click + next to the parent page of the website.
Select the Document Type.
Enter a Name for the page. For example, Book a Meeting!
Select the Book a Meeting form using the Form Picker.
Click Save and Publish.
If you wish to customize the Form Settings, see the Form Settings article.
For Umbraco Forms to work correctly, you need to include some client dependencies. For more information, see the Preparing Your Frontend article.
To render the Form on the frontend, see the Rendering Forms article.
Go to the Info workspace view of the Book a Meeting! page.
Click on the Published link in the Links section.
Fill out the form to see how it functions.
Submit the form to ensure it redirects to a Thank You page.
Go to the Forms section in the Backoffice.
Navigate to the Book a Meeting Form.
Click on the Entries tab and verify that the data is captured.
You have successfully created a multi-page form with conditional logic in Umbraco Forms. By using multi-page forms, you have made complex data entry much simpler and more user-friendly. This not only improves the experience for your users but also makes your forms more efficient and manageable.
