Your IP : 3.133.155.48
<div class="popup popup--form">
<div class="popup__body container px-lg-0">
<div class="popup__header d-lg-none">
<div class="container d-flex align-items-center justify-content-between"><img class="popup__logo" src="<?=SITE_TEMPLATE_PATH?>/assets/img/logo.svg"/>
<button class="btn btn-close" type="button" data-fancybox-close="data-fancybox-close"></button>
</div>
</div>
<div class="popup__content">
<form class="order" action="" method="get" autocomplete="off">
<ul class="nav d-none">
<li class="nav-item"><a class="nav-link active" href="#step1" data-toggle="tab" id="step1-nav"> </a></li>
<li class="nav-item"><a class="nav-link" href="#step2" data-toggle="tab" id="step2-nav"></a></li>
<li class="nav-item"><a class="nav-link" href="#step3" data-toggle="tab" id="step3-nav"></a></li>
<li class="nav-item"><a class="nav-link" href="#step4" data-toggle="tab" id="step4-nav"></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="step1">
<div class="row">
<div class="col-md-4">
<div class="order__title fw-500">Вы выбрали: </div>
</div>
<div class="col-md-8">
<div class="order__title">Хип-Хоп</div>
<div class="order__title2">Преподаватель: Анастасия Каменских</div>
<div class="p-xs text-gray mb-5">Адрес: Комендантовская ул., 30 </div>
<div class="form-group select2-custom mb-30 mb-md-80">
<select class="js-select-default" data-placeholder="Дата и время урока">
<option></option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
<option>Дата и время урока</option>
</select>
</div>
<button class="btn btn-primary btn-primary--shadow" type="button" onclick="$('#step2-nav').tab('show')">Далее</button>
</div>
</div>
</div>
<div class="tab-pane" id="step2">
<button class="p-xs mb-20" type="button" onclick="$('#step1-nav').tab('show')">← Назад</button>
<div class="row align-items-center mb-12">
<div class="col-md-4">
<div class="order__label">Фамилия</div>
</div>
<div class="col-md-8">
<input class="form-control" name="lastname" required="required"/>
</div>
</div>
<div class="row align-items-center mb-12">
<div class="col-md-4">
<div class="order__label">Имя</div>
</div>
<div class="col-md-8">
<input class="form-control" name="name" required="required"/>
</div>
</div>
<div class="row align-items-center mb-12">
<div class="col-md-4">
<div class="order__label">Телефон:</div>
</div>
<div class="col-md-8">
<input class="form-control" name="tel" type="tel" placeholder="+7(800)5555-628" data-inputmask="'mask': '+7(999)999-99-99','clearIncomplete':'true'" required="required"/>
</div>
</div>
<div class="row align-items-center mb-30 mb-md-80">
<div class="col-md-4">
<div class="order__label">E-mail</div>
</div>
<div class="col-md-8">
<input class="form-control" name="email" type="email"/>
</div>
</div>
<div class="row text-center text-md-left">
<div class="col-md-8 ml-auto">
<button class="btn btn-primary btn-primary--shadow" type="button" onclick="$('#step3-nav').tab('show')">Далее</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="step3">
<button class="p-xs mb-20" type="button" onclick="$('#step2-nav').tab('show')">← Назад</button>
<div class="row">
<div class="col-md-4">
<div class="order__title fw-500">Вы выбрали: </div>
</div>
<div class="col-md-8">
<div class="order__title">Хип-Хоп</div>
<div class="order__title2">Преподаватель: Анастасия Каменских</div>
<div class="p-xs text-gray mb-5">Адрес: Комендантовская ул., 30 </div>
<div class="order__title2 mb-15">Время и дата: Пн, 2 декабря, 10:00 - 11:00</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 mt-auto pb-30 pb-sm-0">
<div class="p-xs mb-20">Вы можете оплатить урок непосредсвтенно в зале</div>
<div class="order__price">300 руб </div>
<button class="btn btn-outline btn-outline--primary w-100" type="submit" onclick="demoSend(event)">Записаться</button>
</div>
<div class="col-sm-6 pb-30 pb-sm-0">
<div class="d-flex align-items-center mb-20"><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/discount1.svg" alt=""/>
<div class="pl-20">
<div class="order__title2 fw-600 text-secondary mb-5">Хотите скидку?</div>
<div class="p-xs">Оплатите сейчас!</div>
</div>
</div>
<div class="order__price"><span>200 руб</span> <s>300 руб</s> </div><a class="btn btn-primary btn-primary--shadow w-100" href="#">Оплатить</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="step4">
<div class="text-center">
<div class="display-2 mb-10">Спасибо! </div>
<div class="order__title mb-20">Вы записаны к преподователю:</div>
</div>
<div class="order__thx mb-20">
<div class="row">
<div class="col-md-4 text-center"><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/teacher120.png" alt=""/>
<div class="rate d-block"><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/star_24.svg" alt=""/><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/star_24.svg" alt=""/><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/star_24.svg" alt=""/><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/star_24.svg" alt=""/><img src="<?=SITE_TEMPLATE_PATH?>/assets/img/star_24.svg" alt=""/></div>
</div>
<div class="col-md-8 text-center text-md-left">
<div class="order__title mb-10">Анастасия Каменских</div>
<div class="p-xs text-gray mb-5">Адрес: Комендантовская ул., 30 </div>
<div class="order__title2 mb-15">Время и дата: Пн, 2 декабря, 10:00 - 11:00</div>
</div>
</div>
</div>
<div class="text-center order__title">Мы свяжемся с Вами в ближайшее время чтобы подтвердить запись.</div>
</div>
</div>
<script>
initMask();
initSelect2();
function demoSend(e){
e.preventDefault();
$('#step4-nav').tab('show');
}
</script>
</form>
</div>
</div>
</div>