<!-- Css -->
<link rel="stylesheet" href="vendors/form-wizard/jquery.steps.css" type="text/css">

<!-- Javascript -->
<script src="vendors/form-wizard/jquery.steps.min.js"></script>

<div id="wizard-example">
  <h3>Personal Information</h3>
  <section class="card card-body border mb-0">
    <h5>Personal Information</h5>
    <p>Try the keyboard navigation by clicking arrow left or right!</p>
  </section>
  <h3>Billing Information</h3>
  <section class="card card-body border mb-0">
    <h5>Billing Information</h5>
    <p>Wonderful transition effects.</p>
  </section>
  <h3>Payment Details</h3>
  <section class="card card-body border mb-0">
    <h5>Payment Details</h5>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
</div>

$('#wizard-example').steps({
    headerTag: 'h3',
    bodyTag: 'section',
    autoFocus: true,
    titleTemplate: '<span class="wizard-index">#index#</span> #title#'
});

<div id="wizard-example">
    <h3>Personal Information</h3>
    <section class="card card-body border mb-0">
        <h5>Personal Information</h5>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
        <form id="form1">
            <div class="form-group wd-xs-300">
                <label>First name</label>
                <input type="text" class="form-control" placeholder="First name" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
            <div class="form-group wd-xs-300">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastname" placeholder="Enter lastname"
                       required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
        </form>
    </section>
    <h3>Billing Information</h3>
    <section class="card card-body border mb-0">
        <h5>Billing Information</h5>
        <p>Wonderful transition effects.</p>
        <form id="form2">
            <div class="form-group wd-xs-300">
                <label class="form-control-label">Email: <span class="tx-danger">*</span></label>
                <input id="email" class="form-control" name="email" placeholder="Enter email address"
                       type="email" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
        </form>
    </section>
    <h3>Payment Details</h3>
    <section class="card card-body border mb-0">
        <h5>Payment Details</h5>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
</div>

$('#wizard-example').steps({
    headerTag: 'h3',
    bodyTag: 'section',
    autoFocus: true,
    titleTemplate: '<span class="wizard-index">#index#</span> #title#',
    onStepChanging: function (event, currentIndex, newIndex) {
        if (currentIndex < newIndex) {
            var form = document.getElementById('form1'),
                form2 = document.getElementById('form2');

            if (currentIndex === 0) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    form.classList.add('was-validated');
                } else {
                    return true;
                }
            } else if (currentIndex === 1) {
                if (form2.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    form2.classList.add('was-validated');
                } else {
                    return true;
                }
            } else {
                return true;
            }
        } else {
            return true;
        }
    }
});