diff --git a/14/umbraco-forms/SUMMARY.md b/14/umbraco-forms/SUMMARY.md index 384060d3142..0667960b549 100644 --- a/14/umbraco-forms/SUMMARY.md +++ b/14/umbraco-forms/SUMMARY.md @@ -72,3 +72,4 @@ * [Overview](tutorials/overview.md) * [Creating a Contact Form](tutorials/creating-a-contact-form.md) +* [Creating a Multi-Page Form](tutorials/creating-a-multipage-form.md) diff --git a/14/umbraco-forms/tutorials/creating-a-multipage-form.md b/14/umbraco-forms/tutorials/creating-a-multipage-form.md new file mode 100644 index 00000000000..4bd749367e8 --- /dev/null +++ b/14/umbraco-forms/tutorials/creating-a-multipage-form.md @@ -0,0 +1,187 @@ +# 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](../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](images/create-form.png) + +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](images/first-page-of-form.png) + +## 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](images/company-information.png) + +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](images/prevalue-fields.png) + +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](images/conditional-question-part-1.png) + +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](images/conditional-question-part-2.png) + +12. Click **Submit**. +13. Click **Save**. + +![Company information Questions on the Second Page](images/page-2-details.png) + +## 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](images/multiple-choice.png) + +7. Click **Submit**. +8. Click **Save**. + +![Products Selection Question on the Final Page](images/Final-page.png) + +## 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](images/pick-document-type.png) + +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](images/Form-Content-section.png) + +## Customize Form Settings + +If you wish to customize the Form Settings, see the [Form Settings](../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](https://docs.umbraco.com/umbraco-forms/developer/prepping-frontend) article. + +To render the Form on the frontend, see the [Rendering 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](images/form-data-entry.png) + +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. diff --git a/14/umbraco-forms/tutorials/images/Final-page.png b/14/umbraco-forms/tutorials/images/Final-page.png new file mode 100644 index 00000000000..d418c911578 Binary files /dev/null and b/14/umbraco-forms/tutorials/images/Final-page.png differ diff --git a/14/umbraco-forms/tutorials/images/Form-Content-section.png b/14/umbraco-forms/tutorials/images/Form-Content-section.png new file mode 100644 index 00000000000..5b60689923d Binary files /dev/null and b/14/umbraco-forms/tutorials/images/Form-Content-section.png differ diff --git a/14/umbraco-forms/tutorials/images/company-information.png b/14/umbraco-forms/tutorials/images/company-information.png new file mode 100644 index 00000000000..8208c9af31e Binary files /dev/null and b/14/umbraco-forms/tutorials/images/company-information.png differ diff --git a/14/umbraco-forms/tutorials/images/conditional-question-part-1.png b/14/umbraco-forms/tutorials/images/conditional-question-part-1.png new file mode 100644 index 00000000000..ca2b9b83d18 Binary files /dev/null and b/14/umbraco-forms/tutorials/images/conditional-question-part-1.png differ diff --git a/14/umbraco-forms/tutorials/images/conditional-question-part-2.png b/14/umbraco-forms/tutorials/images/conditional-question-part-2.png new file mode 100644 index 00000000000..eabde810d2d Binary files /dev/null and b/14/umbraco-forms/tutorials/images/conditional-question-part-2.png differ diff --git a/14/umbraco-forms/tutorials/images/create-form.png b/14/umbraco-forms/tutorials/images/create-form.png new file mode 100644 index 00000000000..b735f9d1e9f Binary files /dev/null and b/14/umbraco-forms/tutorials/images/create-form.png differ diff --git a/14/umbraco-forms/tutorials/images/first-page-of-form.png b/14/umbraco-forms/tutorials/images/first-page-of-form.png new file mode 100644 index 00000000000..5e0c6c742bd Binary files /dev/null and b/14/umbraco-forms/tutorials/images/first-page-of-form.png differ diff --git a/14/umbraco-forms/tutorials/images/form-data-entry.png b/14/umbraco-forms/tutorials/images/form-data-entry.png new file mode 100644 index 00000000000..0d66f6f1847 Binary files /dev/null and b/14/umbraco-forms/tutorials/images/form-data-entry.png differ diff --git a/14/umbraco-forms/tutorials/images/multiple-choice.png b/14/umbraco-forms/tutorials/images/multiple-choice.png new file mode 100644 index 00000000000..d4abe0b3ed1 Binary files /dev/null and b/14/umbraco-forms/tutorials/images/multiple-choice.png differ diff --git a/14/umbraco-forms/tutorials/images/page-2-details.png b/14/umbraco-forms/tutorials/images/page-2-details.png new file mode 100644 index 00000000000..4285fc810be Binary files /dev/null and b/14/umbraco-forms/tutorials/images/page-2-details.png differ diff --git a/14/umbraco-forms/tutorials/images/pick-document-type.png b/14/umbraco-forms/tutorials/images/pick-document-type.png new file mode 100644 index 00000000000..6d3f1b2f9be Binary files /dev/null and b/14/umbraco-forms/tutorials/images/pick-document-type.png differ diff --git a/14/umbraco-forms/tutorials/images/prevalue-fields.png b/14/umbraco-forms/tutorials/images/prevalue-fields.png new file mode 100644 index 00000000000..f713a9f6212 Binary files /dev/null and b/14/umbraco-forms/tutorials/images/prevalue-fields.png differ