Formulaire à étapes

But

Offre la possibilité de diviser un formulaire en différentes étapes (sans ou avec validation de formulaire).

Exemple pratique

Informations du client
Informations de contact
Questionnaire éthique
Pour chacun des exemples suivants, indiquez si vous sentez qu'il s'agit d'un cas de problème éthique ou pas.
Exemple 1: 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?
       
Exemple 2: 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?
       
Visualiser le code 
<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>

Exemple - Formulaire d'étapes avec option de quiz

1. Quel est ton fruit préféré?

Mon fruit préféré est:

2. Quel est ton animal de compagnie préféré?

Mon animal préféré est:

3. Condiments

Choisissez vos condiments:

Visualiser le code 
<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>
Date de modification :