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>