Skip to main content

2 Step Forms

Learn how to use routing to have a 2 step form process 

If you're looking to have a 2 step form process, this screenshot tutorial will help you do that. 

The objective is to be able to accept some form inputs on step 1, route the user to step 2, and complete adding the record details. 

The process revolves around using the Submit Rules in a form and routing the user to a details page for this data table. 

For our example, we're going to be using a Customers table with the following fields:

14Z1ZGFZfmBLQZj-WnY1xQkGbh3z8iNLfA.png

Next, let's add a new page with a table, form, and record details for each record. This will allow us to see all the customers, add new customers, and see their details (which will be used for updating customers as well). 

s7l9U4FdhujF6wXX7bL3c0fyJdO5vQWbnA.png

Once you've added the page, add a Table component 

kCZ_p5KER0I2qEmgnCDwGyA12vkMIK7oEQ.png

and choose the customers table, and then + Quick Add 

u7XGRg6NMV2SJOppdbHDzHWB8p9ZUueXBA.png

In the following screen, be sure to choose Yes for "Include inline form to add Customers?" and "Include link to Customers Details page" 

SxoPQl4SiChJEVyJ1kOU1EWxTwfAth4YMw.png

Two new pages will be automatically created- the Add New Customer page as well as the Customer Details page. Open the Add Customers Page:  

lvemGFcMGv53sbKE0k_WMOCD0F_1S5wiaw.png

Lets click on the form to edit it. 

mI8OQ8vsvbk3SzKY7JkVboIKFbb_jImdEg.png

Since in the first step of this form process we only want to ask for the customer's name, we'll remove all the fields except for the customers name.  

OoAM1ncDKz0gMrNx9lb2jpwx8RJUzaApjQ.png

Next we need to route our users to the Customer Details Page where they'll complete this signup process. To do that: 

  1. Click on Form Rules
  2. Select Submit Rules
  3. Under Action, choose Redirect to an existing page
  4. In Page, select Customers > Detail Customers Page

GYlo-xcxQJZxOjP3QuJtvZ3Z4aebRcwhvw.png

Great! Now when users click to save the record they'll be routed to the details page of this new record being created. In the details page, we must now add a form to update this record so they can complete adding the record. 

Open the Details Customers Page and either remove the details component (if you wish) 

aqADWRt_v7GjynuZCy5filpAxTTiqm8qNA.png

or simply add a new Form component 

Zy0x_8tGgc3E1TLKs7M6v9dK8hgCBhe98Q.png

Then be sure to select Update this page's customers 

VegyQzHx8NiEcXETbEcHDZXzeCpPL2-Qgg.png

Finally, press Quick Add. 

When users create a new record they will be routed to a second page to complete this process, as can be seen here: 

xnShds8OH3tvqGljNpcuOyGwq7Rc5xJ3Bg.gif

Please note this can be done with any details page. You can add an Edit form onto any details page and then route users directly to that page.  
Back to top