Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Horizontal Wizard#

Account Information

Setup your account information

Profile Information

Setup your profile information

Preview Image

Social Media Links

Fill your social media links

Finished !

Filled Data Successfully.

                                                    
                                                        <form>
                                                        <div id="horizontalwizard">
                                                            <ul class="nav nav-pills nav-justified icon-wizard form-wizard-header bg-light p-1" role="tablist">
                                                                <li class="nav-item" role="presentation">
                                                                    <a href="#basictab1" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2 active" aria-selected="true" role="tab">
                                                                        <iconify-icon icon="iconamoon:profile-circle-duotone" class="fs-26"></iconify-icon>
                                                                        Account
                                                                    </a><!-- end nav-link -->
                                                                </li><!-- end nav-item -->
                                                                <li class="nav-item" role="presentation">
                                                                    <a href="#basictab2" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab" tabindex="-1">
                                                                        <iconify-icon icon="iconamoon:profile-duotone" class="fs-26"></iconify-icon>
                                                                        Profile
                                                                    </a><!-- end nav-link -->
                                                                </li><!-- end nav-item -->
                                                                <li class="nav-item" role="presentation">
                                                                    <a href="#basictab3" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
                                                                        <iconify-icon icon="iconamoon:link-fill" class="fs-26"></iconify-icon>
                                                                        Social Links
                                                                    </a><!-- end nav-link -->
                                                                </li><!-- end nav-item -->
                                                                <li class="nav-item" role="presentation">
                                                                    <a href="#basictab4" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
                                                                        <iconify-icon icon="iconamoon:check-circle-1-duotone" class="fs-26"></iconify-icon>
                                                                        Finish
                                                                    </a><!-- end nav-link -->
                                                                </li><!-- end nav-item -->
                                                            </ul>
                
                                                            <div class="tab-content mb-0">
                                                                <div class="tab-pane active show" id="basictab1" role="tabpanel">
                                                                    <h4 class="fs-16 fw-semibold mb-1">Account Information</h4>
                                                                    <p class="text-muted">Setup your account information</p>
                
                                                                    <div class="row">
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicUser" class="form-label">User Name</label>
                                                                                <input id="basicUser" type="text" class="form-control" placeholder="Enter User Name">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicEmail" class="form-label">Email</label>
                                                                                <input id="basicEmail" type="email" class="form-control" placeholder="Enter your email">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicPassworda" class="form-label">Password</label>
                                                                                <input id="basicPassworda" type="text" class="form-control" placeholder="Enter Password">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicConfirmPassword" class="form-label">Confirm Password</label>
                                                                                <input id="basicConfirmPassword" type="text" class="form-control" placeholder="Confirm a Password">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                    </div> <!-- end row -->
                                                                </div><!-- end tab-pane -->
                
                                                                <div class="tab-pane" id="basictab2" role="tabpanel">
                                                                    <h4 class="fs-16 fw-semibold mb-1">Profile Information</h4>
                                                                    <p class="text-muted">Setup your profile information</p>
                
                                                                    <div class="row">
                                                                        <div class="col-12">
                                                                            <div class="avatar-lg mb-3">
                                                                                <div class="avatar-title bg-body rounded-circle border border-3 border-dashed-light position-relative">
                                                                                    <label for="imageInput" class="position-absolute end-0 bottom-0">
                                                                                        <div class="avatar-xs cursor-pointer">
                                                                                            <span class="avatar-title bg-light text-dark rounded-circle"><i class="bx bx-camera"></i></span>
                                                                                        </div>
                                                                                    </label>
                                                                                    <input class="hidden" type="file" id="imageInput" accept="image/*" onchange="previewImage(event)">
                
                                                                                    <img id="preview" src="assets/images/users/dummy-avatar.jpg" alt="Preview Image" class="rounded-circle img-fluid">
                                                                                </div>
                                                                            </div>
                
                                                                            <div class="row">
                                                                                <div class="col-md-6">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label" for="basicFname">First Name</label>
                                                                                        <input type="text" id="basicFname" class="form-control" placeholder="Chris">
                                                                                    </div>
                                                                                </div><!-- end col -->
                                                                                <div class="col-md-6">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label" for="basicLname">Last Name</label>
                                                                                        <input type="text" id="basicLname" class="form-control" placeholder="Keller">
                                                                                    </div>
                                                                                </div><!-- end col -->
                                                                                <div class="col-md-6">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label" for="basicMnumber">Number</label>
                                                                                        <input type="number" id="basicMnumber" class="form-control" placeholder="Mobile Number">
                                                                                    </div>
                                                                                </div><!-- end col -->
                                                                                <div class="col-md-6">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label" for="basicCountry">Country</label>
                                                                                        <select id="basicCountry" class="form-select">
                                                                                            <option value="United States">United States</option>
                                                                                            <option value="Canada">Canada</option>
                                                                                            <option value="Australia">Australia</option>
                                                                                            <option value="Germany">Germany</option>
                                                                                            <option value="Bangladesh">Bangladesh</option>
                                                                                            <option value="China">China</option>
                                                                                            <option value="Argentina">Argentina</option>
                                                                                            <option value="Bharat">Bharat</option>
                                                                                            <option value="Afghanistan">Afghanistan</option>
                                                                                            <option value="France">France</option>
                                                                                            <option value="Brazil">Brazil</option>
                                                                                            <option value="Belgium">Belgium</option>
                                                                                            <option value="Colombia">Colombia</option>
                                                                                            <option value="Albania">Albania</option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div><!-- end col -->
                                                                            </div><!-- end row -->
                                                                        </div> <!-- end col -->
                                                                    </div> <!-- end row -->
                                                                </div><!-- end tab-pane -->
                
                                                                <div class="tab-pane" id="basictab3" role="tabpanel">
                                                                    <h4 class="fs-16 fw-semibold mb-1">Social Media Links</h4>
                                                                    <p class="text-muted">Fill your social media links</p>
                
                                                                    <div class="row">
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicGitLink" class="form-label">GitHub</label>
                                                                                <input id="basicGitLink" type="text" class="form-control" placeholder="GitHub Link">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicGoogleLink" class="form-label">Google</label>
                                                                                <input id="basicGoogleLink" type="text" class="form-control" placeholder="Google Link">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicInstagramLink" class="form-label">Instagram</label>
                                                                                <input id="basicInstagramLink" type="text" class="form-control" placeholder="Instagram Link">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                        <div class="col-lg-6">
                                                                            <div class="mb-3">
                                                                                <label for="basicSkypeLink" class="form-label">Skype</label>
                                                                                <input id="basicSkypeLink" type="text" class="form-control" placeholder="Skype Link">
                                                                            </div>
                                                                        </div> <!-- end col -->
                                                                    </div><!-- end row -->
                                                                </div><!-- end tab-pane -->
                
                                                                <div class="tab-pane" id="basictab4" role="tabpanel">
                                                                    <div class="row">
                                                                        <div class="col-12">
                                                                            <div class="text-center">
                                                                                <div class="avatar-md mx-auto mb-3">
                                                                                    <div class="avatar-title bg-primary bg-opacity-10 text-primary rounded-circle"><iconify-icon icon="iconamoon:like-duotone" class="fs-36"></iconify-icon></div>
                                                                                </div>
                                                                                <h3 class="mt-0">Finished !</h3>
                
                                                                                <p class="w-75 mb-2 mx-auto">Filled Data Successfully.</p>
                
                                                                                <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 tab-pane -->
                
                                                                <div class="d-flex flex-wrap align-items-center wizard justify-content-between gap-3 mt-3">
                                                                    <div class="first">
                                                                        <a href="javascript:void(0);" class="btn btn-soft-primary">
                                                                            First
                                                                        </a>
                                                                    </div>
                                                                    <div class="d-flex gap-2">
                                                                        <div class="previous">
                                                                            <a href="javascript:void(0);" class="btn btn-primary disabled">
                                                                                <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 btn-primary">
                                                                                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-soft-primary">
                                                                            Finish
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div> <!-- tab-content -->
                                                        </div> <!-- end #horizontal wizard-->
                                                    </form>
                                                    
                                                
                                                    
                                                        new Wizard('#horizontalwizard');
                                                    
                                                
Vertical Wizard#

Account Information

Setup your account information

Profile Information

Setup your profile information

Preview Image

Social Media Links

Fill your social media links

Finished !

Filled Data Successfully.

                                                    
                                                        <form id="verticalwizard">
                                                        <div class="row">
                                                            <div class="col-lg-3">
                                                                <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1" role="tablist">
                                                                    <li class="nav-item" role="presentation">
                                                                        <a href="#basictabHorizontal1" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2 active" aria-selected="true" role="tab">
                                                                            <iconify-icon icon="iconamoon:profile-circle-duotone" class="fs-26"></iconify-icon>
                                                                            Account
                                                                        </a><!-- end nav-link -->
                                                                    </li><!-- end nav-item -->
                                                                    <li class="nav-item" role="presentation">
                                                                        <a href="#basictabHorizontal2" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab" tabindex="-1">
                                                                            <iconify-icon icon="iconamoon:profile-duotone" class="fs-26"></iconify-icon>
                                                                            Profile
                                                                        </a><!-- end nav-link -->
                                                                    </li><!-- end nav-item -->
                                                                    <li class="nav-item" role="presentation">
                                                                        <a href="#basictabHorizontal3" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
                                                                            <iconify-icon icon="iconamoon:link-fill" class="fs-26"></iconify-icon>
                                                                            Social Links
                                                                        </a><!-- end nav-link -->
                                                                    </li><!-- end nav-item -->
                                                                    <li class="nav-item" role="presentation">
                                                                        <a href="#basictabHorizontal4" data-bs-toggle="tab" data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
                                                                            <iconify-icon icon="iconamoon:check-circle-1-duotone" class="fs-26"></iconify-icon>
                                                                            Finish
                                                                        </a><!-- end nav-link -->
                                                                    </li><!-- end nav-item -->
                                                                </ul>
                                                            </div>
                
                                                            <div class="col-lg-9">
                                                                <div class="tab-content mb-0">
                                                                    <div class="tab-pane active show" id="basictabHorizontal1" role="tabpanel">
                                                                        <h4 class="fs-16 fw-semibold mb-1">Account Information</h4>
                                                                        <p class="text-muted">Setup your account information</p>
                
                                                                        <div class="row">
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicUser2" class="form-label">User Name</label>
                                                                                    <input id="basicUser2" type="text" class="form-control" placeholder="Enter User Name">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicEmail2" class="form-label">Email</label>
                                                                                    <input id="basicEmail2" type="email" class="form-control" placeholder="Enter your email">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicPassworda2" class="form-label">Password</label>
                                                                                    <input id="basicPassworda2" type="text" class="form-control" placeholder="Enter Password">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicConfirmPassword2" class="form-label">Confirm Password</label>
                                                                                    <input id="basicConfirmPassword2" type="text" class="form-control" placeholder="Confirm a Password">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                        </div> <!-- end row -->
                                                                    </div><!-- end tab-pane -->
                
                                                                    <div class="tab-pane" id="basictabHorizontal2" role="tabpanel">
                                                                        <h4 class="fs-16 fw-semibold mb-1">Profile Information</h4>
                                                                        <p class="text-muted">Setup your profile information</p>
                
                                                                        <div class="row">
                                                                            <div class="col-12">
                                                                                <div class="avatar-lg mb-3">
                                                                                    <div class="avatar-title bg-body rounded-circle border border-3 border-dashed-light position-relative">
                                                                                        <label for="imageInput" class="position-absolute end-0 bottom-0">
                                                                                            <div class="avatar-xs cursor-pointer">
                                                                                                <span class="avatar-title bg-light text-dark rounded-circle"><i class="bx bx-camera"></i></span>
                                                                                            </div>
                                                                                        </label>
                                                                                        <input class="hidden" type="file" id="imageInput" accept="image/*" onchange="previewImage(event)">
                
                                                                                        <img id="preview" src="assets/images/users/dummy-avatar.jpg" alt="Preview Image" class="rounded-circle img-fluid">
                                                                                    </div>
                                                                                </div>
                
                                                                                <div class="row">
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label class="form-label" for="basicFname2">First Name</label>
                                                                                            <input type="text" id="basicFname2" class="form-control" placeholder="Chris">
                                                                                        </div>
                                                                                    </div><!-- end col -->
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label class="form-label" for="basicLname2">Last Name</label>
                                                                                            <input type="text" id="basicLname2" class="form-control" placeholder="Keller">
                                                                                        </div>
                                                                                    </div><!-- end col -->
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label class="form-label" for="basicMnumber2">Number</label>
                                                                                            <input type="number" id="basicMnumber2" class="form-control" placeholder="Mobile Number">
                                                                                        </div>
                                                                                    </div><!-- end col -->
                                                                                    <div class="col-md-6">
                                                                                        <div class="mb-3">
                                                                                            <label class="form-label" for="basicCountry2">Country</label>
                                                                                            <select id="basicCountry2" class="form-select">
                                                                                                <option value="United States">United States</option>
                                                                                                <option value="Canada">Canada</option>
                                                                                                <option value="Australia">Australia</option>
                                                                                                <option value="Germany">Germany</option>
                                                                                                <option value="Bangladesh">Bangladesh</option>
                                                                                                <option value="China">China</option>
                                                                                                <option value="Argentina">Argentina</option>
                                                                                                <option value="Bharat">Bharat</option>
                                                                                                <option value="Afghanistan">Afghanistan</option>
                                                                                                <option value="France">France</option>
                                                                                                <option value="Brazil">Brazil</option>
                                                                                                <option value="Belgium">Belgium</option>
                                                                                                <option value="Colombia">Colombia</option>
                                                                                                <option value="Albania">Albania</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div><!-- end col -->
                                                                                </div><!-- end row -->
                                                                            </div> <!-- end col -->
                                                                        </div> <!-- end row -->
                                                                    </div><!-- end tab-pane -->
                
                                                                    <div class="tab-pane" id="basictabHorizontal3" role="tabpanel">
                                                                        <h4 class="fs-16 fw-semibold mb-1">Social Media Links</h4>
                                                                        <p class="text-muted">Fill your social media links</p>
                
                                                                        <div class="row">
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicGitLink2" class="form-label">GitHub</label>
                                                                                    <input id="basicGitLink2" type="text" class="form-control" placeholder="GitHub Link">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicGoogleLink2" class="form-label">Google</label>
                                                                                    <input id="basicGoogleLink2" type="text" class="form-control" placeholder="Google Link">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicInstagramLink3" class="form-label">Instagram</label>
                                                                                    <input id="basicInstagramLink3" type="text" class="form-control" placeholder="Instagram Link">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                            <div class="col-lg-6">
                                                                                <div class="mb-3">
                                                                                    <label for="basicSkypeLink4" class="form-label">Skype</label>
                                                                                    <input id="basicSkypeLink4" type="text" class="form-control" placeholder="Skype Link">
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                        </div><!-- end row -->
                                                                    </div><!-- end tab-pane -->
                
                                                                    <div class="tab-pane" id="basictabHorizontal4" role="tabpanel">
                                                                        <div class="row">
                                                                            <div class="col-12">
                                                                                <div class="text-center">
                                                                                    <div class="avatar-md mx-auto mb-3">
                                                                                        <div class="avatar-title bg-primary bg-opacity-10 text-primary rounded-circle"><iconify-icon icon="iconamoon:like-duotone" class="fs-36"></iconify-icon></div>
                                                                                    </div>
                                                                                    <h3 class="mt-0">Finished !</h3>
                
                                                                                    <p class="w-75 mb-2 mx-auto">Filled Data Successfully.</p>
                
                                                                                    <div class="mb-3">
                                                                                        <div class="form-check d-inline-block">
                                                                                            <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                                            <label class="form-check-label" for="customCheck2">I agree with the Terms and Conditions</label>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div> <!-- end col -->
                                                                        </div> <!-- end row -->
                                                                    </div><!-- end tab-pane -->
                
                                                                    <div class="d-flex flex-wrap align-items-center wizard justify-content-between gap-3 mt-3">
                                                                        <div class="first">
                                                                            <a href="javascript:void(0);" class="btn btn-soft-primary">
                                                                                First
                                                                            </a>
                                                                        </div>
                                                                        <div class="d-flex gap-2">
                                                                            <div class="previous">
                                                                                <a href="javascript:void(0);" class="btn btn-primary disabled">
                                                                                    <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 btn-primary">
                                                                                    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-soft-primary">
                                                                                Finish
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div> <!-- tab-content -->
                                                            </div>
                                                        </div> <!-- end #verticalwizard-->
                                                    </form>
                                                    
                                                
                                                    
                                                        new Wizard('#verticalwizard');
                                                    
                                                
© Rasket. Crafted by Techzaa