jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view.

1. Initialize the plugin by referencing the necessary files:

                
                    // vendor js
                    <script src="jquery.steps.min.js"></script>
                    // template css
                    <link rel="stylesheet" type="text/css" href="wizard.css">
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Find Form Wizard style options below :

Add .wizard-circle class to form tag to apply circle style wizard steps. This is the default style with circle wizard steps.

To add icons to step instead of number use .step-icon class along with icon.

1. HTML Markup:

                
                    <form action="#" class="icons-tab-steps wizard-circle">

                        <h6><i class="step-icon feather icon-home"></i> Step 1</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="fullName">Full Name :</label>
                                <input type="text" class="form-control" id="fullName" >
                            </div>
                        </fieldset>

                        <h6><i class="step-icon feather icon-briefcase"></i>Step 2</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="emailAddress">Email Address :</label>
                                <input type="email" class="form-control" id="emailAddress" >
                            </div>
                        </fieldset>
                    </form>
                
            

2. Javascript.

                
                    // Wizard tabs with icons setup
                    $(".icons-tab-steps").steps({
                      headerTag: "h6",
                      bodyTag: "fieldset",
                      transitionEffect: "fade",
                      titleTemplate: '#index# #title#',
                      labels: {
                          finish: 'Submit'
                      },
                      onFinished: function (event, currentIndex) {
                          alert("Form submitted.");
                      }
                    });
                
            

Add class .required to form fields order to validate form wizard steps.

1. Initialize the plugin by referencing the necessary files:

                
                    <script src="jquery.steps.min.js"></script>
                    <script src="jquery.validate.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="wizard.css">
                
            

2. HTML Markup:

                
                    <form action="#" class="steps-validation wizard-circle">

                        <h6><i class="step-icon feather icon-home"></i> Step 1</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="fullName">Full Name :</label>
                                <input type="text" class="form-control required" id="fullName" >
                            </div>
                        </fieldset>

                        <h6><i class="step-icon feather icon-briefcase"></i>Step 2</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="emailAddress">Email Address :</label>
                                <input type="email" class="form-control required" id="emailAddress" >
                            </div>
                        </fieldset>
                    </form>
                
            

3. Javascript.

                
                    // Validate steps wizard

                    // Show form
                    var form = $(".steps-validation").show();

                    $(".steps-validation").steps({
                        headerTag: "h6",
                        bodyTag: "fieldset",
                        transitionEffect: "fade",
                        titleTemplate: '#index# #title#',
                        labels: {
                            finish: 'Submit'
                        },
                        onStepChanging: function (event, currentIndex, newIndex) {
                            // Allways allow previous action even if the current form is not valid!
                            if (currentIndex > newIndex) {
                                return true;
                            }

                            // Needed in some cases if the user went back (clean up)
                            if (currentIndex < newIndex) {
                                // To remove error styles
                                form.find(".body:eq(" + newIndex + ") label.error").remove();
                                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                            }
                            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) {
                            alert("Submitted!");
                        }
                    });

                    // Initialize validation
                    $(".steps-validation").validate({
                        ignore: 'input[type=hidden]', // ignore hidden fields
                        errorClass: 'danger',
                        successClass: 'success',
                        highlight: function (element, errorClass) {
                            $(element).removeClass(errorClass);
                        },
                        unhighlight: function (element, errorClass) {
                            $(element).removeClass(errorClass);
                        },
                        errorPlacement: function (error, element) {
                            error.insertAfter(element);
                        },
                        rules: {
                            email: {
                                email: true
                            }
                        }
                    });