"Richiesta"
Bootstrap 3.0.0 Snippet by spfstudio

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <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">1</a> <p>Scelta del logo</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Dati di Contatto</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Accettazione</p> </div> </div> </div> <!---STEP 1---> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Personalizzazione base</h3> <!-- Scegli Logo Numero --> <div class="form-group"> <div class="col-xs-2"> <label for="logo">Seleziona Simbolo</label> <div class="input-group"> <select id="logo" name="logo" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> <option value="33">33</option> <option value="34">34</option> <option value="35">35</option> <option value="36">36</option> </select> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk" ></span></span> </div> </div> <!---Nome Azienda---> <div class="form-group"> <div class="col-xs-4"> <label for="InputName">Nome Azienda</label> <div class="input-group"> <input type="text" class="form-control" name="name" placeholder="Nome del Logo" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> </div> <!---Pay-off---> <div class="form-group"> <div class="col-xs-5"> <label for="InputName">Pay-off</label> <div class="input-group"> <input type="text" class="form-control" name="payoff" placeholder="Inserire un eventuale slogan o pay-off"> </div> </div> </div> <br> <br> <br> <br> <!---colori---> <div class="form-group"> <div class="col-xs-2"> <label for="InputName">Colori</label> <div class="input-group"> <input type="text" class="form-control" name="colors" placeholder="colore #1" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="col-xs-2"> <label for="InputName"> </label> <div class="input-group"> <input type="text" class="form-control" name="colors" placeholder="colore #2" > </div> </div> <div class="col-xs-2"> <label for="InputName"> </label> <div class="input-group"> <input type="text" class="form-control" name="colors" placeholder="colore #3"> </div> </div> </div> <br> <br> <br> <br> <br> <br> <!---BOTTONE AVANTI---> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Avanti</button> </div> </div> </div> </div> <!---STEP 2---> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Dettagli cliente</h3> <div class="form-group"> <div class="col-xs-6"> <label for="InputName">Nome</label> <div class="input-group"> <input type="text" class="form-control" name="first_name" placeholder="" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> </div> <div class="col-xs-6"> <label for="InputName">Cognome</label> <div class="input-group"> <input type="text" class="form-control" name="last_name" placeholder="" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="col-xs-12"> <label for="InputEmail">Email</label> <div class="input-group"> <input type="email" class="form-control" name="email" placeholder="Email per corrispondenza" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="col-xs-12"> <label for="InputStreetName">Indirizzo</label> <div class="input-group"> <input type="text" class="form-control" name="street_name" placeholder="Via, C.so, P.zza. Numero" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="col-xs-6"> <label for="InputCity">Città</label> <div class="input-group"> <input type="text" class="form-control" name="city" placeholder="" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> <div class="form-group"> <div class="col-xs-6"> <label for="InputProvince">Provincia</label> <div class="input-group"> <input type="text" class="form-control" name="province" placeholder="Provincia o Cap" required> <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> </div> </div> </div> </div> </div> <br> <br> <br> <br> <br> <br> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Avanti</button> </div> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Accettazione</h3> <div id="login-overlay" class="modal-dialog"> <p>Inviando la richiesta si accettano i <a href="t&c.html">Termini e Condizioni</a> integrali dell'offerta. I dati personali sono sottoposti alle leggi sulla privacy: essi non verranno utilizzati per scopi diversi dalla presente offerta.</p> </div> <div class="modal-body"> <div class="col-sm-10"> <input type="checkbox" class="checkbox" />Accetto Termini e Condizioni </div> </div> <button class="btn btn-success btn-lg pull-right" type="submit">RICHIEDI</button> </div> </div> </div> </form> </div>
body{ margin-top:40px; } .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-order: 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; }
$(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='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'); //@naresh action dynamic childs var next = 0; $("#add-more").click(function(e){ e.preventDefault(); var addto = "#field" + next; var addRemove = "#field" + (next); next = next + 1; var newIn = ' <div id="field'+ next +'" name="field'+ next +'"><!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="action_id">Action Id</label> <div class="col-md-5"> <input id="action_id" name="action_id" type="text" placeholder="" class="form-control input-md"> </div></div><br><br><!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="action_name">Action Name</label> <div class="col-md-5"> <input id="action_name" name="action_name" type="text" placeholder="" class="form-control input-md"> </div></div><br><br><!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="action_json">Action JSON File</label> <div class="col-md-4"> <input id="action_json" name="action_json" class="input-file" type="file"> </div></div></div>'; var newInput = $(newIn); var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">'; var removeButton = $(removeBtn); $(addto).after(newInput); $(addRemove).after(removeButton); $("#field" + next).attr('data-source',$(addto).attr('data-source')); $("#count").val(next); $('.remove-me').click(function(e){ e.preventDefault(); var fieldNum = this.id.charAt(this.id.length-1); var fieldID = "#field" + fieldNum; $(this).remove(); $(fieldID).remove(); }); }); });

Related: See More


Questions / Comments: