Framework for Progress Forms Steps | jQuery-Form-Slider

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">
      Username <br>
      <input name="name" required>

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

  <!-- 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>Group B
      <input data-set-group="group-b" type="radio" name="important_choice" value="somevalue" required>

  <!-- 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>

  <!-- 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>

  <!-- 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>

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


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>

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.

.submit {

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() {

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

See Demo And Download

Official Website(atwellpub): Click Here

This superior jQuery/javascript plugin is developed by atwellpub. For extra advanced usage, please go to the official website.

Related Posts


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…


[Game] An Open-Source Music Player for Angular

game-music-player is an open-source music player that uses the latest popular web technologies: Angular, Ionic, Firebase, etc. It would be great if this project could grow into…