> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/pages/1-column-multi-step-process-page.md).

# 1-Column Multi-Step Process Page

## Overview

This page has a series of forms. Each form constitutes a "step" in the process. Users can go back and forth between steps and see what step they are on via a dynamic progress bar reusable element at the top of the page. This version is ideal for simple forms such as check out process and surveys.

## Structure

* When this page is added to your app, it will come with two main groups:
  * **Group Standard Forms**\
    This group contains blocks that are connected to workflows. Each **Group Tab #** within this parent group will show or hide depending on which progress step the user is currently on.
  * **Blocks container 860 (do not rename)**\
    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
* This page will come with two reusable elements:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)
  * **progressbar**\
    This reusable element contains the UI for the progress bar. It has a custom state called **step #** of type `number` which stores the current step # that the user is on.

![](/files/-MSljovi7wMohCtXM8RG)

* Clicking on **Button Back** goes to a previous progress step
* Clicking on **Button Next** goes to the next progress step
* The page also comes with a **step url parameter**. Users can load the page to show a specific step and its corresponding block by adding a url parameter (e.g, ?step=3). 

## How to set up

* Modify or update the progress bar steps within the **progressbar** reusable element to fit your needs.

![](/files/-LcqvkQ2uBK3ABwzk9H_)

* \[Optional] Remove **Group Tab 1**, **Group Tab 2**, **Group Tab 3**, **Group Tab 4**, **Group Tab 5**, or **Group Tab 6.**
* \[Optional] Resize **Blocks container 860 (do not rename)** and add other blocks inside of it
  * Make sure you update the conditional statements on those blocks. Use existing Group tabs as a reference and add a similar conditional statement:\
    \&#xNAN;*If new\_progressbar's step # is not {number} then this element isn't visible*

![](/files/-Lot8xkITwLFzRDKFTBq)

* Add workflows to **Button Back** and **Button Next**