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 . 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. Kwes now offers a multi-step form functionality A multi-step form 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. 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. Adding a multi-step form with Kwes 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 script tag before the closing tag: . body <script src="https://kwes.io/js/kwes.js"></script> Add the wrapper element with the required class. kwes-form Add the element with the URL provided in the Kwes dashboard. form action Add the fields and validation rules. input Here’s how the code looks for now: // form code < > html < > body < = > div class "kwes-form" < = = > form method "POST" action "path/to/kwes" </ > form </ > div < = > script src "https://kwes.io/js/kwes.js" </ > script </ > body </ > html To enable a multi-step form, I have added the attribute to the form element. multi-step 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 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. form-step My form has only two steps, so I have only two elements. On the first step, I am asking a question about the contact type, and on the next step, I am gathering contact information. form-step // form code // form code < = > div class "kwes-form" < = = = > form method "POST" action "path/to/kwes" multistep "true" < > form-step </ > form-step < > form-step </ > form-step </ > form </ > div 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, cloaking, logic visibility toggling, and . animated SVG progress bar Custom Headers 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 code // form code < = > form-step heading "1. Contact type" </ > form-step < = > form-step heading "2. Contact information" </ > form-step 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 element. It is advisable to place this element as a first child of the element. <div slot="heading"></div> form-step Custom Styling Adding custom styling to Kwes forms are quite straightforward. You could use classes with prefix to add custom styling. kw- For example, you could use class to customize the step section footer, as I did on my site. kw-multistep-footer Cloaking I have used provided by Kwes to hide the uncompiled form. That means the form wouldn’t be visible until it is compiled by Kwes JavaScript file. To do this, add attribute to the wrapper element and then use the following CSS snippet to hide the form: the cloaking technique v-cloak kwes-form { : none;
} [v-cloak] display Logic Visibility Toggling 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 attribute to the element. In my case, I am hiding mentoring related fields if the contact type is “General”. kw-show ... < = > div kw-show "fields.step == 'Mentoring'" </ > div Animated SVG Progress Bar 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 on click. The animation is a CSS animation of the stroke of the SVG path. a little SVG that is animated Here’s the complete form, including the SVG and JavaScript code: What kind of inquiry are you interested in? Are you interested in career mentoring or technical mentoring? Career mentoring means I help you make decisions regarding your career. Technical mentoring means I help you gain new skills or improve the current skill level. What is your name? Please tell me your email address (I would use it only for direct communication) . Tell me why I should mentor you? What is your message? Tell me which skills do you want to aquire or approve? < = = > div class "kwes-form form" v-cloak "true" < = = = > svg class "steps" viewBox "0 0 850 250" xmlns "http://www.w3.org/2000/svg" < = = = = = = /> path d "m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill "none" stroke "#f5f5f5" stroke-linecap "round" stroke-linejoin "round" stroke-width "50" < = = = = = = = /> path class "steps__path" d "m225 125c0 50-50 100-100 100s-100-50-100-100 50-100 100-100 100 50 100 100h400c0-50 50-100 100-100s100 50 100 100-50 100-100 100-100-50-100-100" fill "none" stroke "#12e09f" stroke-linecap "round" stroke-linejoin "round" stroke-width "50" </ > svg < = = = > form method "POST" action "path/to/kwes" multistep "true" < = > form-step heading "1. Contact type" < = > label class "radio" </ > label < = > div class "kw-radio-group" < = = = = = = /> input id "General" type "radio" name "step" value "General" label "General" checked "checked" < = = = = = /> input id "Mentoring" type "radio" name "step" value "Mentoring" label "Mentoring" </ > div </ > form-step < = > form-step heading "2. Contact information" < = > div kw-show "fields.step == 'Mentoring'" < = > label class "radio" </ > label < = > div class "kw-radio-group" < = = = = = = /> input id "Career" type "radio" name "mentoring" value "Career" label "Career" checked "checked" < = = = = = /> input id "Technical" type "radio" name "mentoring" value "Technical" label "Technical" </ > div < = > div class "desc" < > p < > small </ > small </ > p < > p < > small </ > small </ > p </ > div </ > div < = > label for "Name" </ > label < = = = = /> input id "Name" type "text" name "name" rules "required" < = > label for "Email" < > small </ > small </ > label < = = = = /> input id "Email" type "email" name "email" rules "required|email|max:255" < = > div kw-show "fields.step == 'Mentoring'" < = > label for "Note" </ > label </ > div < = > div kw-show "fields.step != 'Mentoring'" < = > label for "Note" </ > label </ > div < = = = = > textarea id "Note" name "note" rules "required" rows "6" </ > textarea < = > div kw-show "fields.mentoring == 'Technical'" < = > label for "Note2" </ > label < = = = = > textarea id "Note2" name "note2" rules "required_if:mentoring,Technical" rows "6" </ > textarea </ > div </ > form-step </ > form < > script .addEventListener( , { ( target = e.target; target && target !== ; target = target.parentNode) { (target.matches( )) { $form = .querySelector( ); (target.classList.contains( )) {
          $form.classList.remove( );
          $form.classList.add( );
        } (target.classList.contains( )) {
          $form.classList.remove( );
          $form.classList.add( );
        } ;
      }
    }
  }, ); document 'click' ( ) function e for var this if '.kw-multistep-button' var document '.form' if 'kw-multistep-button-next' 'step1' 'step2' if 'kw-multistep-button-previous' 'step2' 'step1' break false </ > script </ > div Conclusion 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.

A Step by Step Guide to Creating a Multi-step Form

Too Long; Didn't Read

Companies Mentioned

@ku@5j7&c9jNY&Y4y78vG

RELATED STORIES