Steps Form

<section>	<h2>Example</h2>	<div class="wb-frmvld wb-steps">	<form action="#" method="get" id="steps-example">	<fieldset id="client">	<legend>Client Information</legend>	<div>	<div class="form-group">	<label for="firstname" class="required"><span class="field-name">First name</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">Last name</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 of Birth</span><span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>	<input class="form-control" id="dateOfBirth" name="dateOfBirth" type="date" required="required">	</div>	</div>	</fieldset>	<fieldset id="contact">	<legend>Contact Information</legend>	<div>	<div class="form-group">	<label for="preferredNumber" class="required">Preferred: <span class="field-name">Phone Number</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">Secondary: <span class="field-name">Phone Number</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">Email Address</span> (test@domain)</label>	<input class="form-control" id="email" name="email" type="email">	</div>	</div>	</fieldset>	<fieldset id="questionaire">	<legend>Ethics Questionnaire</legend>	<div>	<p><small>For each of the following examples, indicate whether or not you feel that there is an ethical issue.</small></p>	<fieldset class="subfields">	<legend><span class="field-name">Ethics 1</span>: You pay $10.00 bucks for a purchase, but receive change for $20.00 bucks. Would you keep the extra money?</legend>	<div class="radio">	<label for="defNot-1"><input type="radio" name="ethics1" value="defNot-1" id="defNot-1"> Definitely Not</label> 	<label for="probNot-1"><input type="radio" name="ethics1" value="probNot-1" id="probNot-1"> Probably Not</label> 	<label for="maybe-1"><input type="radio" name="ethics1" value="maybe-1" id="maybe-1"> Maybe (Not Sure)</label> 	<label for="probably-1"><input type="radio" name="ethics1" value="probably-1" id="probably-1"> Probably</label> 	<label for="definitely-1"><input type="radio" name="ethics1" value="definitely-1" id="definitely-1"> Definitely</label>	</div>	</fieldset>	<fieldset class="subfields">	<legend><span class="field-name">Ethics 2</span>: You need a software, but can't wait for office to make a decision. Against license restrictions would you download it?</legend>	<div class="radio">	<label for="defNot-2"><input type="radio" name="ethics2" value="defNot-2" id="defNot-2"> Definitely Not</label> 	<label for="probNot-2"><input type="radio" name="ethics2" value="probNot-2" id="probNot-2"> Probably Not</label> 	<label for="maybe-2"><input type="radio" name="ethics2" value="maybe-2" id="maybe-2"> Maybe (Not Sure)</label> 	<label for="probably-2"><input type="radio" name="ethics2" value="probably-2" id="probably-2"> Probably</label> 	<label for="definitely-2"><input type="radio" name="ethics2" value="definitely-2" id="definitely-2"> Definitely</label>	</div>	</fieldset>	</div>	</fieldset>	<input type="submit" name="submit" value="Submit" class="btn btn-primary">	</form>	</div>	</section>  

<section>	<h2 id="default-1">Example - Steps Form with quiz option</h2>	<div class="wb-frmvld wb-steps quiz">	<form action="#" id="quiz-example">	<fieldset>	<legend>1. Which is your favorite fruit?</legend>	<div>	<p>My favorite fruit is:</p>	<ul class="form-group list-unstyled">	<li class="radio">	<label for="apple-1"><input type="radio" name="fruit" id="apple-1" value="apple">Apple</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">Banana</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. Which is your favorite pet?</legend>	<div>	<p>My favorite pet is:</p>	<ul class="form-group list-unstyled">	<li class="radio">	<label for="dog-1"><input type="radio" name="animal" id="dog-1" value="dog">Dog</label>	</li>	<li class="radio">	<label for="cat-1"><input type="radio" name="animal" id="cat-1" value="cat">Cat</label>	</li>	<li class="radio">	<label for="bird-1"><input type="radio" name="animal" id="bird-1" value="bird">Bird</label>	</li>	</ul>	</div>	</fieldset>	<fieldset>	<legend>3. Condiments</legend>	<div>	<p>Choose your 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">Mustard</label>	</li>	</ul>	</div>	</fieldset>	<input type="submit" class="btn btn-primary" />	</form>	</div> </section>