# 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](/umbraco-forms/installation/install.md)
* 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](/files/0gyHTcjDAGTokqysG1bT)

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](/files/b7SltXRWoRcwZaxWfWCp)

## 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](/files/jHi0Yq3ZJ1AafQBN4UGG)

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](/files/TR2nni44yROp6iJznXLp)

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](/files/Mleu68HR2Y4y3VOC2EIv)

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](/files/ohKysouL8CpOWbjM9HJD)

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

![Company information Questions on the Second Page](/files/mMVZ3PoB3MQLcHrWvBYv)

## 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](/files/7MhX4Rcjm2nP3Jua6XLG)

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

![Products Selection Question on the Final Page](/files/MQ45eLbo4r0eg3k7vSu8)

## 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](/files/SPp8OBDvokmw4btLdtvr)

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](/files/p9EA1Ykw5xXoOtsivJig)

## Customize Form Settings

If you wish to customize the Form Settings, see the [Form Settings](/umbraco-forms/editor/creating-a-form/form-settings.md) 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](/umbraco-forms/developer/prepping-frontend.md) article.

To render the Form on the frontend, see the [Rendering Forms](/umbraco-forms/developer/rendering-forms.md) 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](/files/54dHRuIFtPaddpUolnTJ)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-forms/tutorials/creating-a-multipage-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.