Try it free

Multi Step Forms Bronze 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. When using a multistep form, we strongly suggest cloaking for a better experience.

Example

Below is a practical example of a multistep form and how to achieve it through our syntax.

Creating a multi step form

Create a multi step form by following these steps:

  • Add an attribute of multistep or data-kw-multistep to the form tag.
  • Wrap the inside of your form in a <div class="kw-multistep">.
  • Wrap each step in a <div class="kw-multistep-step">.
  • Wrap the inside of your <div class="kw-multistep-step"> in a <div class="kw-multistep-body">.

Adding a header

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

Simple header

Add a form-step-heading="..." attribute to the <div class="kw-multistep-step"> tag with the 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.

<form ... class="kf-form" multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step" form-step-heading="Step 1">
            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>

Complex header

If you need a more custom header with icons or images then:

  • create one inside a <div class="kw-multistep-header">...</div>.
  • This would go inside your <div class="kw-multistep-step"> but OUTSIDE of your <div class="kw-multistep-body">.
<form ... class="kf-form" multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step">
            <div class="kw-multistep-header">
                Your complex header here...
            </div>

            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>

Removing validation

You can remove the validation that occurs when clicking Previous/Next buttons and only validate when clicking submit by adding multistep-dont-validate on your <div class="kw-multistep">.

Remove only on prev or next

If you only want to remove validation when clicking the previous button, or you want to remove validation when clicking the next button, try using multistep-dont-validate-prev or multistep-dont-validate-next.

<form ... class="kf-form" multistep>
    <div class="kw-multistep" multistep-dont-validate>
        ...
    </div>
</form>

Event hooks

For further customization, you may need to add custom logic when the Next or Previous buttons are clicked. If that's your case, you can add an id to your form and listen for the custom events we dispatch:

  • kwMultistepPrevClicked. This event is fired when the “previous” button is clicked.
  • kwMultistepPrevSuccess. This event is fired when the previous step is reached.
  • kwMultistepNextClicked. This event is fired when the “next” button is clicked.
  • kwMultistepNextSuccess. This event is fired when the next step is reached.

Below is a simple example of adding custom logic when the “next” button is clicked:

<form ... class="kf-form" multistep id="myForm">
    ...
</form>

...

<!-- Add this script after your KwesForms script -->
<script>
    var form = document.getElementById('myForm');

    form.addEventListener('kwMultistepNextClicked', function () {
        alert('The next button has been clicked!');
    });
</script>

Multistep footer

The multistep will automatically 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
  • Each multistep step has the class .kw-multistep-step
  • Each multistep header has the class .kw-multistep-header
  • Each multistep body has the class .kw-multistep-body
  • The multistep 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;
}

Notice anything wrong in our docs? Let us know.