<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand navbar-brand-centered">Transfer My Claim</div>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class=" query-container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-success btn-circle"></a>
<p>Type</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Reason</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Value</p>
</div>
<div class="stepwizard-step">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Details</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-primary 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-primary 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-primary 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="row">
<div class="col">
<div class="form-group">
<label for="name">House Number</label>
<input type="text" name="house_no" id="house_no" required="required" class="form-control"/>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="name">Post Code</label>
<input type="text" name="post_code" id="post_code" required="required" class="form-control"/>
</div>
</div>
</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-primary nextBtn btn-lg pull-right" type="submit" >Confirm</button>
</div>
</div>
</div>
</form>
</div>
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: 3px;
font-size: 12px;
}
.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-order: 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: 1em;
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,
.funkyradio input[type="checkbox"]:checked ~ label {
content: ' ';
text-indent: .9em;
color: #fff;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label,
.funkyradio input[type="checkbox"]:focus ~ label {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label,
.funkyradio-default input[type="checkbox"]:checked ~ label {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label,
.funkyradio-primary input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: rgba(126, 148, 69,.5);
}
.funkyradio-success input[type="radio"]:checked ~ label,
.funkyradio-success input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label,
.funkyradio-danger input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label,
.funkyradio-warning input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label,
.funkyradio-info input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #5bc0de;
}
.stepwizard-row .btn {
padding: 5px;
}
.btn {
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}
.btn-success {
background-color: #7e9445 !important;
border-color: #7e9445 !important;
}
.nextBtn {
background-color: #548235 !important;
border-color: #444 !important;
padding: 5px 30px !important;
font-size: 14px !important;
letter-spacing: 1px;
}
.nextBtn:focus, .btn-success.focus, .btn-success:focus {
box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5);
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5);
}
.form-control:focus {
border-color: #7e9445 !important;
box-shadow: none !important;
}
h4 {
font-size: 15px !important;
}
.query-container {
width: 500px;
margin: 0 auto;
border: 1px solid #D1D3D4;
padding: 35px;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
opacity: 1 !important;
}
@media only screen and (max-width: 550px) {
.query-container {
width: 80%;
margin: 0 auto;
border: 1px solid #D1D3D4;
padding: 35px;
}
}
$(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-success').addClass('btn-default');
$item.addClass('btn-success');
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-success').trigger('click');
});
