# Nested Wizard Workflow
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://app.gitbook.com/s/6LdEf8SjBIeQDsRL3BdV/form-types#wizard) utilizes the [**Panel** ](https://app.gitbook.com/s/6LdEf8SjBIeQDsRL3BdV/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.
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.
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.
## Solution
This example will showcase how to utilize a layout component, liken the [**Panel** ](https://app.gitbook.com/s/6LdEf8SjBIeQDsRL3BdV/components/layout-components#panel)component to improve the wizard page navigation UI.
{% embed url="" %}
### 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**.
3. Create **Wizard Pages** by clicking the **+Page** button
4. Add fields to the **Wizard** pages
### Create Parent Wizard
A parent form will be needed to house the Nested Wizard pages.
1. Create a new **Form**
2. Click the **Display as Form** and select **Wizard**.
3. Create **Wizard Pages** by clicking the **+Page** button
4. Add a **Panel** component to the page of the Parent Wizard a Nested Wizard should be added to.
5. Check the **Hide Label** within the Panel settings to remove the Panel title from the form.
6. Add the **Nested Form** inside the Container component
7. Click the **Form** dropdown and select the **Child Form**
8. **Save** the Form
9. **Use** the Form to confirm the UI is working as expected.
{% 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 %}
## 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://app.gitbook.com/s/6LdEf8SjBIeQDsRL3BdV/components/layout-components#tabs)component as an alternative.
---
# 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://help.form.io/how/nested-form-workflows/nested-wizard-workflow.md?ask=
```
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.
