-
-
-
-
- مدیر
جان اسمیت
جادوگر
- خانه
- جادوگر
فرم جادوگر
اطلاعات کلی
تمام اطلاعات را به صورت زیر پر کنید
اطلاعات شخصی
تمام اطلاعات را به صورت زیر پر کنید
اطلاعات اجتماعی
تمام اطلاعات را به صورت زیر پر کنید
هر یادداشتی
تمام اطلاعات را به صورت زیر پر کنید
<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs" id="myTabstep" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0 active" id="step1-tab" data-bs-toggle="tab" data-bs-target="#step1-tab-pane" type="button" role="tab" aria-controls="step1-tab-pane" aria-selected="true">
<span class="fs-20 fw-bold text-primary">1</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step2-tab" data-bs-toggle="tab" data-bs-target="#step2-tab-pane" type="button" role="tab" aria-controls="step2-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">2</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step3-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane" type="button" role="tab" aria-controls="step3-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">3</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step4-tab" data-bs-toggle="tab" data-bs-target="#step4-tab-pane" type="button" role="tab" aria-controls="step4-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary">3</span>
</button>
</li>
</ul>
<div class="tab-content" id="myTabstepContent">
<div class="tab-pane fade show active" id="step1-tab-pane" role="tabpanel" aria-labelledby="step1-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">اطلاعات کلی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">نام</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">نام خانوادگی</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">ایمیل</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-58" placeholder="Enter Email Address">
<i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">تلفن</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="Enter Phone Number">
<i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">موقعیت</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="Your Location">
<i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">بعدی</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step2-tab-pane" role="tabpanel" aria-labelledby="step2-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">اطلاعات شخصی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">کشور</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">انگلستان</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">استان</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">ایالت جنوبی</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">شهر</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">کالیفرنیا</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">کد پستی</label>
<div class="form-group position-relative">
<input type="number" class="form-control ps-5 text-gray-light h-58" placeholder="Enter number">
<i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">یادداشت سفارش :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">بعدی</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step3-tab-pane" role="tabpanel" aria-labelledby="step3-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">اطلاعات اجتماعی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">فیس بوک</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">توییتر</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">لینکدین</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">یوتیوب</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">بعدی</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step4-tab-pane" role="tabpanel" aria-labelledby="step4-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">هر یادداشتی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">یادداشت های سفارش :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="چند متن دمو ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">ارسال</button>
</div>
</div>
</div>
</form>
</div>
</div>
اطلاعات شخصی
تمام اطلاعات را به صورت زیر پر کنید
اطلاعات اجتماعی
تمام اطلاعات را به صورت زیر پر کنید
<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs2" id="myTabstep2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center active" id="step5-tab" data-bs-toggle="tab" data-bs-target="#step5-tab-pane" type="button" role="tab" aria-controls="step5-tab-pane" aria-selected="true">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">1</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">اطلاعات کلی</h4>
<p class="text-gray-light mb-0">اطلاعات راه اندازی</p>
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center" id="step6-tab" data-bs-toggle="tab" data-bs-target="#step6-tab-pane" type="button" role="tab" aria-controls="step6-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">2</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">اطلاعات شخصی</h4>
<p class="text-gray-light mb-0">اطلاعات راه اندازی</p>
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link p-0 d-flex align-items-center" id="step7-tab" data-bs-toggle="tab" data-bs-target="#step7-tab-pane" type="button" role="tab" aria-controls="step7-tab-pane" aria-selected="false">
<span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">3</span>
<div class="text-start ms-3">
<h4 class="fs-18 fw-semibold">پیوندهای اجتماعی</h4>
<p class="text-gray-light mb-0">پیوندهای اجتماعی را اضافه کنید</p>
</div>
</button>
</li>
</ul>
<div class="tab-content" id="myTabstep2Content">
<div class="tab-pane fade show active" id="step5-tab-pane" role="tabpanel" aria-labelledby="step5-tab" tabindex="0">
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">نام</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">نام خانوادگی</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="Enter Name">
<i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">ایمیل</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-58" placeholder="Enter Email Address">
<i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">تلفن</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="Enter Phone Number">
<i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">موقعیت</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="Your Location">
<i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">بعدی</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step6-tab-pane" role="tabpanel" aria-labelledby="step6-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">اطلاعات شخصی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">کشور</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">انگلستان</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">استان</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">ایالت جنوبی</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">شهر</label>
<div class="form-group position-relative">
<select class="form-select form-control ps-5 h-58" aria-label="Default select example">
<option selected class="text-dark">کالیفرنیا</option>
<option value="1" class="text-dark">آمریکا</option>
<option value="2" class="text-dark">کانادا</option>
<option value="3" class="text-dark">فرانسه</option>
</select>
<i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">کد پستی</label>
<div class="form-group position-relative">
<input type="number" class="form-control ps-5 text-gray-light h-58" placeholder="Enter number">
<i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-4">
<label class="label">یادداشت سفارش :</label>
<div class="form-group position-relative">
<textarea class="form-control ps-5 text-dark" placeholder="چند متن دمو ... " cols="30" rows="5"></textarea>
<i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button class="btn btn-primary py-3 px-5 fw-semibold text-white">بعدی</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="step7-tab-pane" role="tabpanel" aria-labelledby="step7-tab" tabindex="0">
<h4 class="fs-18 fw-semibold">اطلاعات اجتماعی</h4>
<p class="text-gray-light mb-4">تمام اطلاعات را به صورت زیر پر کنید</p>
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">فیس بوک</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">توییتر</label>
<div class="form-group position-relative">
<input type="text" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">لینکدین</label>
<div class="form-group position-relative">
<input type="email" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-4">
<label class="label">یوتیوب</label>
<div class="form-group position-relative">
<input type="number" class="form-control text-dark ps-5 h-58" placeholder="URL">
<i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group d-flex gap-3">
<button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">قبلی</button>
<button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">ارسال</button>
</div>
</div>
</div>
</form>
</div>
</div>