Formulaire à étapes

<section>	<h2>Exemple pratique</h2>	<div class="wb-frmvld wb-steps">	<form action="#" method="get" id="steps-example">	<fieldset id="client">	<legend>Informations du client</legend>	<div>	<div class="form-group">	<label for="firstname" class="required"><span class="field-name">Prénom</span></label>	<input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" required="required">	</div>	<div class="form-group">	<label for="lastname" class="required"><span class="field-name">Nom de famille</span></label>	<input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" required="required">	</div>	<div class="form-group">	<label for="dateOfBirth" class="required"><span class="field-name">Date de naissance</span><span class="datepicker-format"> (<abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span></label>	<input class="form-control" id="dateOfBirth" name="dateOfBirth" type="date" required="required">	</div>	</div>	</fieldset>	<fieldset id="contact">	<legend>Informations de contact</legend>	<div>	<div class="form-group">	<label for="preferredNumber" class="required">Principal : <span class="field-name">Numéro de téléphone</span></label>	<input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" required="required">	</div>	<div class="form-group">	<label for="secondaryNumber">Secondaire : <span class="field-name">Numéro de téléphone</span></label>	<input class="form-control" id="secondaryNumber" name="secondaryNumber" type="tel" data-rule-phoneUS="true">	</div>	<div class="form-group">	<label for="email"><span class="field-name">Adresse courriel</span> (test@domaine)</label>	<input class="form-control" id="email" name="email" type="email">	</div>	</div>	</fieldset>	<fieldset id="questionaire">	<legend>Questionnaire éthique</legend>	<div>	<small>Pour chacun des exemples suivants, indiquez si vous sentez qu'il s'agit d'un cas de problème éthique ou pas.</small>	<fieldset class="subfields">	<legend><span class="field-name">Exemple 1</span>: Vous payez 10,00 $ pour un achat, mais vous recevez de la monnaie comme s'il s'agissait de 20,00 $. Garderiez vous la monnaie en surplus?</legend>	<div class="radio">	<label for="defNot-1"><input type="radio" name="ethics1" value="defNot-1" id="defNot-1"> Absolument pas</label> 	<label for="probNot-1"><input type="radio" name="ethics1" value="probNot-1" id="probNot-1"> Probablement pas</label> 	<label for="maybe-1"><input type="radio" name="ethics1" value="maybe-1" id="maybe-1"> Peut-être (Incertain)</label> 	<label for="probably-1"><input type="radio" name="ethics1" value="probably-1" id="probably-1"> Probablement</label> 	<label for="definitely-1"><input type="radio" name="ethics1" value="definitely-1" id="definitely-1"> Définitivement</label>	</div>	</fieldset>	<fieldset class="subfields">	<legend><span class="field-name">Exemple 2</span>: Vous avez besoin d'un logiciel, mais vous ne pouvez pas attendre que la gestion prenne cette décision. Le téléchargeriez-vous sans avoir de licence?</legend>	<div class="radio">	<label for="defNot-2"><input type="radio" name="ethics2" value="defNot-2" id="defNot-2"> Absolument pas</label> 	<label for="probNot-2"><input type="radio" name="ethics2" value="probNot-2" id="probNot-2"> Probablement pas</label> 	<label for="maybe-2"><input type="radio" name="ethics2" value="maybe-2" id="maybe-2"> Peut-être (Incertain)</label> 	<label for="probably-2"><input type="radio" name="ethics2" value="probably-2" id="probably-2"> Probablement</label> 	<label for="definitely-2"><input type="radio" name="ethics2" value="definitely-2" id="definitely-2"> Définitivement</label>	</div>	</fieldset>	</div>	</fieldset>	<input type="submit" name="submit" value="Soumettre" class="btn btn-primary">	</form>	</div>	</section> 

<section>	<h2 id="default-1">Exemple - Formulaire d'étapes avec option de quiz</h2>	<div class="wb-frmvld wb-steps quiz">	<form action="#" id="quiz-example">	<fieldset>	<legend>1. Quel est ton fruit préféré?</legend>	<div>	<p>Mon fruit préféré est:</p>	<ul class="form-group list-unstyled">	<li class="radio">	<label for="apple-1"><input type="radio" name="fruit" id="apple-1" value="apple">Pomme</label>	</li>	<li class="radio">	<label for="orange-1"><input type="radio" name="fruit" id="orange-1" value="orange">Orange</label>	</li>	<li class="radio">	<label for="banana-1"><input type="radio" name="fruit" id="banana-1" value="banana">Banane</label>	</li>	<li class="radio">	<label for="kiwi-1"><input type="radio" name="fruit" id="kiwi-1" value="Kiwi">Kiwi</label>	</li>	</ul>	</div>	</fieldset>	<fieldset>	<legend>2. Quel est ton animal de compagnie préféré?</legend>	<div>	<p>Mon animal préféré est:</p>	<ul class="form-group list-unstyled">	<li class="radio">	<label for="dog-1"><input type="radio" name="animal" id="dog-1" value="dog">Chien</label>	</li>	<li class="radio">	<label for="cat-1"><input type="radio" name="animal" id="cat-1" value="cat">Chat</label>	</li>	<li class="radio">	<label for="bird-1"><input type="radio" name="animal" id="bird-1" value="bird">Oiseau</label>	</li>	</ul>	</div>	</fieldset>	<fieldset>	<legend>3. Condiments</legend>	<div>	<p>Choisissez vos condiments:</p>	<ul class="form-group list-unstyled">	<li class="checkbox">	<label for="ketchup-1"><input type="checkbox" id="ketchup-1" value="ketchup" name="condiments">Ketchup</label>	</li>	<li class="checkbox">	<label for="relish-1"><input type="checkbox" id="relish-1" value="relish" name="condiments">Relish</label>	</li>	<li class="checkbox">	<label for="mustard-1"><input type="checkbox" id="mustard-1" value="mustard" name="condiments">Moutarde</label>	</li>	</ul>	</div>	</fieldset>	<input type="submit" name="submit" value="Soumettre" class="btn btn-primary" />	</form>	</div> </section>