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');
});
texte animate effects style 01

texte animate effects style 01

input radio checkbox b4 style

input radio checkbox b4 style

Vidéo background en html5 style01

Vidéo background en html5 style01

Scroll to div ID

Scroll to div ID

Pie Charts

Pie Charts

Organization Chart

Organization Chart

Image hover 05

Image hover 05

Header with background animate 01

Header with background animate 01

Créer une input search animée

Créer une input search animée

Card Bootstrap4 01

Card Bootstrap4 01

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Alert Bootstrap4 style01

Alert Bootstrap4 style01