FormlyBeta

Skipping Steps

Let users skip further down to any part of the form!

You can add this attribute to:
‍
1. Radio buttons to let users choose where they want to skip to
‍
2. Step wrappers to pre-determine where use skips to from the current step.

You can still use data-go-to to show a specific step-wrapper in the step you skipped to.

Custom <div> attributes

data-skip-to

{step-number}

The {step-number} value should be a number. If you want to skip to step 4, it will be data-skip-to=4.

First step starts with an index of 1.

Example

Read-only

Clickable Progress Indicators

Quickly traverse through the forms by clicking on the progress indicators.

Add a '.disabled' combo class to your indicator and style it for your disabled indicator state.

Automatic indicators: Add attribute the element that has "data-form=progress" attribute

Custom indicators: Add attributes to the parent wrapper that contains all your custom indicators

Custom <div> attributes

data-clickable

true

This will only allow previous step indicators to be clickable and the next step indicator to be clickable if the current step has no required inputs or the inputs are filled out.

Custom <div> attributes

data-clickable-all

true

This will make every indicator clickable. The user cannot skip to the last step of the form and submit it. They will need to fill out all the required steps.

(Temporarily discontinued!)

Delete Hidden Inputs from Submission

You can choose if the inputs on branches that the user did not select get submitted.
‍
Please note that this can affect automation integrations like Webflow Logic, Zapier or Make as the form could receive different fields depending on user branch.

Add this attribute to the Form element.

Custom <div> attributes

data-remove-unfilled

true

Join the Slack community

Seek support, vote on new features, stay updated and network with other FormlyPros.

Join Slack community