top of page
Multistage Form

Multistage Form

Create a form split into multiple steps.

Intermediate.png

Beginner

17K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

This example demonstrates creating a form split into multiple steps.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

This example demonstrates how to use a slideshow element to create a form with a multistep layout. Each step in the form has its own dedicated slide in the slideshow. We also display a list of all the steps at the top of the page so users can go back, or skip a step. This list is not part of the slideshow.

 

To use the slideshow for splitting a form into steps, you need to turn off its autoplay feature (in Settings). Additionally, turn off the navigation arrows and slide buttons (in Layout).


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Velo.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Basic Form

Basic Form

Create a basic form without writing a line of code.

Intermediate.png

Beginner

Mega Search

Mega Search

Filter a repeater using multiple input components.

Intermediate.png

Advanced

Cascading Form

Cascading Form

Change the options of a dropdown based on a previous selection.

Intermediate.png

Intermediate

Collapsing Form

Collapsing Form

Collapse and expand sections of a form.

Intermediate.png

Beginner

Anchor 2
bottom of page