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