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>
            

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

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

Type	URL
Plugin Link	http://www.jquery-steps.com/
Template Page	https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/wizard-forms.html