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. Required Vendor files:

<script src="jquery.steps.min.js"></script>

2. Required Template Specific Files:

<link rel="stylesheet" href="form-wizard.css">

3. HTML Markup

<form class="wizard-tab-steps">
    <h6>Step 1</h6>
    <fieldset>
        <div class="form-group">
            <label for="1-first-name">First Name</label>
            <input type="text" class="form-control" id="1-first-name" name="1-first-name">
        </div>
    </fieldset>

    <h6>Step 2</h6>
    <fieldset>
        <div class="form-group">
            <label for="2-email">E-mail</label>
            <input type="email" class="form-control" id="2-email" name="2-email">
        </div>
    </fieldset>
</form>

4. Initialization may look something like this:

$(".wizard-tab-steps").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '#index# #title#',
    labels: {
      finish: 'Submit'
    },
    onFinished: function (event, currentIndex) {
      alert("Form Submitted.");
    }
});

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

Type	URL
Plugin Link	https://www.jquery-steps.com/Examples
Template Page	https://demos.pixinvent.com/apex-html-admin-template/demo-1/form-wizard.html