# 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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-LcqeUtKPOemLpWVpn1c%2Fshot-mini-20190419-15781-1i6poxz.jpeg?alt=media\&token=41c89074-4863-4aa4-a314-8ac7c9592908)

## Structure

* When this page is added to your app, it will come with two main groups:
  * `Group Standard Forms` - This group contains modules that are connected to workflows. Each `Group Tab` within this group will show or hide depending on which progress step the user is currently on.
  * `Group page860Group` - This group contains the responsive settings for all additional modules you add through Canvas Pages. 
* This page will come with a `Popup Hidden Variables`. For more information on how to use the `Popup Hidden Variables`, [click here](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup).
  * `var - Website object` - This group stores the website object (e.g., app name, primary color, and etc.)
  * `var - dummy` - This is a placeholder group. You can store any data here by updating the type of content and data source of the group.
* This module will come with three reusable elements:
  * [`header A`](https://docs.airdev.co/canvas/assets/reuseables/header)
  * [`footer`](https://docs.airdev.co/canvas/assets/reuseables/footer)
  * `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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-Lcqn9UnTd6YTvDLlWsC%2FScreen%20Shot%202019-04-19%20at%2011.02.46%20AM.png?alt=media\&token=fed94a2e-a96d-48a9-b260-eb01712be432)

* `Button BACK` goes to a previous progress step
* `Button NEXT` goes to the next progress step
* The page comes with a `step` url parameter. Users can load the page to show a specific and its corresponding module 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.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-LcqvkQ2uBK3ABwzk9H_%2FScreen%20Shot%202019-04-19%20at%2011.49.44%20AM.png?alt=media\&token=cd76d80d-daf7-4db9-b968-005320c70cbc)

* \[OPTIONAL] Remove `Group Tab 1`, `Group Tab 2`, `Group Tab 3`, `Group Tab 4`, `Group Tab 5`, or `Group Tab 6`.
* \[OPTIONAL] Resize `Group page860Group` and add other modules inside of it
  * Make sure you update the condition statements on those modules.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcqdnlLuAKfHrbJF99I%2F-LcqyRQ6FuIKiI5Ujom1%2FScreen%20Shot%202019-04-19%20at%2012.01.28%20PM.png?alt=media\&token=1ed83721-b35d-41de-a0cd-fd4918c4f5da)

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