Lightweight Step Wizard Plugin In jQuery – jquery-steps.js

Step Wizard
Step-Wizard-Plugin-In-jQuery-jquery-steps
File Size: 12.12 KB
Views Total: 4252 views
Last Update:February 23, 2024
Publish Date: April 19, 2017
Official Website: Go to website
License: MIT
Plugin Author: oguzhanoya
Demo    Download

A Lightweight Step Wizard Plugin in jQuery. it is light weight and customizable plugin. steps form work with step-by-step wizard with navigation buttons and callback functions. It is easy to integrate other plugins e.g. jQuery validation plugin to create a form wizard driven form with field validation.

It provides a seamless user experience, guiding users through complex tasks or forms. Whether you need to create a registration process, a checkout flow, or any other multi-step workflow.

How to use Step wizard:

Add jQuery library and Step wizard jquery library :

<link rel="stylesheet" href="jquery-steps.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-steps.js"></script>

Add basic html structure :

<div id="demo">
  <div class="step-app">
    <ul class="step-steps">
      <li><a href="#step1">Step 1</a></li>
      <li><a href="#step2">Step 2</a></li>
      <li><a href="#step3">Step 3</a></li>
    </ul>
    <div class="step-content">
      <div class="step-tab-panel" id="step1">
        ...
      </div>
      <div class="step-tab-panel" id="step2">
        ...
      </div>
      <div class="step-tab-panel" id="step3">
        ...
      </div>
    </div>
    <div class="step-footer">
      <button data-direction="prev" class="step-btn">Previous</button>
      <button data-direction="next" class="step-btn">Next</button>
      <button data-direction="finish" class="step-btn">Finish</button>
    </div>
  </div>
</div>

Just  call the jquery plugin script :

$('#demo').steps();

Done

Thanks for make jQuery plugin is developed by oguzhanoya For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.1.4
  • v1.1.3
  • v1.1.2
  • v1.1.1
  • v1.1.0
  • v1.0.3
  • v1.0.2
  • v1.0.1

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.