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');
});
toggle switch style03

toggle switch style03

texte animate effects style 01

texte animate effects style 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Planète animée style01

Planète animée style01

Input range slider HTML style05

Input range slider HTML style05

Image hover effects style

Image hover effects style

Image hover 06

Image hover 06

Header Aside Footer Admin

Header Aside Footer Admin

Form login 03

Form login 03

Drag and drop or upload input file

Drag and drop or upload input file

Css Page grid layout

Css Page grid layout

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input