Multi Step Forms Silver Plan

A multi step form allows you to divide a form into multiple steps only showing a few questions at a time. This method allows for a better user experience and conversion on long forms.

Creating a Multi Step Form

Create a multi step form by following these two steps:

• Add an attribute of multistep to the form tag
• Wrap the fields you would like in each panel with <form-step>...</form-step>.

Adding a Header

There are two ways to add a header to each formstep:

Simple Header

Add a heading="..." attribute to the <form-step> tag with the formstep title as the value. This works well for simple headings that include only text. This attribute is not required and does not have to be unique.

Complex Header

If you need a more custom header with icons or images then create one inside a <div slot="heading"></div>.

Formstep Footer

The formstep will have a footer with the “previous” and “next” buttons. You can customize these buttons with the classes that are given to them.

• previous button: .kw-multistep-button .kw-multistep-button-previous
• next button: .kw-multistep-button .kw-multistep-button-next
• submit button: .kw-multistep-button .kw-multistep-button-submit

Styling a Multistep Form

You can style and customize a multi step form using the following classes.

• The main formstep wrapper has the class .kw-multistep
• The formstep pane has the class .kw-form-step
• The formstep header has the class .kw-multistep-header
• The formstep body has the class .kw-multistep-body
• The formstep footer has the class .kw-multistep-footer

Here is the default css stylings that can be overridden.

Multi Step Form Example