<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> <script src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.4/jquery.formtowizard.js"></script> <!-- HTML Form (wrapped in a .bootstrap-iso div) --> <div class=""> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-md-offset-3 col-xs-12"> <h1>Socio Professionista</h1> <div id='progress'><div id='progress-complete'></div></div> <form method="post" id="msform"> <fieldset> <legend>Informazioni Generali</legend> <div class="form-group "> <label class="control-label " for="name1"> Nome </label> <input class="form-control" id="name1" name="name1" type="text"/> </div> <div class="form-group "> <label class="control-label " for="name1"> Cognome </label> <input class="form-control" id="name1" name="name1" type="text"/> </div> <div class="form-group "> <label class="control-label " for="date"> Data di nascita </label> <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> <span class="help-block" id="hint_date"> Data di nascita </span> </div> <div class="form-group "> <label class="control-label " for="email"> Email </label> <input class="form-control" id="email" name="email" type="text"/> </div> <div class="form-group "> <label class="control-label " for="tel"> Telefono </label> <input class="form-control" id="tel" name="tel" type="text"/> <span class="help-block" id="hint_tel"> Lasciaci un recapito telefonico </span> </div> <div class="form-group "> <label class="control-label "> Automunito? </label> <div class=""> <div class="radio-inline"> <label class="radio"> <input name="radio2" type="radio" value="SI"/> SI </label> </div> <div class="radio-inline"> <label class="radio"> <input name="radio2" type="radio" value="NO"/> NO </label> </div> </div> </div> </fieldset> <fieldset> <legend>Informazioni Professionali</legend> <div class="form-group "> <label class="control-label " for="text"> Specializzazioni </label> <input class="form-control" id="text" name="text" type="text"/> <span class="help-block" id="hint_text"> es. Infermieristica, Analisi Cliniche, Fisioterapia </span> </div> <div class="form-group "> <label class="control-label " for="text2"> Iscritto all'albo? Quale? </label> <input class="form-control" id="text2" name="text2" type="text"/> <span class="help-block" id="hint_text2"> Scrivi l'ordine professionistico alla quale ti sei iscritto. </span> </div> <div class="form-group" id="div_radio"> <label class="control-label " for="radio"> BLSD? </label> <div class=""> <label class="radio-inline"> <input name="radio" type="radio" value="SI"/> SI </label> <label class="radio-inline"> <input name="radio" type="radio" value="NO"/> NO </label> <span class="help-block" id="hint_radio"> Se SI, scrivi anche la scadenza nel campo sottostante </span> </div> </div> <div class="form-group "> <label class="control-label " for="date1"> Scadenza BLSD </label> <input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYYY" type="text"/> <span class="help-block" id="hint_date1"> Scadenza del corso </span> </div> <div class="form-group" id="div_radio1"> <label class="control-label " for="radio1"> Esperienza </label> <div class=""> <label class="radio-inline"> <input name="radio1" type="radio" value="Domiciliare"/> Domiciliare </label> <label class="radio-inline"> <input name="radio1" type="radio" value="Reparto"/> Reparto </label> <label class="radio-inline"> <input name="radio1" type="radio" value="Entrambe"/> Entrambe </label> <label class="radio-inline"> <input name="radio1" type="radio" value="Nessuna"/> Nessuna </label> </div> </div> </fieldset> <fieldset> <legend>Disponibilità</legend> <div class="form-group "> <label class="control-label " for="text1"> Disponibilità Geografica </label> <input class="form-control" id="text1" name="text1" type="text"/> <span class="help-block" id="hint_text1"> Zona operativa prevalente </span> </div> <div class="form-group" id="div_checkbox"> <label class="control-label " for="checkbox"> Giorni </label> <div class=" "> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Lun"/> Lun </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Mar"/> Mar </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Mer"/> Mer </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Giov"/> Giov </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Ven"/> Ven </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Sab"/> Sab </label> <label class="checkbox-inline"> <input name="checkbox" type="checkbox" value="Dom"/> Dom </label> <span class="help-block" id="hint_checkbox"> I tuoi giorni disponibili </span> </div> </div> <div class="form-group" id="div_checkbox1"> <label class="control-label " for="checkbox1"> Fascia oraria </label> <div class=" "> <label class="checkbox-inline"> <input name="checkbox1" type="checkbox" value="Mattina"/> Mattina </label> <label class="checkbox-inline"> <input name="checkbox1" type="checkbox" value="Pomeriggio"/> Pomeriggio </label> <label class="checkbox-inline"> <input name="checkbox1" type="checkbox" value="Notte"/> Notte </label> <span class="help-block" id="hint_checkbox1"> In quali orari ti rendi disponibile? </span> </div> </div> <div class="form-group"> <div> <button class="btn btn-success" name="submit" type="submit"> Invia </button> </div> </div> </fieldset> </form> </div> </div> </div> </div>

#progress { position: relative; height: 5px; background-color: #eee; margin-bottom: 20px; } #progress-complete { border: 0; position: absolute; height: 5px; min-width: 10px; background-color: #337ab7; transition: width .2s ease-in-out; } .commands { overflow: hidden; margin-top: 30px; } .prev {float:left} .next, .submit,.btn-success {float:right} fieldset { border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; -webkit-box-shadow: 0px 0px 0px 0px #000; box-shadow: 0px 0px 0px 0px #000; } legend { font-size: 1.2em !important; font-weight: bold !important; text-align: left !important; width:auto; padding:0 10px; border-bottom:none; }

$("#msform").formToWizard({ submitButton: 'submit' , nextBtnName: 'Avanti >>', prevBtnName: '<< Indietro', nextBtnClass: 'btn btn-primary next', prevBtnClass: 'btn btn-default prev', buttonTag: 'button', progress: function (i, count) { $("#progress-complete").width(''+(i/count*100)+'%'); } })