A Vanilla JavaScript wizard plugin that helps you generate interactive forms with step-by-step wizard using Bootstrap 5’s tabs component.
It’s easy on the eye and user-friendly interface makes the plugin accessible to a wide range of users, regardless of their level of experience using JavaScript.
How to use it:
1. Install & download.
# Yarn $ yarn add vanilla-wizard # NPM $ npm i vanilla-wizard
2. Load the main JavaScript wizard.min.js in your document which has Bootstrap 5 framework included.
<!-- Bootstrap 5 --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- Wizard Plugin --> <script src="/path/to/dist/js/wizard.min.js"></script>
3. The required HTML structure for the form wizard.
<div id="basicwizard">
<ul class="nav nav-tabs nav-justified mb-3">
<li class="nav-item" data-target-form="#contactDetailForm">
<a
href="#contactDetail"
data-bs-toggle="tab"
data-toggle="tab"
class="nav-link icon-btn active"
>
<i class="bx bxs-contact me-1"></i>
<span class="d-none d-sm-inline">Contact Detail</span>
</a>
</li>
<!-- end nav item -->
<li class="nav-item" data-target-form="#jobDetailForm">
<a
href="#jobDetail"
data-bs-toggle="tab"
data-toggle="tab"
class="nav-link icon-btn"
>
<i class="bx bxs-building me-1"></i>
<span class="d-none d-sm-inline">Job Detail</span>
</a>
</li>
<!-- end nav item -->
<li class="nav-item" data-target-form="#educationDetailForm">
<a
href="#educationDetail"
data-bs-toggle="tab"
data-toggle="tab"
class="nav-link icon-btn"
>
<i class="bx bxs-book me-1"></i>
<span class="d-none d-sm-inline">Education Detail</span>
</a>
</li>
<!-- end nav item -->
<li class="nav-item">
<a
href="#finish"
data-bs-toggle="tab"
data-toggle="tab"
class="nav-link icon-btn"
>
<i class="bx bxs-check-circle me-1"></i>
<span class="d-none d-sm-inline">Finish</span>
</a>
</li>
<!-- end nav item -->
</ul>
<!-- nav pills -->
<div class="tab-content mb-0 pt-0">
<!-- START: Define your progress bar here -->
<div id="bar" class="progress mb-3" style="height: 7px;">
<div class="bar progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
</div>
<!-- END: Define your progress bar here -->
<!-- START: Define your tab pans here -->
<div class="tab-pane show active" id="contactDetail">
<form id="contactForm" method="post" action="#">
<h5 class="mb-3 mt-0">How the employers to contact you?</h5>
<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
placeholder="Enter your first name"
/>
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="lastName">Last Name</label>
<input
type="text"
class="form-control"
id="lastName"
placeholder="Enter your last name"
/>
</div>
</div>
</div>
</form>
</div>
<!-- end contact detail tab pane -->
<div class="tab-pane" id="jobDetail">
<form id="jobForm" method="post" action="#">
<h5 class="my-3">Tell us about your most recent job</h5>
<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="jobTitle">Job Title</label>
<input
type="text"
class="form-control"
id="jobTitle"
placeholder="enter your job title"
/>
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="employer">Employer</label>
<input
type="text"
class="form-control"
id="employer"
placeholder="enter emplyoer"
/>
</div>
</div>
</div>
</form>
</div>
<!-- end job detail tab pane -->
<div class="tab-pane" id="educationDetail">
<form id="educationForm" method="post" action="#">
<h5 class="mb-3 mt-0">Tell us about your education</h5>
<div class="row">
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="schoolName">School Name</label>
<input
type="text"
class="form-control"
id="schoolName"
placeholder="enter your school name"
/>
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label class="form-label" for="schoolLocation"
>School Location</label
>
<input
type="text"
class="form-control"
id="schoolLocation"
placeholder="enter your school location"
/>
</div>
</div>
</div>
</form>
</div>
<!-- end education detail tab pane -->
<div class="tab-pane" id="finish">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="text-center">
<i class="bx bx-check-double h5"></i>
<h3 class="mt-0">Thank you !</h3>
<div class="mb-3">
<div class="form-check d-inline-block">
<input
type="checkbox"
class="form-check-input"
id="customCheck1"
/>
<label class="form-check-label" for="customCheck1"
>I agree with the Terms and Conditions</label
>
</div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- END: Define your tab pans here -->
<!-- START: Define your controller buttons here-->
<div class="d-flex wizard justify-content-between mt-3">
<div class="first">
<a href="javascript:void(0);" class="btn btn-primary">
First
</a>
</div>
<div class="d-flex">
<div class="previous me-2">
<a href="javascript:void(0);" class="btn icon-btn btn-primary">
<i class="bx bx-left-arrow-alt me-2"></i>Back To Previous
</a>
</div>
<div class="next">
<a
href="javascript:void(0);"
class="btn icon-btn btn-primary mt-3 mt-md-0"
>
Next Step<i class="bx bx-right-arrow-alt ms-2"></i>
</a>
</div>
</div>
<div class="last">
<a href="javascript:void(0);" class="btn btn-primary mt-3 mt-md-0">
Finish
</a>
</div>
</div>
<!-- END: Define your controller buttons here-->
</div>
<!-- end tab content-->
</div>
4. Initialize the wizard plugin and done.
new Wizard("#basicwizard",{
// options here
});
5. Enable form validation. You need to add the ‘required’ attribute to all input fields for from validation.
new Wizard("#basicwizard",{
validate: true
});
6. Display a step progress bar inside the form wizard.
new Wizard("#basicwizard",{
progress: true
});
The post Interactive Wizard UI Using Bootstrap 5 Tabs Component appeared first on CSS Script.