Framework for Progress Forms Steps

jQuery-Form-Slider is a framework for incremental progression within forms that helps you create an easy-to-use step-by-step form wizard with field validation and an integrated progress bar.

multi step form wizard jquery validation, bootstrap 4 multi step form wizard with validation, jquery multi step form with progress bar download, jquery multi step form example

How to make use of it:

1. Add form groups as steps to the form wizard.

<form id="example">

  <!-- Step 1 -->
  <div class="step">
    <label>
      Username <br>
      <input name="name" required>
    </label>

    <label>Email <br>
      <input name="email" required>
    </label>
  </div>

  <!-- Step 2 -->
  <!-- Notice the inputs in this group have `data-set-group` attributes that will be used to alter the course of progression-->
  <div class="step">
    <Label>Group A
      <input data-set-group="group-a" type="radio" name="important_choice" value="somevalue" required>
    </label>

    <Label>Group B
      <input data-set-group="group-b" type="radio" name="important_choice" value="somevalue" required>
    </label>
  </div>

  <!-- This would be interpreted as step 1 of "group-a" , and overall the 3rd step of the entire progression if "Group A" was chosen by the user -->
  <div class="step" data-group="group-a">
      <label>Group A Question One:</label>
      <input name="group_a_answer" placeholder="Place your answer here" required>
  </div>

  <!-- This would be interpreted as step 1 of "group-b" , and overall the 3rd step of the entire progression if "Group B" was chosen by the user -->
  <div class="step" data-group="group-b">
      <label>Group B Question One</label>
      <input name="group_b_answer" required>
  </div>

  <!-- This would be interpreted as step 2 of "group-b" , and overall the 4th step of the entire progression if "Group B" was chosen by the user -->
  <div class="step" data-group="group-b">
      <label>Group B Question Two</label>
      <input name="group_b_answer" placeholder="Place your answer here" required>
  </div>

  <!-- Last Step -->
  <div class="step">
     <label>Press Submit to Complete Form</label>
  </div>

</form>

2. Add navigation & submit buttons to the form wizard.

<div class="buttons">
  <button type="button" class="back">Back</button>
  <button type="button" class="next">Next</button>
  <button type="submit" class="submit">Submit</button>
</div>

3. Create a progress bar to indicate which step you are viewing on.

<div class="progress-bar"></div>

4. Hide all steps on web page init.

.step,
.back,
.submit {
  display:none;
}

5. Load the wanted jQuery library and jquery-validation plugin within the doc.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jquery.validate.min.js"></script>

6. Initialize the form slider plugin and executed it.

jQuery(document).ready(function() {
  formSlider.init('#example');
});

Step-by-step Form Progress/Wizard Plugin, jQuery-Form-Slide Github, jquery multi step form with validation and next previous navigation, jquery form wizard with validation, multi step form using jquery