<!-- Grid row -->
<div class="row pt-5 d-flex justify-content-center">
<!-- Grid column -->
<div class="col-md-2 pl-5 pl-md-0 pb-5">
<!-- Stepper -->
<div class="steps-form-3">
<div class="steps-row-3 setup-panel-3 d-flex justify-content-between">
<div class="steps-step-3">
<a href="#step-5" type="button" class="btn btn-info btn-circle-3 waves-effect ml-0" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-folder-open-o" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-6" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-user" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3">
<a href="#step-7" type="button" class="btn btn-pink btn-circle-3 waves-effect" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
</div>
<div class="steps-step-3 no-height">
<a href="#step-8" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-check" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-7">
<form role="form" action="" method="post">
<!-- First Step -->
<div class="row setup-content-3" id="step-5">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
<div class="form-group md-form">
<label for="yourEmail-3" data-error="wrong" data-success="right">Email</label>
<input id="yourEmail-3" type="email" required="required" class="form-control validate">
</div>
<div class="form-group md-form">
<label for="yourUsername-3" data-error="wrong" data-success="right">Username</label>
<input id="yourUsername-3" type="text" required="required" class="form-control validate">
</div>
<div class="form-group md-form mt-3">
<label for="yourPassword-3" data-error="wrong" data-success="right">Password</label>
<input id="yourPassword-3" type="password" required="required" class="form-control validate">
</div>
<div class="form-group md-form mt-3">
<label for="repeatPassword-3" data-error="wrong" data-success="right">Repeat Password</label>
<input id="repeatPassword-3" type="password" required="required" class="form-control validate">
</div>
<button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
</div>
</div>
<!-- Second Step -->
<div class="row setup-content-3" id="step-6">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
<div class="form-group md-form">
<label for="yourName-3" data-error="wrong" data-success="right">First Name</label>
<input id="yourName-3" type="text" required="required" class="form-control validate">
</div>
<div class="form-group md-form mt-3">
<label for="secondName-3" data-error="wrong" data-success="right">Second Name</label>
<input id="secondName-3" type="text" required="required" class="form-control validate">
</div>
<div class="form-group md-form mt-3">
<label for="yourAddress-3" data-error="wrong" data-success="right">Address</label>
<textarea id="yourAddress-3" type="text" required="required" rows="2" class="md-textarea validate form-control"></textarea>
</div>
<button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
<button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
</div>
</div>
<!-- Third Step -->
<div class="row setup-content-3" id="step-7">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<div class="form-check">
<input type="checkbox" id="checkbox115" class="form-check-input">
<label for="checkbox115" class="form-check-label">I agree to the terms and conditions</label>
</div>
<div class="form-check">
<input type="checkbox" id="checkbox114" class="form-check-input">
<label for="checkbox114" class="form-check-label">I want to receive newsletter</label>
</div>
<button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
<button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
</div>
</div>
<!-- Fourth Step -->
<div class="row setup-content-3" id="step-8">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 class="text-center font-weight-bold my-4">Registration completed!</h2>
<button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
<button class="btn btn-success btn-rounded float-right" type="submit">Submit</button>
</div>
</div>
</form>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
$(document).ready(function () {
var navListItems = $('div.setup-panel-3 div a'),
allWells = $('.setup-content-3'),
allNextBtn = $('.nextBtn-3'),
allPrevBtn = $('.prevBtn-3');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-info').addClass('btn-pink');
$item.addClass('btn-info');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allPrevBtn.click(function(){
var curStep = $(this).closest(".setup-content-3"),
curStepBtn = curStep.attr("id"),
prevStepSteps = $('div.setup-panel-3 div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepSteps.removeAttr('disabled').trigger('click');
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content-3"),
curStepBtn = curStep.attr("id"),
nextStepSteps = $('div.setup-panel-3 div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i< curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepSteps.removeAttr('disabled').trigger('click');
});
$('div.setup-panel-3 div a.btn-info').trigger('click');
});