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');
});
Titre section avec une bande style01

Titre section avec une bande style01

Timeline style03

Timeline style03

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Pagination with Jquery

Pagination with Jquery

Menu aside style01 slide out

Menu aside style01 slide out

Login Bootstrap3

Login Bootstrap3

Form Création de compte

Form Création de compte

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Profile Style01

Card Profile Style01

Arrows Defense Game

Arrows Defense Game

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js