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');
});
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Background overlay

Background overlay

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Css Page grid layout

Css Page grid layout

Form login 02

Form login 02

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Tablet style code texte

Tablet style code texte

Vers le haut

Vers le haut

bootstrap4 tabs

bootstrap4 tabs