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:
Table of Contents
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.
