#### Form wizard

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">

Note! If you want to add extra components, then you have to add js/css files accordingly.

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

Type | URL
--- | ---
Plugin Link | http://www.jquery-steps.com/Examples
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-wizard.html

Find Form Wizard style options below :

Wizard style options | Class | Description
--- | --- | ---
Wizard Circle | `.wizard-circle` | Use this class for circle style wizard steps.
Wizard Circle with Icon | `.step-icon` | Use this class for circle style wizard steps with icons.
Wizard with Validation | `.required` | Use this class for validting wizard steps.

#### Form wizard with number tabs

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

#### Form wizard with icon tabs

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.");
                          }
                        });

#### Form wizard Validation

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