Steps Form
Purpose
Provides the ability to split a form into steps (without/with generic validation).
Example
View code
<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>
Example - Steps Form with quiz option
View code
<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>
- Date modified: