<script>
//Скрываем лишние шаги
$(".t702 .t-input-group:eq(1)").css("display" , "none");
$(".t702 .t-input-group:eq(2)").css("display" , "none");
$(".t702 .t-input-group:eq(3)").css("display" , "none");
$(".t702 .t-input-group:eq(4)").css("display" , "none");
$(".t702 .t-input-group:eq(5)").css("display" , "none");
$(".t702 .t-input-group:eq(6)").css("display" , "none");
$(".t702 .t-input-group:eq(7)").css("display" , "none");
$(".t702 .t-input-group:eq(8)").css("display" , "none");
$(".t702 .t-input-group:eq(9)").css("display" , "none");
//Скрываем кнопку отправить
$(".t702 .t-submit").css("display" , "none");
//Клонируем кнопку дальше
$("#rec46779961").appendTo(".t702 .t-form__submit");
//Скрыть надпись ПОЛИТИКА КОНФ
$(".t702__form-bottom-text").css("display" , "none");
//Добавляем прогресс бар
$('.t702__text-wrapper').append('<div class="progressbar"><div class="prline"></div><span class="complete">Пройдено 11%</span></div>');
//Добавляем фото шагов
//Первый
$(".t-input-title:eq(0)").prepend("<div class='nomershaga'><img src='https://goo.gl/yPN5HV' class='stepnum'></div>");
//Второй
$(".t-input-title:eq(1)").prepend("<div class='nomershaga'><img src='https://goo.gl/WBWZTv' class='stepnum'></div>");
//Треттий
$(".t-input-title:eq(2)").prepend("<div class='nomershaga'><img src='https://goo.gl/5psNJP' class='stepnum'></div>");
//Четвёртый
$(".t-input-title:eq(3)").prepend("<div class='nomershaga'><img src='https://goo.gl/TkTnF8' class='stepnum'></div>");
//Пятый
$(".t-input-title:eq(4)").prepend("<div class='nomershaga'><img src='https://goo.gl/djbhXn' class='stepnum'></div>");
//Шестой
$(".t-input-title:eq(5)").prepend("<div class='nomershaga'><img src='https://goo.gl/BXRuyf' class='stepnum'></div>");
//Седьмой
$(".t-input-title:eq(6)").prepend("<div class='nomershaga'><img src='https://goo.gl/sqR8sv' class='stepnum'></div>");
//Восьмой
$(".t-input-title:eq(7)").prepend("<div class='nomershaga'><img src='https://goo.gl/oGZmgh' class='stepnum'></div>");
//Девятый
$(".t-input-title:eq(8)").prepend("<div class='nomershaga'><img src='https://goo.gl/aLkWmu' class='stepnum'></div>");
//Добавляем фото подарка
$('.t702__wrapper').append('<div class="xfoto"><img class="zavse" src="https://clck.ru/CvEpU"></div>');
$(".xfoto").css("display" , "none");
//Блокируем кнопку при старте
$(".t142__submit").addClass("buttton-blk");
//Функция блокировки кнопки
function blockbutt(){
$(".t142__submit").addClass("buttton-blk");
$(".flash").removeClass("lighting");
};
//Объявляем переменную переменную номера шага
var numstep=1;
// Функция второго шага
function step2(){
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(0)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(1)").css("display" , "block");
//Изменить надпись на 22%
$(".complete").text("Выполнено 22%");
//Изменить ширину progress bar до 22%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "22%",
});
numstep++;
};
// Функция третьего шага
function step3(){
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(1)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(2)").css("display" , "block");
//Показать общее фото
$(".xfoto").css("display" , "block");
//Изменить надпись на 33%
$(".complete").text("Выполнено 33%");
//Изменить ширину progress bar до 33%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "33%",
});
numstep++;
};
// Функция четвертого шага
function step4(){
//Убрать общее фото
$(".xfoto").css("display" , "none");
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(2)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(3)").css("display" , "block");
//Изменить надпись на 44%
$(".complete").text("Выполнено 44%");
//Изменить ширину progress bar до 44%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "44%",
});
numstep++;
};
// Функция пятого шага
function step5(){
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(3)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(4)").css("display" , "block");
//Изменить надпись на 55%
$(".complete").text("Выполнено 55%");
//Изменить ширину progress bar до 55%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "55%",
});
numstep++;
};
// Функция шестого шага
function step6(){
//Изменить общее фото
$(".xfoto").css("display" , "block");
$(".xfoto img").attr("src" , "https://clck.ru/CvEwj");
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(4)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(5)").css("display" , "block");
//Изменить надпись на 66%
$(".complete").text("Выполнено 66%");
//Изменить ширину progress bar до 66%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "66%",
});
numstep++;
};
// Функция седьмого шага
function step7(){
//Убрать общее фото
$(".xfoto").css("display" , "none");
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(5)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(6)").css("display" , "block");
//Изменить надпись на 77%
$(".complete").text("Выполнено 77%");
//Изменить ширину progress bar до 77%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "77%",
});
numstep++;
};
// Функция восьмого шага
function step8(){
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".t702 .t-input-group:eq(6)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(7)").css("display" , "block");
//Изменить надпись на 88%
$(".complete").text("Выполнено 88%");
//Изменить ширину progress bar до 88%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "88%",
});
numstep++;
};
// Функция девятого шага
function step9(){
//Скрываем кнопку дальше
$(".t702 .t-btn").css("display" , "none");
//Скрываем кнопку отправить
$(".t702 .t-submit").css("display" , "block");
//Скрыть первый шаг
$(".t702 .t-input-group:eq(7)").css("display" , "none");
//Открыть второй
$(".t702 .t-input-group:eq(8)").css("display" , "block");
$(".t702 .t-input-group:eq(9)").css("display" , "block");
//Изменить надпись на 100%
$(".complete").text("Выполнено 100%");
//Изменить ширину progress bar до 100%
$(".prline").css({
"-webkit-transition": "all 1s ease-in-out",
"width": "100%",
});
//Показать надпись ПОЛИТИКА КОНФ
$(".t702__form-bottom-text").css("display" , "block");
//Если выбрали подарок 1
if ($(".t-radio:eq(24)").prop('checked')) { $(".xfoto img").attr("src" , "https://clck.ru/CvEGm");};
//Если выбрали подарок 2
if ($(".t-radio:eq(25)").prop('checked')) { $(".xfoto img").attr("src" , "https://clck.ru/CvEHa");};
//Если выбрали подарок 3
if ($(".t-radio:eq(26)").prop('checked')) { $(".xfoto img").attr("src" , "https://clck.ru/CvEJX");};
//Изменить общее фото
$(".xfoto").css("display" , "block");
};
//Описываем действия при клике на кнопку Дальше
$(function(){
$(".t142__submit").click(function () {
//Если первый шаг пройден вызываем функцию второго шага
if (numstep==1) {
step2(); return false;
};
//Если второй шаг пройден вызываем функцию третьего шага
if (numstep==2) {
step3(); return false;
};
//Если третий шаг пройден вызываем функцию четвёртого шага
if (numstep==3) {
step4(); return false;
};
//Если четвёртый шаг пройден вызываем функцию пятого шага
if (numstep==4) {
step5(); return false;
};
//Если пятый шаг пройден вызываем функцию шестого шага
if (numstep==5) {
step6(); return false;
};
//Если шестой шаг пройден вызываем функцию седьмого шага
if (numstep==6) {
step7(); return false;
};
//Если седьмой шаг пройден вызываем функцию восьмого шага
if (numstep==7) {
step8(); return false;
};
//Если восьмой шаг пройден вызываем функцию девятого шага
if (numstep==8) {
step9(); return false;
};
});
});
//Добавляем фото к переключателям и галочкам
//0-я radio
$(".t702 .t-radio__control:eq(0)").wrap("<div class='radio0 rbcont'></div>"); $('.radio0').prepend('<img src="https://goo.gl/Yx5ANK" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio0 img").click(function () { $(".t-radio:eq(0)").prop('checked', true)});
//1-я radio
$(".t702 .t-radio__control:eq(1)").wrap("<div class='radio1 rbcont'></div>"); $('.radio1').prepend('<img src="https://goo.gl/vdHc2d" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio1 img").click(function () { $(".t-radio:eq(1)").prop('checked', true)});
//9-я radio
$(".t702 .t-radio__control:eq(9)").wrap("<div class='radio9 rbcont'></div>"); $('.radio9').prepend('<img src="https://goo.gl/jTuvgS" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio9 img").click(function () { $(".t-radio:eq(9)").prop('checked', true)});
//10-я radio
$(".t702 .t-radio__control:eq(10)").wrap("<div class='radio10 rbcont'></div>"); $('.radio10').prepend('<img src="https://goo.gl/vdHc2d" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio10 img").click(function () { $(".t-radio:eq(10)").prop('checked', true)});
//11-я radio
$(".t702 .t-radio__control:eq(11)").wrap("<div class='radio11 rbcont'></div>"); $('.radio11').prepend('<img src="https://goo.gl/iLCBHp" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio11 img").click(function () { $(".t-radio:eq(11)").prop('checked', true)});
//12-я radio
$(".t702 .t-radio__control:eq(12)").wrap("<div class='radio12 rbcont'></div>"); $('.radio12').prepend('<img src="https://goo.gl/ZQim7n" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio12 img").click(function () { $(".t-radio:eq(12)").prop('checked', true)});
//13-я radio
$(".t702 .t-radio__control:eq(13)").wrap("<div class='radio13 rbcont'></div>"); $('.radio13').prepend('<img src="https://goo.gl/aJR5eC" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio13 img").click(function () { $(".t-radio:eq(13)").prop('checked', true)});
//22-я radio
$(".t702 .t-radio__control:eq(22)").wrap("<div class='radio22 rbcont'></div>"); $('.radio22').prepend('<img src="https://clck.ru/CvE2c" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio22 img").click(function () { $(".t-radio:eq(22)").prop('checked', true)});
//23-я radio
$(".t702 .t-radio__control:eq(23)").wrap("<div class='radio23 rbcont'></div>"); $('.radio23').prepend('<img src="https://clck.ru/CvE3V" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio23 img").click(function () { $(".t-radio:eq(23)").prop('checked', true)});
//24-я radio
$(".t702 .t-radio__control:eq(24)").wrap("<div class='radio24 rbcont'></div>"); $('.radio24').prepend('<img src="https://clck.ru/CvEGm" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio24 img").click(function () { $(".t-radio:eq(24)").prop('checked', true)});
//25-я radio
$(".t702 .t-radio__control:eq(25)").wrap("<div class='radio25 rbcont'></div>"); $('.radio25').prepend('<img src="https://clck.ru/CvEHa" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio25 img").click(function () { $(".t-radio:eq(25)").prop('checked', true)});
//23-я radio
$(".t702 .t-radio__control:eq(26)").wrap("<div class='radio26 rbcont'></div>"); $('.radio26').prepend('<img src="https://clck.ru/CvEJX" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$(".radio26 img").click(function () { $(".t-radio:eq(26)").prop('checked', true)});
//0-я checkBbox
$(".t702 .t-checkbox__control:eq(0)").wrap("<div class='checkbox0 rbcont'></div>"); $('.checkbox0').prepend('<img src="https://goo.gl/xTBhnE" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$('.checkbox0 img').click(function(){ $('.t-checkbox__control:eq(0)')[0].click()});
//1-я checkBbox
$(".t702 .t-checkbox__control:eq(1)").wrap("<div class='checkbox1 rbcont'></div>"); $('.checkbox1').prepend('<img src="https://goo.gl/8ng3jk" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$('.checkbox1 img').click(function(){ $('.t-checkbox__control:eq(1)')[0].click()});
//2-я checkBbox
$(".t702 .t-checkbox__control:eq(2)").wrap("<div class='checkbox2 rbcont'></div>"); $('.checkbox2').prepend('<img src="https://goo.gl/rhFi6B" alt="">');
//Если кликают по фото, то активируем соответствующий переключатель
$('.checkbox2 img').click(function(){ $('.t-checkbox__control:eq(2)')[0].click()});
//При клике на Радио или Галочку или Фото разблокируем кнопку
$(".t-radio , .t-checkbox , .rbcont" ).click(function () {
$(".t142__submit").removeClass("buttton-blk");
$(".flash").addClass("lighting");
});
//При успешной отправке данных скрываем форму и фото подарка
$(document).ready(function(){
window.mySuccessFunction= function($form){
//Скрываем фото подарка
$(".zavse").css("display" , "none");
$(".progressbar").css("display" , "none");
$(".t702__text-wrapper").css("display" , "none");
$(".t702__form-bottom-text").css("display" , "none");
$(".t-form__inputsbox").css("display" , "none");
}
$('.js-form-proccess').each(function(){
$(this).data('success-callback', 'window.mySuccessFunction');
});
});
//Скрываем табличку ошибки заполнения
$(".t-form__errorbox-middle").hide();
</script>
<style>
/*Располагаем кнопки слева*/
.t702 .t-form__submit {
text-align: left !important;
}
/*Задаём размер шрифта для надписи политика конфиденциальности*/
.t702__form-bottom-text div {
font-size: 10px !important;
}
/*Задаём стили для поля со скидкой*/
.t702 .t-input-subtitle {
padding-bottom: 0px !important;
width: fit-content;
background-color: #5ca4da;
font-size: 18px;
margin-bottom: 10px;
margin-top: 10px;
color: #ffffff;
opacity: 100;
}
/*Задаём максимальную ширину */
@media screen and (max-width: 2000px) {
.t-width_12 {
max-width: 980px !important; }
}
/*Радио button отступы и расположение в строчку*/
.t-radio__control {
margin: 10px 20px 10px 0 !important;
}
/*Чек бокс - отступы и расположение в строчку*/
.t-checkbox__control {
margin: 10px 20px 10px 0 !important;
}
/*Размер кнопки по содержимому*/
.t702 .t-submit {
overflow: hidden;
width: 400px !important;
}
/*Размер кнопки и полей ввода 100% по ширине для экранов меньше 640px*/
@media screen and (max-width: 640px){
.t702 .t-submit, .t702 .t-input {
width: 100%;
}}
/*Размер поля ввода на большом экране*/
.t702 .t-input {
width: 400px;
}
/*Расположение фото подарка*/
.xfoto {
text-align: center;
}
/*Расположение фото подарка*/
img.zavse {
position: absolute;
margin-top: -250px;
margin-left: 60px;
width: 350px;
}
/*Расположение фото подарка на экранах меньше 750 px*/
@media screen and (max-width: 750px){
img.zavse {
position: relative !important;
margin-top: 30px !important;
margin-left: 0px !important;
}}
/*Задаём цвет таблички успешной отправки данных*/
.t-form__successbox {
background: #00C3FD !important;
}
/*Стиль для блокировки кнопки*/
.buttton-blk{
background-color: #d8d8d8 !important;
pointer-events: none;
}
/*Стиль прогресс бара*/
.progressbar {
height: 40px;
background: #1a4e89;
color: #ffffff;
font-weight: 800;
text-align: center;
font-size: 20px;
font-family: 'Roboto';
line-height: 2;
position: relative;
margin-top: 10px;
}
/*Стиль прогресс бара*/
.prline {
background: #42bd00;
height: 100%;
width: 11%;
position: absolute;
transition: transform 0.4s linear;
}
/*Стиль прогресс бара*/
span.complete {
position: relative;
}
/*Стиль фото номеров шага*/
.nomershaga {
float: left;
margin-right: 10px;
}
img.stepnum {
width: 30px;
vertical-align: middle;
}
/*Цвет переключателей и галочек*/
.t-radio__indicator , .t-checkbox__indicator {
border-color: #1a4e8a
}
.t-radio__indicator:after {
background: #1a4e8a !important;
}
.t-checkbox__indicator:after {
border-color: #1a4e8a !important;
}
/*Положение кнопки ДАЛЬШЕ*/
.t142__wrapone , .t142__wraptwo {
right: unset !important;
float: left !important;
}
/*Ширина фотографий*/
.t702 .t-input-block img {
width: 150px;
margin-bottom: 5px;
transition: transform 0.15s linear;
}
/*Позиция и отступы блоков с фотографиями*/
.rbcont {
display: inline-block;
margin: 30px 20px 30px 0;
}
/*Фото - эффект при наведении*/
.t702 .t-input-block img:hover {
transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-webkit-transform: scale(1.04);
-o-transform: scale(1.04);
position: relative;
z-index: 2;
-webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
}
/*Отключить эффект для картинок на экранах меньше 960рх*/
@media screen and (max-width: 960px) {
.t-input-block img {
transform: none !important;
}
img.zavse {
margin-top: -220px;
margin-left: 90px;
width: 250px;
}
}
@media screen and (max-width: 820px) {
.t702 .t-input , .t702 .t-submit {
width: 100% !important;
}
}
.t702__wrapper {
padding: 10px 45px 40px 45px !important;
}
</style>