ویزارد افقی#
<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>
حساب
</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>
پروفایل
</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>
لینکهای اجتماعی
</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>
اتمام
</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">اطلاعات حساب</h4>
<p class="text-muted">اطلاعات حساب خود را تنظیم کنید</p>
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label for="basicUser" class="form-label">نام کاربری</label>
<input id="basicUser" type="text" class="form-control" placeholder="نام کاربری را وارد کنید">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicEmail" class="form-label">ایمیل</label>
<input id="basicEmail" type="email" class="form-control" placeholder="ایمیل خود را وارد کنید">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicPassworda" class="form-label">گذرواژه</label>
<input id="basicPassworda" type="text" class="form-control" placeholder="گذرواژه را وارد کنید">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicConfirmPassword" class="form-label">تأیید گذرواژه</label>
<input id="basicConfirmPassword" type="text" class="form-control" placeholder="گذرواژه را تأیید کنید">
</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">اطلاعات پروفایل</h4>
<p class="text-muted">اطلاعات پروفایل خود را تنظیم کنید</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="/images/users/dummy-avatar.jpg" alt="تصویر پیشنمایش" 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">نام</label>
<input type="text" id="basicFname" class="form-control" placeholder="کریس">
</div>
</div><!-- end col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicLname">نام خانوادگی</label>
<input type="text" id="basicLname" class="form-control" placeholder="کلر">
</div>
</div><!-- end col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicMnumber">شماره</label>
<input type="number" id="basicMnumber" class="form-control" placeholder="شماره موبایل">
</div>
</div><!-- end col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicCountry">کشور</label>
<select id="basicCountry" class="form-select">
<option value="United States">ایالات متحده</option>
<option value="Canada">کانادا</option>
<option value="Australia">استرالیا</option>
<option value="Germany">آلمان</option>
<option value="Bangladesh">بنگلادش</option>
<option value="China">چین</option>
<option value="Argentina">آرژانتین</option>
<option value="Bharat">هند</option>
<option value="Afghanistan">افغانستان</option>
<option value="France">فرانسه</option>
<option value="Brazil">برزیل</option>
<option value="Belgium">بلژیک</option>
<option value="Colombia">کلمبیا</option>
<option value="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">لینکهای رسانههای اجتماعی</h4>
<p class="text-muted">لینکهای رسانههای اجتماعی خود را پر کنید</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">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicGoogleLink" class="form-label">گوگل</label>
<input id="basicGoogleLink" type="text" class="form-control" placeholder="لینک گوگل">
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicInstagramLink" class="form-label">اینستاگرام</label>
<input id="basicInstagramLink" type="text" class="form-control" placeholder="لینک اینستاگرام">
</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">
</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">تمام شد!</h3>
<p class="w-75 mb-2 mx-auto">اطلاعات با موفقیت پر شد.</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">با شرایط و ضوابط موافقم</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">
اول
</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>بازگشت به قبلی
</a>
</div>
<div class="next">
<a href="javascript:void(0);" class="btn btn-primary">
مرحله بعد<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">
اتمام
</a>
</div>
</div>
</div> <!-- tab-content -->
</div> <!-- end #horizontal wizard-->
</form>
new Wizard('#horizontalwizard');
جادوی عمودی#
<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>
حساب کاربری
</a><!-- پایان nav-link -->
</li><!-- پایان 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>
پروفایل
</a><!-- پایان nav-link -->
</li><!-- پایان 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>
لینکهای اجتماعی
</a><!-- پایان nav-link -->
</li><!-- پایان 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>
پایان
</a><!-- پایان nav-link -->
</li><!-- پایان 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">اطلاعات حساب</h4>
<p class="text-muted">اطلاعات حساب خود را تنظیم کنید</p>
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label for="basicUser2" class="form-label">نام کاربری</label>
<input id="basicUser2" type="text" class="form-control" placeholder="نام کاربری را وارد کنید">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicEmail2" class="form-label">ایمیل</label>
<input id="basicEmail2" type="email" class="form-control" placeholder="ایمیل خود را وارد کنید">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicPassworda2" class="form-label">رمز عبور</label>
<input id="basicPassworda2" type="text" class="form-control" placeholder="رمز عبور را وارد کنید">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicConfirmPassword2" class="form-label">تأیید رمز عبور</label>
<input id="basicConfirmPassword2" type="text" class="form-control" placeholder="رمز عبور را تأیید کنید">
</div>
</div> <!-- پایان col -->
</div> <!-- پایان row -->
</div><!-- پایان tab-pane -->
<div class="tab-pane" id="basictabHorizontal2" role="tabpanel">
<h4 class="fs-16 fw-semibold mb-1">اطلاعات پروفایل</h4>
<p class="text-muted">اطلاعات پروفایل خود را تنظیم کنید</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="/images/users/dummy-avatar.jpg" alt="پیشنمایش تصویر" 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">نام</label>
<input type="text" id="basicFname2" class="form-control" placeholder="کریس">
</div>
</div><!-- پایان col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicLname2">نام خانوادگی</label>
<input type="text" id="basicLname2" class="form-control" placeholder="کلر">
</div>
</div><!-- پایان col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicMnumber2">شماره</label>
<input type="number" id="basicMnumber2" class="form-control" placeholder="شماره موبایل">
</div>
</div><!-- پایان col -->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="basicCountry2">کشور</label>
<select id="basicCountry2" class="form-select">
<option value="ایالات متحده">ایالات متحده</option>
<option value="کانادا">کانادا</option>
<option value="استرالیا">استرالیا</option>
<option value="آلمان">آلمان</option>
<option value="بنگلادش">بنگلادش</option>
<option value="چین">چین</option>
<option value="آرژانتین">آرژانتین</option>
<option value="هند">هند</option>
<option value="افغانستان">افغانستان</option>
<option value="فرانسه">فرانسه</option>
<option value="برزیل">برزیل</option>
<option value="بلژیک">بلژیک</option>
<option value="کلمبیا">کلمبیا</option>
<option value="آلبانی">آلبانی</option>
</select>
</div>
</div><!-- پایان col -->
</div><!-- پایان row -->
</div> <!-- پایان col -->
</div> <!-- پایان row -->
</div><!-- پایان tab-pane -->
<div class="tab-pane" id="basictabHorizontal3" role="tabpanel">
<h4 class="fs-16 fw-semibold mb-1">لینکهای شبکههای اجتماعی</h4>
<p class="text-muted">لینکهای شبکههای اجتماعی خود را پر کنید</p>
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label for="basicGitLink2" class="form-label">گیتهاب</label>
<input id="basicGitLink2" type="text" class="form-control" placeholder="لینک گیتهاب">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicGoogleLink2" class="form-label">گوگل</label>
<input id="basicGoogleLink2" type="text" class="form-control" placeholder="لینک گوگل">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicInstagramLink3" class="form-label">اینستاگرام</label>
<input id="basicInstagramLink3" type="text" class="form-control" placeholder="لینک اینستاگرام">
</div>
</div> <!-- پایان col -->
<div class="col-lg-6">
<div class="mb-3">
<label for="basicSkypeLink4" class="form-label">اسکایپ</label>
<input id="basicSkypeLink4" type="text" class="form-control" placeholder="لینک اسکایپ">
</div>
</div> <!-- پایان col -->
</div><!-- پایان row -->
</div><!-- پایان 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">پایان!</h3>
<p class="w-75 mb-2 mx-auto">دادهها با موفقیت پر شدند.</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">من با شرایط و ضوابط موافقم</label>
</div>
</div>
</div>
</div> <!-- پایان col -->
</div> <!-- پایان row -->
</div><!-- پایان 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">
ابتدا
</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>بازگشت به مرحله قبل
</a>
</div>
<div class="next">
<a href="javascript:void(0);" class="btn btn-primary">
مرحله بعد<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">
پایان
</a>
</div>
</div>
</div> <!-- tab-content -->
</div>
</div> <!-- پایان #verticalwizard-->
new Wizard('#verticalwizard');