Form Wizard Documentation

Form Wizard

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.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.steps.min.js"></script>
                     <link rel="stylesheet" type="text/css" href="wizard.css">
                
            
2. HTML Markup:
                
                    <form action="#" class="number-tab-steps wizard-circle">

                        <h6>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>Step 2</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="emailAddress">Email Address :</label>
                                <input type="email" class="form-control" id="emailAddress" >
                            </div>
                        </fieldset>

                        <h6>Step 3</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="eventName">Event Name :</label>
                                <input type="text" class="form-control" id="eventName" >
                            </div>
                        </fieldset>

                        <h6>Step 4</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="meetingName">Name of Meeting :</label>
                                <input type="text" class="form-control" id="meetingName" >
                            </div>
                        </fieldset>
                    </form>
                
            
3. Javascript.
                
                    $(".number-tab-steps").steps({
                        headerTag: "h6",
                        bodyTag: "fieldset",
                        transitionEffect: "fade",
                        titleTemplate: '#index# #title#',
                        labels: {
                            finish: 'Submit'
                        },
                        onFinished: function (event, currentIndex) {
                            alert("Form submitted.");
                        }
                    });
                
            
Form wizard with icon tabs

Add .wizard-circle class to form tag to apply circle style wizard steps. To add icons to step instead of number use .step-icon class along with icon.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.steps.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="wizard.css">
                
            
2. HTML Markup:
                
                    <form action="#" class="icons-tab-steps wizard-circle">

                        <h6><i class="step-icon ft-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 ft-message-circle"></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>

                        <h6><i class="step-icon ft-airplay"></i>Step 3</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="eventName">Event Name :</label>
                                <input type="text" class="form-control" id="eventName" >
                            </div>
                        </fieldset>

                        <h6><i class="step-icon ft-layout"></i>Step 4</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="meetingName">Name of Meeting :</label>
                                <input type="text" class="form-control" id="meetingName" >
                            </div>
                        </fieldset>
                    </form>
                
            
3. 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 .wizard-circle class to form tag to apply circle style wizard steps. 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>
                    <link rel="stylesheet" type="text/css" href="wizard.css">
                
            
2. HTML Markup:
                
                    <form action="#" class="steps-validation wizard-circle">

                        <h6><i class="step-icon ft-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 ft-message-circle"></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>

                        <h6><i class="step-icon ft-airplay"></i>Step 3</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="age">Age :</label>
                                <input type="text" class="form-control required" id="age" >
                            </div>
                        </fieldset>

                        <h6><i class="step-icon ft-layout"></i>Step 4</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="meetingName">Name of Meeting :</label>
                                <input type="text" class="form-control required" id="meetingName" >
                            </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)
                        {
                            // Always allow previous action even if the current form is not valid!
                            if (currentIndex > newIndex)
                            {
                                return true;
                            }
                            // Forbid next action on "Warning" step if the user is to young
                            if (newIndex === 3 && Number($("#age-2").val()) < 18)
                            {
                                return false;
                            }
                            // 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
                            }
                        }
                    });

                
            
Form wizard with vertical tabs

Add .wizard-circle class to form tag to apply circle style wizard steps. Set "stepsOrientation" option to "vertical" in order to have vertical style form wizard steps.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.steps.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="wizard.css">
                
            
2. HTML Markup:
                
                    <form action="#" class="vertical-tab-steps wizard-circle">

                        <h6>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>Step 2</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="emailAddress">Email Address :</label>
                                <input type="email" class="form-control" id="emailAddress" >
                            </div>
                        </fieldset>

                        <h6>Step 3</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="eventName">Event Name :</label>
                                <input type="text" class="form-control" id="eventName" >
                            </div>
                        </fieldset>

                        <h6>Step 4</h6>
                        <fieldset>
                            <div class="form-group">
                                <label for="meetingName">Name of Meeting :</label>
                                <input type="text" class="form-control" id="meetingName" >
                            </div>
                        </fieldset>
                    </form>
                
            
3. Javascript.
                
                    // Vertical tabs form wizard setup
                    $(".vertical-tab-steps").steps({
                        headerTag: "h6",
                        bodyTag: "fieldset",
                        transitionEffect: "fade",
                        stepsOrientation: "vertical",
                        titleTemplate: '#index# #title#',
                        labels: {
                            finish: 'Submit'
                        },
                        onFinished: function (event, currentIndex) {
                            alert("Form submitted.");
                        }
                    });