Recently I wanted to add a multi-step form to my site. Since my site runs on Hexo, a static page generator, I had some doubts about how to execute this task. I already had a static form on my site, and I didn’t want to spend too much time on the development of features like steps, show/hide logic or validation.
I was delighted to learn that Kwes now offers a multi-step form functionality. Before I tell you how I did it, let’s see what a multi-step form, sometimes also referred to as multi-page form, is.
A multi-step form is a long-form that is broken into pieces. The reason for doing this is to make the form easier to complete. Each step represents grouped inputs that are related to each other, so users are not frightened by the length of the form. It might be more comfortable for users to fill the information step by step because their minds should process fewer fields at the time.
You might have seen multi-steps forms on checkout or shipping forms. Multi-steps forms are also used for wizards such as signing up forms, and there is an increased appearance of multi-step login forms recently. These are just common scenarios when to use them, but every longer form could be broken into pieces.
Pro tip: Before switching to a multi-step form, you might want to make A/B tests to make sure your conversion rate doesn’t drop.
The conversion rate is one of the most substantial benefits of a multi-step form. It is believed that multi-step forms have a better conversion rate. Other benefits include the first impression, which is less overwhelming to users, and progress bars, which encourage users to proceed with the form.
All these benefits should be taken with reserve. Without real numbers, you cannot know for sure. A single-step form with many input fields is often considered as a significant obstacle for most users. As a trade-off, you should reduce the number of inputs which might not be ideal.
Kwes documentation makes it quite straightforward to follow and to create a multi-step form.
Before that, let’s refresh our memory how to add the static form using Kwes:
- Add a website from the Kwes dashboard.
- Add a form from the Kwes dashboard.
- Add required
scripttag before the closing
- Add the wrapper element with the required
- Add the
formelement with the
actionURL provided in the Kwes dashboard.
- Add the
inputfields and validation rules.
Here’s how the code looks for now:
To enable a multi-step form, I have added the
multi-step attribute to the
I had to add
true value to the
multi-step attribute to make my HTML linter happy.
Next, I have divided the form into steps by wrapping related inputs with
form-step elements. That’s it! To make a multi-step form with Kwes, all you need to do is to add a single wrapper div to every step. I never knew it would be that easy.
My form has only two steps, so I have only two
form-step elements. On the first step, I am asking a question about the contact type, and on the next step, I am gathering contact information.
Of course, that’s not all. Kwes is packed with other impressive features. These are the ones that I included in my form:
- custom headers,
- custom styling,
- logic visibility toggling, and
- animated SVG progress bar.
Kwes provides adding custom headers to each step—a title of the current step. There are two types of headers: simple and complex.
Simple headers are used for textual headers. I have added simple headings to my form.
<form-step heading="1. Contact type">
If you like to add icons, graphics or anything other than just title text, then you could use a complex header. All of the custom header content should be added inside
<div slot="heading"></div> element. It is advisable to place this element as a first child of the
Adding custom styling to Kwes forms are quite straightforward. You could use classes with
kw- prefix to add custom styling.
For example, you could use
kw-multistep-footer class to customize the step section footer, as I did on my site.
v-cloak attribute to the
kwes-form wrapper element and then use the following CSS snippet to hide the form:
Another great feature of Kwes form builder is the ability to toggle the visibility of an input field based on other field values. This show/hide logic behaviour is what I needed to create the second step dynamically. The visibility is achieved by adding
kw-show attribute to the element. In my case, I am hiding mentoring related fields if the contact type is “General”.
<div kw-show="fields.step == 'Mentoring'">...</div>
Progress bars often help users understand how much steps are left until the submission. Since this element only serves as a visual indicator, I decided to make a little SVG that is animated on click. The animation is a CSS animation of the stroke of the SVG path.
<div class="kwes-form form" v-cloak="true">
The complete functioning form could be found on my Contact page.
I have noticed one extra benefit—far fewer spams. Other benefits of adding a multi-step form using Kwes are::
- I didn’t have to spend too much time on design,
- I didn’t have to spend too much time on validation, and
- I didn’t have to spend too much time on development.
With Kwes, everything is so easy and works as expected. You should give it a try.