# Nested Wizard Forms

This workflow demonstrates how to display the Nested Wizard's pages as a sub-navigation within the Parent Wizard, allowing users to seamlessly navigate between sections. By integrating a Nested Wizard, users can interact with multi-step forms within a larger parent form structure. This approach enhances user experience by organizing complex workflows into manageable steps while maintaining a clear and structured navigation flow.

{% hint style="info" %}
By default, the [**Wizard Form**](https://help.form.io/userguide/forms/form-types#wizard) utilizes the [**Panel**](https://help.form.io/userguide/forms/form-building/form-components/layout-components#panel) component as the UI for the Wizard Navigation Pages. When a new Wizard page is created within the Form Builder, a Panel will be added to the form to represent the fields and content of that page. 
{% endhint %}

## The Problem

At times, you may want to add a Nested Wizard page to a Parent Wizard form to add more granular control over user navigation between sections. Here is an example Wizard Form that will be used as a Nested Form inside a Parent Wizard. 

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FXg39kOEklHFb8OUmgyTk%2FChildwizard.jpg?alt=media&#x26;token=9cfc9618-3992-43fc-85a2-deb759b6b07c" alt=""><figcaption></figcaption></figure>

When a Nested Wizard form is introduced into a Parent Wizard form, the Nested Wizard pages will be added to the Parent Wizard navigation bar.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FhPVXS5ecQYbJWGRe0Jbb%2Fchildwizardpages.jpg?alt=media&#x26;token=447f4616-be3d-455d-b49b-95c1b023bc9c" alt=""><figcaption></figcaption></figure>

In most cases, this interface is not ideal, as users typically prefer the Nested Wizard navigation pages to be separate, functioning as a sub-UI within the Parent Wizard page, as shown below.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FNmhtXhj2BElyGPgCN9kT%2Fsubnavigation.jpg?alt=media&#x26;token=a9e7adf6-d2d0-4a84-a0cf-452ccdd098a3" alt=""><figcaption></figcaption></figure>

## Solution

This example will showcase how to utilize a layout component, liken the [**Panel**](https://help.form.io/userguide/forms/form-building/form-components/layout-components#panel) component to improve the wizard page navigation UI.&#x20;

{% embed url="<https://www.loom.com/share/a24d281530c24f0f97a2ad0a3b96084e>" %}

### Create Child Wizard

Create a Wizard form that will be included in the Parent Wizard.

1. Navigate to a Project and create a new **Form**.
2. Click the **Display as Form** and select **Wizard**.&#x20;

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FxkYVkKEjw8Xb3wN1sAxL%2Fformtype.jpg?alt=media&#x26;token=39d41c09-6e3f-452c-a099-591a5645b416" alt=""><figcaption></figcaption></figure>

3. Create **Wizard Pages** by clicking the **+Page** button
4. Add fields to the **Wizard** pages

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fc5OYIvNQX3mvsRO2nRA4%2Fchildwizard1.jpg?alt=media&#x26;token=e94d06cc-8c23-4c38-9d6e-053b653dcf9b" alt=""><figcaption></figcaption></figure>

### Create Parent Wizard

A parent form will be needed to house the Nested Wizard pages.&#x20;

1. Create a new **Form**
2. Click the **Display as Form** and select **Wizard**.&#x20;
3. Create **Wizard Pages** by clicking the **+Page** button

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fyt07jlPogYr9CD0tZlr5%2Fparentwizard.jpg?alt=media&#x26;token=f2e563cc-4d89-48d4-9533-54068379e47a" alt=""><figcaption></figcaption></figure>

4. Add a **Panel** component to the page of the Parent Wizard a Nested Wizard should be added to.&#x20;

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FjVvdn37aCaUcyzfjkxPE%2Fpanel.jpg?alt=media&#x26;token=0b80ab76-cfb4-4784-8923-25e3d661b468" alt=""><figcaption></figcaption></figure>

5. Check the **Hide Label** within the Panel settings to remove the Panel title from the form.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fwep0GsIEn8er8YftNRCa%2Fhidelabel.jpg?alt=media&#x26;token=f228d910-1355-4d57-ba2f-e6dfdc398df5" alt=""><figcaption></figcaption></figure>

6. Add the **Nested Form** inside the Container component

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FcbH4xSsnT8TXMaagp0zt%2Fnestedform.jpg?alt=media&#x26;token=57810fbf-81b3-49ee-bf57-a17579ddff1b" alt=""><figcaption></figcaption></figure>

7. Click the **Form** dropdown and select the **Child Form**
8. **Save** the Form

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fe84XNZiScP3Ceh8kvcjn%2Fselectnesteform.jpg?alt=media&#x26;token=828c8dce-f154-4477-8fcd-e728b6bf819b" alt=""><figcaption></figcaption></figure>

9. **Use** the Form to confirm the UI is working as expected.&#x20;

{% hint style="info" %}
The Nested Form inside the Container should present its own wizard pages separately, positioned beneath the Parent Wizard's navigation bar.
{% endhint %}

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FqiveARPz5wtKS75iQs2Y%2Fapplicationgif.gif?alt=media&#x26;token=3e50c93d-f4a7-415f-87ae-855745438b53" alt=""><figcaption></figcaption></figure>

## Things To Consider

* Wizard button labels (Cancel, Previous, Next) and functionality can be customized to enhance the user experience.\
  [**Custom Wizard**](https://formio.github.io/formio.js/app/examples/customwizard.html)[ **Documentation**](https://formio.github.io/formio.js/app/examples/customwizard.html)
* If Wizard navigation is not needed, consider using the [**Tab**](https://help.form.io/userguide/forms/form-building/form-components/layout-components#tabs) component as an alternative.&#x20;