# Creating a Multi-Page Form

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.

## Prerequisites

* [Umbraco CMS Installation](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install)
* [Umbraco Forms Package](https://docs.umbraco.com/umbraco-forms/installation/install)
* Pre-built Website including a **Document Type** with the **Form Picker** Data Type.

## Log in to the Umbraco Backoffice

1. Log in to the Umbraco backoffice.
2. Go to the **Forms** section.

## Create a New Form

1. Click **+** next to the Forms folder.
2. Select **New Form**.

![New Form Creation](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-b735f9d1e9fbbc8708279f5064853cf597aa8f71%2Fcreate-form.png?alt=media)

3. Enter a **Name** for the form. For example: *Book a Meeting*.
4. Click **Save**.

## Set up the First Page of the Form

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:

1. Click **Add new group**.
2. **Enter the Name** of the group. For example: *Personal Information*.
3. Click **Add question**.
4. Select **Short answer** as the field type.
5. **Enter a Name** for the field type. For example, *First Name*.
6. Select **Text** as the **Field Type** from the drop-down list.
7. Mark the field as **Mandatory**.
8. Click **Submit**.
9. 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 | email      |

If you wish to reorder your fields, click **Reorder**.

![Personal Information Questions on the First Page](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-5e0c6c742bd92fdc9499611b9c8b977a3f83c2d1%2Ffirst-page-of-form.png?alt=media)

## Create the Second Page

To create a multi-page form, you need to add more pages:

1. Click **Add new page** to create the second page of your form.
2. **Enter a Name** for this page. For example: *Company Information*.
3. Click **Add question**.
4. Select **Short answer** as the field type.
5. **Enter a Name** for the field type. For example, *Company Name*.
6. Provide a **Default Value**. For example, *Enter the name of your company*.
7. Click **Submit**.
8. Click **Save**.

![Default Value displayed](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-8208c9af31ea1bc67f6fe1e22f40799f8a5c0d34%2Fcompany-information.png?alt=media)

Similarly, you can also add other relevant fields based on your requirements.

### Add Conditional Logic

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:

1. Click **Add question**.
2. Select **Single choice** as the field type.
3. **Enter a Name** for the field type. For example, *Do you work with Umbraco*.
4. Enter the **Value** and **Caption** in the **Options** field.

   For this tutorial, the following values are added:

   * Yes
   * No

![Values in the Options Field](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-f713a9f6212954aa2d821062c9d6503fff119d47%2Fprevalue-fields.png?alt=media)

5. Mark the field as **Mandatory**.
6. Click **Submit**.
7. Click **Save**.
8. Repeat steps 1-4 to create a conditional question titled: *If yes, how many years?*
9. 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

![Conditional Question Values in the Options Field](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-ca2b9b83d18dec83ab84e7626126e080e7a74931%2Fconditional-question-part-1.png?alt=media)

10. Enable **Conditions**.
11. 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**

![Values for adding a Condition](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-eabde810d2d6244126b28e29c81c026cd8af71aa%2Fconditional-question-part-2.png?alt=media)

12. Click **Submit**.
13. Click **Save**.

![Company information Questions on the Second Page](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-4285fc810be2eef24f7b492c936d59756105e1e2%2Fpage-2-details.png?alt=media)

## Create the Final Page

1. Click **Add new page** to create the final page of your form.
2. **Enter a Name** for this page. For example: *Products*.
3. Click **Add question**.
4. Select **Multiple choice** as the field type.
5. **Enter a Name** for the field type. For example, *Select the products you are interested in*.
6. 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

![Multiple Values in the Option Field](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-d4abe0b3ed187d2ae84ae8f93c61a51cfca9e24a%2Fmultiple-choice.png?alt=media)

7. Click **Submit**.
8. Click **Save**.

![Products Selection Question on the Final Page](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-d418c91157888e61691dd404a161e785cad50868%2FFinal-page.png?alt=media)

## Embed the Form on a Web Page

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:

1. Go to the **Content** section.
2. Click **+** next to the parent page of the website.
3. Select the Document Type.

![Pick a Document Type](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-6d3f1b2f9be5a7c227f85ec56468dd932c74ecae%2Fpick-document-type.png?alt=media)

4. **Enter a Name** for the page. For example, *Book a Meeting!*
5. Select the **Book a Meeting** form using the *Form Picker*.
6. Click **Save and Publish**.

![New Page created in the Content Section](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-5b60689923d57a73f148ccbfd5f6d96303e536bc%2FForm-Content-section.png?alt=media)

## Customize Form Settings

If you wish to customize the Form Settings, see the [Form Settings](https://docs.umbraco.com/umbraco-forms/editor/creating-a-form/form-settings) article.

## Rendering the Form on the Frontend

For Umbraco Forms to work correctly, you need to include some client dependencies. For more information, see the [Preparing Your Frontend](https://docs.umbraco.com/umbraco-forms/developer/prepping-frontend) article.

To render the Form on the frontend, see the [Rendering Forms](https://docs.umbraco.com/umbraco-forms/developer/rendering-forms) article.

## Testing the Form

1. Go to the **Info** workspace view of the *Book a Meeting!* page.
2. Click on the Published link in the **Links** section.
3. Fill out the form to see how it functions.
4. Submit the form to ensure it redirects to a Thank You page.
5. Go to the **Forms** section in the Backoffice.
6. Navigate to the **Book a Meeting** Form.
7. Click on the **Entries** tab and verify that the data is captured.

![Form Data in the Entries tab](https://2952072699-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGSopb46RaktUB1PRvxnI%2Fuploads%2Fgit-blob-0d66f6f1847ee2384edc4b99c6f15f03aa31a76c%2Fform-data-entry.png?alt=media)

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.