Discuss

Creating Multi Steps Forms

On this page

Got a long form on your website? Break it up into smaller logical sections and convert it into a multi-step form easily. In this tutorial we will show you a very basic form, but you can extend it as per your requirements adding more inputs, using different layout etc.


Creating a Variable

First we need to add a variable on our page. This variable will control the active step in our form. In the App Structure panel, add new component:

Screenshot_1|690x417

Open the Data menu and select Variable:

Screenshot_2|690x417

We call the variable steps and set its value to 1. This way the first step will be displayed on page load:

Screenshot_3|690x417

Creating the Form Layout

Now, we need to add the form on the page. We will nest the form into a container, but you can use it in whatever element you need. First we add a container on our page:

Screenshot_5|690x417

Then we click the Add Inside button to add the form inside it:

Screenshot_6|690x417

Select Form:

Screenshot_7|690x417

Your form has been added on the page. Later you can adjust its settings - like method or make it a server connect form if you need to run any server action with it. We already covered this in other tutorials so we won't show this again.

Now, let's add the content inside the form. Click the Add Inside button:

Screenshot_8|690x417

And add a row. Add as many rows, as your steps will be. Every row represents a separate step:

Screenshot_9|690x417

In our case there will be 3 steps, so we added 3 rows:

Screenshot_10|690x417

Click the Add Inside button in the first step (row). Add a column there:

Screenshot_11|690x417

We set the column width to 12:

Screenshot_12|690x417

Then inside the column add your inputs, which are required for this step. Choose if you want to add separate fields, or use any of the available form group layouts (horizontal/vertical). We click the Vertical Form group, as we need to use the vertical form group layout. Then we add a text input:

Screenshot_13|690x417

Add as many inputs/form groups here as you need. We only need one input in this step, so we won't add anymore.

Add the Next Step Buttons

Let's add and configure the "Next" button for this step. Click the add after button, to add it after your last input in this step:

Screenshot_14|690x417

And add Button:

Screenshot_15|690x417

Select a button style, and leave its type to Default:

Screenshot_16|690x417

Double click to edit the button text - we added Next. Then with the button still selected, add new dynamic event:

Screenshot_17|690x417

Select Mouse > Click:

Screenshot_18|690x417

And click the dynamic action picker:

Screenshot_19|690x417

Select the Set Value action, under the steps variable in the data picker, and add it:

Screenshot_20|690x417

Select the dynamic data picker for the value:

Screenshot_21|690x417

In order to go to the next step, we need to add +1 to the existing variable value. So, select the variable value and add +1 to it:

Screenshot_22|690x417

Click the Select button to apply the dynamic event to the next button:

Screenshot_23|690x417

You can disable the next button, if the input is empty. Add new dynamic attribute:

Screenshot_24|690x417

Select Input > Disabled:

Screenshot_25|690x417

Then select when the Button should be disabled. We want it to be disabled, when the text input has no value, so in the dynamic data picker, we select the input value and add a ! in front of it. The expression looks like: !input1.value:

Screenshot_26|690x417

Do the same for all the steps, which require a Next Step button.

NOTE: this example is only showing one input per step. If there are more inputs in your steps and you want to check all of them, you will need to adjust your expression accordingly. A step with 3 inputs will use an expression like: !input1.value && !input2.value && !input3.value to disable the next button.

Add the Previous Step Buttons:

In all the steps, except for the first one we will need a Previous Step button. Assuming that you have followed the steps above and added your steps, with inputs and Next buttons - now select the Next button in the second step. Then click the Add Before icon:

Screenshot_27|690x417

And add a Button:

Screenshot_28|690x417

This will be our Previous Step button. We style it differently, and leave its Type to Default:

Screenshot_29|690x417

With the Previous Step button still selected, add new dynamic event:

Screenshot_30|690x417

Select Mouse > Click:

Screenshot_31|690x417

And click the dynamic action picker:

Screenshot_32|690x417

Select Set Value under the steps variable in the data picker and add it:

Screenshot_33|690x417

In order to go to the previous step, we need to subtract 1 from the variable value. So we select the variable value and add -1 to it:

Screenshot_34|690x417

Click select to apply the dynamic event to the Previous Step button:

Screenshot_35|690x417

Do the same for the rest of the steps, which need a Previous Step button.

In the last row (step) we add the submit button, which will be used to submit the form:

Screenshot_36|690x417

Converting Form Sections to Steps

In order to turn a row into a separate step we need to use the dynamic attributes. Select the first row and add new dynamic attribute:

Screenshot_37|690x417

Select Display > Show:

Screenshot_38|690x417

Click the dynamic data picker icon in order to setup when should this step be displayed:

Screenshot_39|690x417

We need to show the first step, when the variable value is equal to 1. Select the variable value and add == 1 after it:

Screenshot_40|690x417

Now our first section will be displayed, when the value equals 1. Do the same for all of your rows (steps) adding the appropriate condition there (== 2 for the second step, == 3 for the third .. etc.)

Add Steps Status

You can add text showing the current step below your form. Select the Form and then add new component:

Screenshot_41|690x417

Select Insert After and open the Content menu, then add Paragraph:

Screenshot_43|690x417

Double click the paragraph in design view, to edit its content:

Screenshot_44|690x417

We enter Step and select the dynamic data picker icon:

Screenshot_45|690x417

We select the variable value here:

Screenshot_46|690x417

And then we enter the rest of the text:

Screenshot_47|690x417

The status will display Page 1 of 3 when we are on the first step.

This is the final result:

multistep|690x237

You can extend the form as per your needs. You can add as many steps as you wish and also add as many inputs as you need inside the steps.