CodePen Embed - Form Wizard

<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
  
<div class="form-wizard-wrapper">
    <ul>
      <li><a class="form-wizard-link active" href="javascript:;" data-attr="info"><span>Info</span></a></li>
      <li><a class="form-wizard-link" href="javascript:;" data-attr="ads"><span>Ads</span></a></li>
      <li><a class="form-wizard-link" href="javascript:;" data-attr="placement"><span>Placement</span></a></li>
      <li><a class="form-wizard-link" href="javascript:;" data-attr="schedule"><span>Schedule</span></a></li>
      <li><a class="form-wizard-link" href="javascript:;" data-attr="review"><span>Review</span></a></li>
      <li class="form-wizardmove-button"></li>
    </ul>
    <div class="form-wizard-content-wrapper">
      <div class="form-wizard-content show" data-tab-content="info">
        <form action="#">
          <h6>Info</h6>
          <div class="form-row">
            <div class="form-column">
              <label for="">First Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column">
              <label for="">Last Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column mt-2">
              <label for="">Email Id</label>
              <input type="email" class="text-field">
            </div>
            <div class="form-column mt-2">
              <label for="">Mobile Number</label>
              <input type="text" class="text-field">
            </div>
            <div class="full-wdth clearfix">
              <a href="javascript:;" class="form-wizard-next-btn float-right">Next</a>
            </div>
          </div>
        </form>
      </div>
      <div class="form-wizard-content" data-tab-content="ads">
        <form action="#">
          <h6>Ads</h6>
          <div class="form-row">
            <div class="form-column">
              <label for="">First Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column">
              <label for="">Last Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="full-wdth clearfix">
              <a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
              <a href="javascript:;" class="form-wizard-next-btn float-right">Next</a>
            </div>
          </div>
        </form>
      </div>
      <div class="form-wizard-content" data-tab-content="placement">
        <form action="#">
          <h6>Placement</h6>
          <div class="form-row">
            <div class="form-column">
              <label for="">First Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column">
              <label for="">Last Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="full-wdth clearfix">
              <a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
              <a href="javascript:;" class="form-wizard-next-btn float-right">Next</a>
            </div>
          </div>
        </form>
      </div>
      <div class="form-wizard-content" data-tab-content="schedule">
        <form action="#">
          <h6>Schedule</h6>
          <div class="form-row">
            <div class="form-column">
              <label for="">First Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column">
              <label for="">Last Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="full-wdth clearfix">
              <a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
              <a href="javascript:;" class="form-wizard-next-btn float-right">Next</a>
            </div>
          </div>
        </form>
      </div>
      <div class="form-wizard-content" data-tab-content="review">
        <form action="#">
          <h6>Review</h6>
          <div class="form-row">
            <div class="form-column">
              <label for="">First Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="form-column">
              <label for="">Last Name</label>
              <input type="text" class="text-field">
            </div>
            <div class="full-wdth clearfix">
              <a href="javascript:;" class="form-wizard-previous-btn float-left">Previous</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

body{
  background-color: #eeeeee;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}
*{
      box-sizing: border-box;
    }
    .clearfix:after{
      display: blockl
      con
    }
    .form-column {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
    .full-wdth{
      width: 100%;
    }
    .form-column, .full-wdth {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      margin-bottom: 10px;
    }
    .float-right{
      float: right;
    }
    .float-left{
      float: left;
    }
    label {
      display: inline-block;
      margin-bottom: .5rem;
    }
    .form-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }
    .form-wizard-wrapper {
      max-width: 767px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      padding-top: 8px;
      z-index: 1;
    }
    .form-wizard-wrapper .form-wizardmove-button {
      position: absolute;
      width: 153.4px;
      left: 0;
      top: -4px;
      bottom: -4px;
      border-radius: 4px;
      background-color: #6f6fa7;
      -webkit-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
      -moz-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
      -ms-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
      -o-transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
      transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
    
    }
    .form-wizard-wrapper ul {
      background-color: #3bb6b6;
      z-index: 1;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      position: relative;
      margin: 0;
      padding: 0;
    }
    .form-wizard-wrapper ul li {
      list-style-type: none;
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .form-wizard-wrapper ul li a {
      display: block;
      padding: 10px;
      width: 100%;
      color: #ffffff;
      text-decoration: none;
    }
    .form-wizard-wrapper ul li a:focus{
      outline: 0;
    }
    .form-wizard-wrapper ul li a span {
      position: relative;
      z-index: 1;
    }
    .form-wizard-wrapper ul li.active a {
      background-color: #ffffff;
    }
    .form-wizard-wrapper .form-wizard-content {
      background-color: #ffffff;
      padding: 20px;
      color: #777777;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;
      transform: translate3d(100%, 0px, 0px);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
    .form-wizard-wrapper .form-wizard-content.show {
      transform: translate3d(0px, 0px, 0px);
    }
    .form-wizard-wrapper .form-wizard-content h6 {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 10px;
    }
    .form-wizard-wrapper .form-wizard-content .form-wizard-next-btn,
    .form-wizard-wrapper .form-wizard-content .form-wizard-previous-btn {
      background-color: #3bb6b6;
      color: #ffffff;
      display: inline-block;
      padding: 6px 26px;
      border-radius: 4px;
      margin-top: 20px;
      text-decoration: none;
    }
    .form-wizard-wrapper .form-wizard-content .form-wizard-previous-btn {
      background-color: #f1f1f1;
      color: #000000;
    }

    .form-wizard-content-wrapper {
      height: 280px;
      position: relative;
      background-color: #fff;
    }
    .text-field {
      display: block;
      width: 100%;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

jQuery(document).ready(function() {

      jQuery('.form-wizard-wrapper').find('.form-wizard-link').click(function(){
        jQuery('.form-wizard-link').removeClass('active');
        var innerWidth = jQuery(this).innerWidth();
        jQuery(this).addClass('active');
        var position = jQuery(this).position();
        jQuery('.form-wizardmove-button').css({"left": position.left, "width": innerWidth});
        var attr = jQuery(this).attr('data-attr');
        jQuery('.form-wizard-content').each(function(){
          if (jQuery(this).attr('data-tab-content') == attr) {
            jQuery(this).addClass('show');
          }else{
            jQuery(this).removeClass('show');
          }
        });
      });
      jQuery('.form-wizard-next-btn').click(function() {
        var next = jQuery(this);
        next.parents('.form-wizard-content').removeClass('show');
        next.parents('.form-wizard-content').next('.form-wizard-content').addClass('show');
        jQuery(document).find('.form-wizard-content').each(function(){
          if(jQuery(this).hasClass('show')){
            var formAtrr = jQuery(this).attr('data-tab-content');
            jQuery(document).find('.form-wizard-wrapper li a').each(function(){
              if(jQuery(this).attr('data-attr') == formAtrr){
                jQuery(this).addClass('active');
                var innerWidth = jQuery(this).innerWidth();
                var position = jQuery(this).position();
                jQuery(document).find('.form-wizardmove-button').css({"left": position.left, "width": innerWidth});
              }else{
                jQuery(this).removeClass('active');
              }
            });
          }
        });
      });
      jQuery('.form-wizard-previous-btn').click(function() {
        var prev =jQuery(this);
        prev.parents('.form-wizard-content').removeClass('show');
        prev.parents('.form-wizard-content').prev('.form-wizard-content').addClass('show');
        jQuery(document).find('.form-wizard-content').each(function(){
          if(jQuery(this).hasClass('show')){
            var formAtrr = jQuery(this).attr('data-tab-content');
            jQuery(document).find('.form-wizard-wrapper li a').each(function(){
              if(jQuery(this).attr('data-attr') == formAtrr){
                jQuery(this).addClass('active');
                var innerWidth = jQuery(this).innerWidth();
                var position = jQuery(this).position();
                jQuery(document).find('.form-wizardmove-button').css({"left": position.left, "width": innerWidth});
              }else{
                jQuery(this).removeClass('active');
              }
            });
          }
        });
      });
    });

This Pen is owned by Atul Kumar Singh on CodePen.

See more by @atulkumarsingh on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js