Ahead ERP

SmartWizard
SmartWizard Basic
jQuery Smart Wizard is an accessible step wizard plugin for jQuery. Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc. Easy implementation, Bootstrap compatibility, customizable toolbars, themes, events and Ajax support are few of the features.
1

Details

Name and Details
2

Location

Guide to reach you
3

Working Hours

Availability and Opening hours
4

Services

Add at least 1 service
AdminUIUX
Company Details
Company Name
Company Tagline (Optional)
Enter Phone
Email Address
Describe Services and Facilities
Short description about services
Locate on Map
Company Address
Branch Name
Shop/Door Number
Street
Locality
Town
City
Postcode
Country
Working Hours
Open
Sunday
Start Time
End Time
Open
Monday
Start Time
End Time
Open
Tuesday
Start Time
End Time
Open
Wednesday
Start Time
End Time
Open
Thursday
Start Time
End Time
Open
Friday
Start Time
End Time
Open
Saturday
Start Time
End Time
Working hours same for online bookings
Services
Service Name
Price ($)
Tax
Discount
Learn more about options and methods

            <div class="card border overflow-hidden mb-4" id="smartwizard">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#step-1">
                            <div class="num">1</div>
                            <div>
                                <p class="h5 mb-0">Details</p>
                                <p class="opacity-75 small">Name and Details</p>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#step-2">
                            <div class="num">2</div>
                            <div>
                                <p class="h5 mb-0">Location</p>
                                <p class="opacity-75 small">Guide to reach you</p>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#step-3">
                            <div class="num">3</div>
                            <div>
                                <p class="h5 mb-0">Working Hours</p>
                                <p class="opacity-75 small">Availability and Opening hours</p>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#step-4">
                            <div class="num">4</div>
                            <div>
                                <p class="h5 mb-0">Services</p>
                                <p class="opacity-75 small">Add at least 1 service</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- details -->
                        <div id="step-1" class="tab-pane px-0 " role="tabpanel" aria-labelledby="step-1">
                            <div class="row align-items-center">
                                <div class="col-12 col-lg-3 text-center mb-3">
                                    <figure class="avatar avatar-140 coverimg rounded-circle mt-3 mb-3">
                                        <img src="assets/img/modern-ai-image/user-6.jpg" alt="" />
                                        <button class="btn btn-square btn-accent rounded-circle" onclick="$(this).next().click()">
                                            <i class="bi bi-upload"></i>
                                        </button>
                                        <input type="file" class="d-none" />
                                    </figure>
                                    <p class="h5">AdminUIUX</p>
                                </div>
                                <div class="col">
                                    <!-- Details -->
                                    <p class="h6 py-2 mb-2">Company Details</p>
                                    <div class="row ">
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="investmentname" placeholder="Enter companyName" value="AdminUIUX">
                                                <label for="investmentname">Company Name</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="investmentmname" placeholder="Enter company tagline">
                                                <label for="investmentmname">Company Tagline (Optional)</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="phoneon" placeholder="Enter phone" value="+91 4152 21A45488004">
                                                <label for="phoneon">Enter Phone</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="email" class="form-control" id="emailaddresson" placeholder="Enter Email Address" value="alexa.smith@tgmails.com">
                                                <label for="emailaddresson">Email Address</label>
                                            </div>
                                        </div>
                                    </div>
            
                                    <!-- Describe Services and Facilities -->
                                    <p class="h6 py-2 mb-2">Describe Services and Facilities</p>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-floating mb-3">
                                                <textarea class="form-control height-150" id="describe" placeholder="Enter description about services"></textarea>
                                                <label for="describe">Short description about services</label>
                                            </div>
                                        </div>
                                    </div>
            
                                </div>
                            </div>
                        </div>
                        <!-- Address -->
                        <div id="step-2" class="tab-pane px-0 pb-0" role="tabpanel" aria-labelledby="step-2">
                            <div class="row">
                                <div class="col-12 col-lg-3 text-center">
                                    <p class="h6 py-2 mb-2">Locate on Map</p>
                                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d788.4385190507815!2d-122.4278138198206!3d37.772364180178094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1712990839970!5m2!1sen!2sin" width="100%" height="280" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="rounded mb-3"></iframe>
                                </div>
                                <div class="col">
                                    <div class="row align-items-center mb-2">
                                        <div class="col">
                                            <p class="h6 py-2">Company Address</p>
                                        </div>
                                        <div class="col-auto">
                                            <button class="btn btn-link"><i data-feather="plus"></i> Add Another</button>
                                        </div>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" id="house" placeholder="Enter branch name">
                                        <label for="house">Branch Name</label>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="house" placeholder="Enter Shop/Door number" value="12">
                                                <label for="house">Shop/Door Number</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="street" placeholder="Enter Street" value="Feather stone Street">
                                                <label for="street">Street</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="locality" placeholder="Enter locality" value="Ward">
                                                <label for="locality">Locality</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="town" placeholder="Enter Town" value="London">
                                                <label for="town">Town</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="city" placeholder="Enter City" value="London">
                                                <label for="city">City</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="postcode" placeholder="Enter Postcode" value="NG25 5AY">
                                                <label for="postcode">Postcode</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6 col-xl-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="country" placeholder="Enter Country" value="United Kingdom">
                                                <label for="country">Country</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-3" class="tab-pane px-0 pb-0" role="tabpanel" aria-labelledby="step-3">
            
                            <p class="h6 py-2 mb-2">Working Hours</p>
                            <div class="row">
                                <div class="col-12 col-lg-6">
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="sunday">
                                                <label class="form-check-label" for="sunday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Sunday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-1">
                                                <label for="starttime-1">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-1">
                                                <label for="endtime-1">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="monday" checked>
                                                <label class="form-check-label" for="monday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Monday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-2">
                                                <label for="starttime-2">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-2">
                                                <label for="endtime-2">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="tuesday" checked>
                                                <label class="form-check-label" for="tuesday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Tuesday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-3">
                                                <label for="starttime-3">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-3">
                                                <label for="endtime-3">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="wednesday" checked>
                                                <label class="form-check-label" for="wednesday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Wednesday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-4">
                                                <label for="starttime-4">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-4">
                                                <label for="endtime-4">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="thursday" checked>
                                                <label class="form-check-label" for="thursday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Thursday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-5">
                                                <label for="starttime-5">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-5">
                                                <label for="endtime-5">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="friday" checked>
                                                <label class="form-check-label" for="friday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Friday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-6">
                                                <label for="starttime-6">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-6">
                                                <label for="endtime-6">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-auto py-2 mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="saturday" checked>
                                                <label class="form-check-label" for="saturday">Open</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <p>Saturday</p>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="starttime-7">
                                                <label for="starttime-7">Start Time</label>
                                            </div>
                                        </div>
                                        <div class="col mb-3">
                                            <div class="form-floating">
                                                <input type="time" class="form-control" id="endtime-7">
                                                <label for="endtime-7">End Time</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="">
                                <div class="form-check ">
                                    <input class="form-check-input" type="checkbox" name="wokringhours" id="wokringhours" checked="">
                                    <label class="form-check-label" for="wokringhours">Working hours same for online
                                        bookings</label>
                                </div>
                            </div>
                            <br>
                        </div>
                        <div id="step-4" class="tab-pane px-0 pb-0" role="tabpanel" aria-labelledby="step-4">
                            <div class="row align-items-center mb-2">
                                <div class="col">
                                    <p class="h6 py-2">Services</p>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-link"><i data-feather="plus"></i> Add Another</button>
                                </div>
                            </div>
                            <div class="row ">
                                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" placeholder="Enter service name" value="Online Consultation">
                                        <label>Service Name</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" placeholder="Enter price" value="52.00">
                                        <label>Price ($)</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md">
                                    <div class="form-floating mb-3">
                                        <select class="form-select">
                                            <option>VAT 5%</option>
                                            <option>GST 20%</option>
                                            <option>GST 20%</option>
                                        </select>
                                        <label>Tax</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md">
                                    <div class="form-floating mb-3">
                                        <select class="form-select">
                                            <option>5%</option>
                                            <option>10%</option>
                                            <option>15%</option>
                                            <option>FREE1BUY</option>
                                            <option>BUY1GET2</option>
                                        </select>
                                        <label>Discount</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Include optional progressbar HTML -->
                <div class="progress bg-theme-1-subtle rounded-0">
                    <div class="progress-bar bg-theme-accent-l-gradient h-100 rounded-0" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <script>
                "use strict";
            
                $(document).ready(function () {
            
                    $('#smartwizard').smartWizard({
                        toolbar: {
                            extraHtml: '<a class="btn btn-outline-accent float-start" href="#">Skip</a><a class="btn btn-theme finish-btn" style="display:none" href="#">Finish</a>' // Extra html to show on toolbar
                        },
                    });
                    $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
                        if (stepPosition === 'last') {
                            $(".finish-btn").show();
                        } else {
                            $(".finish-btn").hide();
                        }
                    });
            
                });
            </script>
SmartWizard Dots
script option theme:'dots',
1

Details

Name and Details
2

Location

Guide to reach you
3

Working Hours

Availability and Opening hours
4

Services

Add at least 1 service
AdminUIUX
Company Details
Company Name
Company Tagline (Optional)
Enter Phone
Email Address
Describe Services and Facilities
Short description about services
Locate on Map
Company Address
Branch Name
Shop/Door Number
Street
Locality
Town
City
Postcode
Country
Working Hours
Open
Sunday
Start Time
End Time
Open
Monday
Start Time
End Time
Open
Tuesday
Start Time
End Time
Open
Wednesday
Start Time
End Time
Open
Thursday
Start Time
End Time
Open
Friday
Start Time
End Time
Open
Saturday
Start Time
End Time
Working hours same for online bookings
Services
Service Name
Price ($)
Tax
Discount
ProgressBar Js
Swiper Carousel