Form Step With B4 Style01
<!DOCTYPE html>
<html>
<head>
<title>FORM STEP WITH B4 | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="FORM STEP WITH B4">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle"><span class="fa fa-cubes"></span></a>
<p>Type</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-info-circle"></span></a>
<p>Reason</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-tags"></span></a>
<p>Value</p>
</div>
<div class="stepwizard-step">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-user"></span></a>
<p>Details</p>
</div>
<div class="stepwizard-step">
<a href="#step-5" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-calendar"></span></a>
<p>Dates</p>
</div>
<div class="stepwizard-step">
<a href="#step-6" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-cogs"></span></a>
<p>Status</p>
</div>
<div class="stepwizard-step">
<a href="#step-7" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="fa fa-th-list"></span></a>
<p>Position</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h4>What type of claim is it?</h4>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio1" required="required" />
<label for="radio1">Personal Injury</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio2" required="required" />
<label for="radio2">Professional Negligence</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio3" required="required" />
<label for="radio3">Medical Negligence</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio4" required="required" />
<label for="radio4">Employment Issue</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio5" required="required" />
<label for="radio5">Other</label>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h4>Why do you want to transfer?</h4>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio6" required="required" />
<label for="radio6">Unreasonable Delay</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio7" required="required" />
<label for="radio7">Conflict Of Interest</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio8" required="required" />
<label for="radio8">Low Interest</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio9" required="required" />
<label for="radio9">Second Opinion</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio11" required="required" />
<label for="radio11">Other</label>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h4>What is the value?</h4>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="value" id="radio12" required="required" />
<label for="radio12">Under £5,000</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="value" id="radio13" required="required" />
<label for="radio13">£5,000 - £10,000</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="value" id="radio14" required="required" />
<label for="radio14">£10,000 - £25,000</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="value" id="radio15" required="required" />
<label for="radio15">£25,000 - £50,000</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="value" id="radio16" required="required" />
<label for="radio16">Over £50,000</label>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12">
<h4>What are your details?</h4>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" name="fullname" id="fullname" required="required" class="form-control"/>
</div>
<div class="form-group">
<label for="name">Email Address</label>
<input type="email" name="email" id="email" required="required" class="form-control"/>
</div>
<div class="form-group">
<label for="name">Telephone Number</label>
<input type="number" name="email" id="email" required="required" class="form-control" />
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="submit" >Confirm</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-5">
<div class="col-xs-12">
<div class="col-md-12">
<h4>Please provide the claim dates</h4>
<label>Incident Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdateday">Day</label>
<input type="text" name="incidentdateday" id="incidentdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdatemonth">Month</label>
<input type="text" name="incidentdatemonth" id="incidentdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdateyear">Year</label>
<input type="text" name="incidentdateyear" id="incidentdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<label>Limitation Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdateday">Day</label>
<input type="text" name="limitationdateday" id="limitationdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdatemonth">Month</label>
<input type="text" name="limitationdatemonth" id="limitationdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdateyear">Year</label>
<input type="text" name="limitationdateyear" id="limitationdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<label>Next Court Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdateday">Day</label>
<input type="text" name="nextcourtdateday" id="nextcourtdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdatemonth">Month</label>
<input type="text" name="nextcourtdatemonth" id="nextcourtdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdateyear">Year</label>
<input type="text" name="nextcourtdateyear" id="nextcourtdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-6">
<div class="col-xs-12">
<div class="col-md-12">
<h4>Why is the status of your claim?</h4>
<div class="form-group">
<label for="name">Current Solicitors</label>
<input type="text" required="required" class="form-control"/>
</div>
<label>Funding Arrangement?</label>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio41" required="required" />
<label for="radio41">CFA</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio42" required="required" />
<label for="radio2">DBA</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio43" required="required" />
<label for="radio43">PRIVATE</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio44" required="required" />
<label for="radio44">LEI</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio45" required="required" />
<label for="radio45">Other</label>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-7">
<div class="col-xs-12">
<div class="col-md-12">
<h3>What is the current position?</h3>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio46" required="required" />
<label for="radio46">Pre-Action</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio47" required="required" />
<label for="radio47">Pproceedings</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio48" required="required" />
<label for="radio48">Allocated To A Track</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio49" required="required" />
<label for="radio49">Dismissed - Appeal</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio51" required="required" />
<label for="radio51">I Do Not Know</label>
</div>
</div>
<button class="btn btn-success btn-sm nextBtn btn-lg pull-right" type="button" id="gotoConsent">Next</button>
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body{
margin-top:0px;
}
.navbar-brand-centered {
display: block;
width: auto;
text-align: center;
margin-top:0;
padding: 0px !important;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-index: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: ' ';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #000;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: ' ';
text-indent: .9em;
color: #fff;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
.stepwizard-row .btn {
padding: 5px;
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='radio'],input[type='email'],input[type='number'],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)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
