How To Integrate Multi Step Form On Your Website

If we are running a website we have to add HTML Forms on it. Our contact page, sign up page, newsletter requires a form. And sometimes, we need to place a long form on our website. Maybe it is for the survey, loan application or for any reason. In these cases, we need to use a multi-step form which gives a better user experience.

In this article, we show you how to add and process multi-step form on the website.

Multi Step Form

jQuery Steps is a plugin which provides convenient way to add multiple step form for your application.

All we need to do is download this plugin library and configure it correctly.

Having said that, let’s see step by step guide on how to install and use jQuery Steps plugin for our multi-step form.

Installation

Go to Download page of jQuery Steps website and click on the Download source button.

Download Source

Once you click the download button you will get the zip of a library. We need to copy some JS and CSS files from this downloaded zip.

Extract the zip. Go to build directory and copy the file jquery.steps.js and paste it into your project’s JS folder. Next, navigate to demo->css and copy the jquery.steps.css and main.css and place these CSS files in your project.

Additionally, we need to download latest jQuery JavaScript file and jQuery Validation JavaScript File.

Create a script.js and index.php files as well.

Basically, your project root directory should look like as below.

Files Structure

Actual Code For Multi-Step Form

For our tutorial, we are creating a 3 step form. In the first step, the user has to fill account information. In the second step, they will enter profile details. And in the final step user should accept terms and conditions in order to submit a form. Of course, you are free to replace these form fields as per your requirements.

Our index.php file contains a below code. It includes CSS, JS files also.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Steps Form</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/jquery.steps.css">
</head>
<body>
    <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="js/jquery.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.steps.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

In the script.js, add the below piece of JavaScript code.

script.js

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();
    }
});

In the method onFinished we place the code form.submit();. That means our form is ready to process.

We hope you understand how to integrate multi-step form on your application. If you have any questions or suggestions please leave a comment below.

Related Articles

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

10 thoughts on “How To Integrate Multi Step Form On Your Website

        1. It seems a JS conflicts issue then. You can try by including another version of JS files. One solution can be commenting out all JS files and then one by one uncomment JS file and check if the issue is gone. This way we can find out if any other JS file conflicting with validation JS.

Leave a Reply

Your email address will not be published. Required fields are marked *