A website usually has HTML forms on it. The pages like contact, registration, survey, etc are required the HTML form. In some scenarios, you may want to place a long form on your website. Maybe this form is needed for the survey, loan application, or for any reason. For such cases, to add a better UX you probably wish to use a multi-step form. This technique would split your long fields into sections that help readers to fill up your form conveniently.

In this tutorial, I show you how to add and process the multi-step form on the website. Our final output will look like the screenshot below.

I am going to use a jQuery Steps plugin which provides a convenient way to add the multiple-step form for your application. All we need to do is download this plugin and configure it correctly.

Having said that, let’s see how to install and use the jQuery Steps plugin to add the multi-step form.

Installation

First, you have to download the plugin. Visit the website and click on the Getting Started menu. Then click Download from the left sidebar.  From here, click on the Download source button. Refer to the screenshot below.

It will download the zip of a plugin. From this zip, we need to copy a few JS and CSS files.

Before that create js and css folders into your project.

Extract the zip. Go to the build directory and copy the file jquery.steps.js and paste it into your project’s js folder. Next, from the demo/css directory, copy the jquery.steps.css, main.css and place these files inside the css folder of your project.

Additionally, we have to include the libraries of jQuery and jQuery Validation. I’ll include these libraries via CDN.

Next, create script.js and index.html files.

Basically, your project root directory should look like the screenshot below.

Integrate Multi-Step Form

For the sake of the tutorial, I am creating a 3 step form. In the first step, the user has to fill in the account information. In the second step, they will enter profile details. And in the final step, the user should accept the terms and conditions before submitting a form. You have to replace these form fields as per your requirements.

The index.html file will have the following code. It includes HTML form, CSS, and JS files.

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.steps.css">
<form id="my-form" method="post">
    <div>
        <h3>Account</h3>
        <section>
            <label for="userName">User name *</label>
            <input id="userName" name="userName" type="text" class="required">
            <label for="password">Password *</label>
            <input id="password" name="password" type="password" class="required">
            <label for="confirm">Confirm Password *</label>
            <input id="confirm" name="confirm" type="password" class="required">
            <p>(*) Mandatory</p>
        </section>
        <h3>Profile</h3>
        <section>
            <label for="name">First name *</label>
            <input id="name" name="name" type="text" class="required">
            <label for="surname">Last name *</label>
            <input id="surname" name="surname" type="text" class="required">
            <label for="email">Email *</label>
            <input id="email" name="email" type="text" class="required email">
            <label for="address">Address</label>
            <input id="address" name="address" type="text">
            <p>(*) Mandatory</p>
        </section>
        <h3>Finish</h3>
        <section>
            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
        </section>
    </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="js/jquery.steps.min.js"></script>
<script src="js/script.js"></script>

In the script.js file, add the below piece of JavaScript code. It initiates a jQuery Steps plugin and handles form validation.

var form = $("#my-form");
form.validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
        confirm: {
            equalTo: "#password"
        }
    }
});
form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
        form.submit();
    }
});

I placed the statement form.submit() inside the onFinished() method. It means the form is ready to process.

I hope you understand how to integrate the multi-step form into your application. Please share your thoughts and suggestions in the comment below.

Related Articles

• How to Use jQuery Autocomplete with Ajax
• Ajax File Upload with PHP and jQuery
• Multiple Checkbox Select/Deselect Using jQuery

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.