Wizard Style Step By Step Progress Plugin - jQuery Finite State Machine

Finite State Machine is a lightweight jQuery plugin used to create interactive, wizard style steps & forms that support flow control of wizard steps. Compatible with Bootstrap 3/4 frameworks.

Basic usage:

1. Download the place the Finite State Machine plugin's script after you've loaded jQuery JavaScript library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.finiteStateMachine.js"></script>

2. Load the Bootstrap 4 framework for better styling (OPTIONAL).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

3. Create a basic linear wizard.

<div id="sm">
  <div class="row">
      <div class="col-md-12">
          <div class="fsm-state fsm-initial" data-state="1">
              This (State 1 - Initial)
          </div>

          <div class="fsm-state" data-state="2">
              Is (State 2)
          </div>

          <div class="fsm-state" data-state="3">
              A (State 3)
          </div>

          <div class="fsm-state" data-state="4">
              Finite State Machine (State 4)
          </div>

          <div class="fsm-state fsm-final" data-state="5">
              Example (State 5 - Final)
          </div>
      </div>
  </div>

  <div class="row justify-content-between">
      <div class="col-md">
          <button type="button" class="btn btn-primary fsm-prev">&lt;&lt; Prev</button>
      </div>
      <div class="col-md">
          <button type="button" class="btn btn-primary fsm-next float-right">Next &gt;&gt;</button>
      </div>
  </div>
</div>

$('#sm').finiteStateMachine({
  linear: true
});

4. Create a complex form wizard as follows:

<form id="cm">
  <div class="row">
      <div class="col-md-12">
          <div class="fsm-state fsm-initial" data-state="1" data-evaluator="evaluatorFunc">
              <h4>Report a Problem</h4>
              <div class="form-group">
                  <label for="select1">What's wrong?</label>
                  <select class="form-control" id="select1">
                      <option value="1">Bad UX</option>
                      <option value="2">Bug</option>
                      <option value="3">Abuse</option>
                  </select>
              </div>
          </div>

          <div class="fsm-state" data-state="2" data-evaluator="evaluatorFunc">
              <div class="form-group">
                  <label for="badUXinput">Tell us more about your issue</label>
                  <textarea class="form-control" id="badUXinput" rows="3"></textarea>
              </div>
          </div>

          <div class="fsm-state" data-state="3" data-evaluator="evaluatorFunc">
              <div class="form-group">
                  <label for="screenshotFile">Send us a screenshot of the issue if you want</label>
                  <input type="file" class="form-control-file" id="screenshotFile" aria-describedby="fileHelp1">
                  <small id="fileHelp1" class="form-text text-muted">.jpg, .jpeg, .png or .bmp</small>
              </div>
          </div>

          <div class="fsm-state" data-state="4" data-evaluator="evaluatorFunc">
              <div class="form-group">
                  <label for="inputFile">Any files you wish to send with your report?</label>
                  <input type="file" class="form-control-file" id="inputFile" aria-describedby="fileHelp2">
                  <small id="fileHelp2" class="form-text text-muted">Any extension.</small>
              </div>
          </div>

          <div class="fsm-state fsm-final" data-state="5" data-evaluator="evaluatorFunc">
              <p>Thank you for your feedback. We will be analyzing it soon.</p>
              <p>Please click in the submit button below to send your feedback.</p>
              <button type="submit" class="btn btn-primary">Submit</button>
          </div>

          <div class="row justify-content-between">
              <div class="col-md">
                  <button id="fsm-prev" type="button" class="btn btn-primary">&lt;&lt; Prev</button>
              </div>
              <div class="col-md">
                  <button id="fsm-next" type="button" class="btn btn-primary fsm-next float-right">Next &gt;&gt;</button>
              </div>
          </div>
      </div>
  </div>
</form>

function evaluatorFunc () {
  switch ($('#cm').getCurrentState().data('state')) {
      case 1:
          return 2;
      case 2:
          if ($('#select1').val() == '1')
              return 4;
          else
              return 3;
      case 3:
          return 4;
      case 4:
          return 5;
  }
};

$('#cm').finiteStateMachine({
  prevSelector: '#fsm-prev',
  nextSelector: '#fsm-next'
});

5. All default plugin settings and callback functions.

$('#el').finiteStateMachine({
  tateSelector: '.fsm-state',
  nextSelector: '.fsm-next',
  prevSelector: '.fsm-prev',
  initialSelector: '.fsm-initial',
  finalSelector: '.fsm-final',
  fadeSpeed: 300,
  linear: false,
  before: null,
  after: null,
  callback: null
});

---

This awesome jQuery plugin is developed by garcia-pedro-hr. For more Advanced Usages, please check the demo page or visit the official website.