Home How it Works Components Validation Spam Cloud Emails Data Security Pricing Docs API Docs FAQ Sign In Try It Free

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>.

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>.

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.

.kw-multistep {
    border: 1px solid #ddd;
}

.kw-multistep-header {
    padding: 15px;
    background-color: #f5f5f5;
    font-size: 24px;
}

.kw-multistep-body {
    padding: 15px;
}

.kw-multistep-footer {
    padding: 15px;
    background-color: #f5f5f5;
}

.kw-multistep-footer .kw-multistep-button-previous {
    float: left;
}

.kw-multistep-footer .kw-multistep-button-next,
.kw-multistep-footer .kw-multistep-button-submit {
    float: right;
}

Multi Step Form Example
<form multistep>

    <form-step heading="Step 1">

        <!-- Add the fields for this step here -->

    </form-step>

    <form-step heading="Step 2">

        <!-- Add the fields for this step here -->

    </form-step>

</form>