Material Design Form Wizard Validation With jQuery In Bootstrap 3

Step Wizard
File Size: 1.54 MB
Views Total: 7417 views
Last Update:January 11, 2024
Publish Date: August 28, 2016
Official Website: Go to website
License: MIT
Plugin Author: creativetimofficial
Demo    Download

Material Design Form Wizard  Bootstrap is a jQuery plugin. It can be converts a long html form into an elegant, Material Design-design, step by step wizard with field validation support.It is fully responsive wizard, it is same view and part of Google’s Material Design. Based on Bootstrap’s styles and tabs component.

More Example :

  1. Simple Step Wizard
  2. List Place Step Wizard

How to use :

Add the necessary jQuery library and Twitter’s Bootstrap :

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="jquery.min.js"></script>

Add the Twitter Bootstrap Wizard and jquery-validation plugins  :

<script src="jquery.bootstrap.wizard.js"></script>
<script src="jquery.validation.min.js"></script>

Add the Material Bootstrap Wizard plugin’s files :

<link href="material-bootstrap-wizard.css" rel="stylesheet">
<script src="material-bootstrap-wizard.js"></script>

The html structure for the wizard form :

<div class="wizard-container">
  <div class="card wizard-card" data-color="red" id="wizard">
    <form action="" method="">
      <div class="wizard-header">
        <h3 class="wizard-title"> Book a Room </h3>
        <h5>This information will let us know more about you.</h5>
      </div>
      <div class="wizard-navigation">
        <ul>
          <li><a href="#details" data-toggle="tab">Account</a></li>
          <li><a href="#captain" data-toggle="tab">Room Type</a></li>
          <li><a href="#description" data-toggle="tab">Extra Details</a></li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="tab-pane" id="details">
          <div class="row">
            <div class="col-sm-12">
              <h4 class="info-text"> Let's start with the basic details.</h4>
            </div>
            <div class="col-sm-6">
              <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">email</i> </span>
                <div class="form-group label-floating">
                  <label class="control-label">Your Email</label>
                  <input name="name" type="text" class="form-control">
                </div>
              </div>
              <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">lock_outline</i> </span>
                <div class="form-group label-floating">
                  <label class="control-label">Your Password</label>
                  <input name="name2" type="password" class="form-control">
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group label-floating">
                <label class="control-label">Country</label>
                <select class="form-control">
                  <option disabled="" selected=""></option>
                  <option value="Afghanistan"> Afghanistan </option>
                  <option value="Albania"> Albania </option>
                  <option value="Algeria"> Algeria </option>
                  <option value="American Samoa"> American Samoa </option>
                  <option value="Andorra"> Andorra </option>
                  <option value="Angola"> Angola </option>
                  <option value="Anguilla"> Anguilla </option>
                  <option value="Antarctica"> Antarctica </option>
                  <option value="...">...</option>
                </select>
              </div>
              <div class="form-group label-floating">
                <label class="control-label">Daily Budget</label>
                <select class="form-control">
                  <option disabled="" selected=""></option>
                  <option value="Afghanistan"> < $100 </option>
                  <option value="Albania"> $100 - $499 </option>
                  <option value="Algeria"> $499 - $999 </option>
                  <option value="American Samoa"> $999+ </option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="captain">
          <h4 class="info-text">What type of room would you want? </h4>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
              <div class="col-sm-4">
                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="This is good if you travel alone.">
                  <input type="radio" name="job" value="Design">
                  <div class="icon"> <i class="material-icons">weekend</i> </div>
                  <h6>Single</h6>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this room if you're traveling with your family.">
                  <input type="radio" name="job" value="Code">
                  <div class="icon"> <i class="material-icons">home</i> </div>
                  <h6>Family</h6>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if you are coming with your team.">
                  <input type="radio" name="job" value="Code">
                  <div class="icon"> <i class="material-icons">business</i> </div>
                  <h6>Business</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="description">
          <div class="row">
            <h4 class="info-text"> Drop us a small description.</h4>
            <div class="col-sm-6 col-sm-offset-1">
              <div class="form-group">
                <label>Room description</label>
                <textarea class="form-control" placeholder="" rows="6"></textarea>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label">Example</label>
                <p class="description">"The room really nice name is recognized as being a really awesome room. We use it every sunday when we go fishing and we catch a lot. It has some kind of magic shield around it."</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wizard-footer">
        <div class="pull-right">
          <input type='button' class='btn btn-next btn-fill btn-danger btn-wd' name='next' value='Next' />
          <input type='button' class='btn btn-finish btn-fill btn-danger btn-wd' name='finish' value='Finish' />
        </div>
        <div class="pull-left">
          <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
          <div class="footer-checkbox">
            <div class="col-sm-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="optionsCheckboxes">
                </label>
                Subscribe to our newsletter </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </form>
  </div>
</div>

Done

Thanks for make jQuery plugin is developed by creativetimofficial For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.0.1
  • v1.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.