+7 (921) 555-78-68
г. Санкт-Петербург, Пн-Сб с 10-00 до 20-00
г. Санкт-Петербург, Пн-Сб с 10-00 до 20-00
ПОКРОЕМ НАДЁЖНУЮ И КРАСИВУЮ КРОВЛЮ ЗА 5 ДНЕЙ
Пройдите тест за 1 минуту и узнайте стоимость вашей кровли прямо сейчас
Финские технологии утепления
3D дизайн интерьера в подарок
Узнать стоимость кровли за 8 простых шагов
Узнайте стоимость кровли под ключ и получите подарок
Согласен с Политикой конфиденциальности сайта
Создаём квиз из 8 шагов из блока BF502N для Tilda
Форма состоит из штатных блоков раздела Форма и кнопка:
- форма BF502N
- кнопка BF101
Форма заполняется штатным образом - в этом примере:
- 6 блоков с переключателем
- 1 блок с галочками
- 1 блок с формой
Практически все визуальные и текстовые настройки остаются в штатном режиме.
Остальные элементы задаются через код стилей!
Для удобства код разделён на 4 части
Скрипт добавляется в блок ДРУГОЕ►Т123
- форма BF502N
- кнопка BF101
Форма заполняется штатным образом - в этом примере:
- 6 блоков с переключателем
- 1 блок с галочками
- 1 блок с формой
Практически все визуальные и текстовые настройки остаются в штатном режиме.
Остальные элементы задаются через код стилей!
Для удобства код разделён на 4 части
Скрипт добавляется в блок ДРУГОЕ►Т123
1
Блок основного обработчика событий
<script>
//Добавляем к спискам radioButton свои классы
$("[data-input-lid='1495810354468']").addClass("rb1");
$("[data-input-lid='1495810359387']").addClass("rb2");
$("[data-input-lid='1495810410810']").addClass("rb3");
$("[data-input-lid='1513333768654']").addClass("rb4");
$("[data-input-lid='1513334380756']").addClass("rb5");
$("[data-input-lid='1513334571473']").addClass("rb6");
$("[data-input-lid='1513334870532']").addClass("rb7");
//Клонируем кнопки
$(".t142 .t-btn").clone().appendTo(".t702 .t-form__submit");
//Добавляем прогресс бар
$('.t702__text-wrapper').append('<div class="progress gradient stripe gloss"><span>12.5%</span></div>');
//Добавляем фото подарка
$('.t702__wrapper').append('<div class="podarok"><img class="zavse" src="https://static.tildacdn.com/tild3431-3264-4664-a235-313963643935/masterflash2grn2.png" data-original="https://static.tildacdn.com/tild3663-6162-4234-a462-633935663530/masterflash2gr.jpg" imgfield="img"></div>');
//Блокируем кнопку при старте
$(".t142__submit").addClass("buttton-blk");
//При клике на Радио разблокируем кнопку
$(".t-radio , .t-checkbox" ).click(function () {
$(".t142__submit").removeClass("buttton-blk");
$(".flash").addClass("lighting");
});
//Функция блокировки кнопки
function blockbutt(){
$(".t142__submit").addClass("buttton-blk");
$(".flash").removeClass("lighting");
};
//Объявляем переменную переменную номера шага
var numstep=1;
// Функция второго шага
function step2(){
//Блокируем кнопку
blockbutt();
//Скрыть первый шаг
$(".rb1").css("display" , "none");
//Открыть второй
$(".rb2").css("display" , "block");
//Изменить надпись на 25%
$(".progress").html("<span>25%</span>");
//Изменить ширину progress bar до 25%
$(".progress > span").css("width" , "25%");
numstep++;
};
// Функция третьего шага
function step3(){
//Блокируем кнопку
blockbutt();
//Скрыть второй шаг
$(".rb2").css("display" , "none");
//Открыть третий шаг
$(".rb3").css("display" , "block");
//Изменить надпись на 37,5%
$(".progress").html("<span>37.5%</span>");
//Изменить ширину progress bar до 37,5%
$(".progress > span").css("width" , "37.5%");
numstep++;
};
// Функция четвертого шага
function step4(){
//Блокируем кнопку
blockbutt();
//Скрыть третий шаг
$(".rb3").css("display" , "none");
//Открыть четвёртый шаг
$(".rb4").css("display" , "block");
//Изменить надпись на 50%
$(".progress").html("<span>50%</span>");
//Изменить ширину progress bar до 50%
$(".progress > span").css("width" , "50%");
numstep++;
};
// Функция пятого шага
function step5(){
//Блокируем кнопку
blockbutt();
//Скрыть четвёртый шаг
$(".rb4").css("display" , "none");
//Открыть пятый шаг
$(".rb5").css("display" , "block");
//Изменить надпись на 62,55%
$(".progress").html("<span>62.5%</span>");
//Изменить ширину progress bar до 62,5%
$(".progress > span").css("width" , "62.5%");
numstep++;
};
// Функция шестого шага
function step6(){
//Блокируем кнопку
blockbutt();
//Скрыть пятый шаг
$(".rb5").css("display" , "none");
//Открыть шестой шаг
$(".rb6").css("display" , "block");
//Изменить надпись на 75%
$(".progress").html("<span>75%</span>");
//Изменить ширину progress bar до 75%
$(".progress > span").css("width" , "75%");
numstep++;
};
// Функция седьмого шага
function step7(){
//Блокируем кнопку
blockbutt();
//Скрыть шетой шаг
$(".rb6").css("display" , "none");
//Открыть седьмой шаг
$(".rb7").css("display" , "block");
//Изменить надпись на 87,5%
$(".progress").html("<span>87.5%</span>");
//Изменить ширину progress bar до 87,5%
$(".progress > span").css("width" , "87.5%");
numstep++;
};
// Функция восьмого шага
function step8(){
//Скрыть седбмой шаг
$(".rb7").css("display" , "none");
//Скрываем кнопку дальше
$(".t702 .t-btn").css("display" , "none");
//Показать поле ИМЯ
$(".t702 .t-input-group_nm").css("display" , "block");
//Показать поле ТЕЛЕФОН
$(".t702 .t-input-group_ph").css("display" , "block");
//Показать кнопку ОТПРАВИТЬ
$(".t702 .t-submit").css("display" , "block");
//Показать надпись ПОЛИТИКА КОНФ
$(".t702__form-bottom-text").css("display" , "block");
//Показываем фото подарка
$(".podarok").css("display" , "block");
//Изменить надпись на 100%
$(".progress").html("<span>100%</span>");
//Изменить ширину progress bar до 100%
$(".progress > span").css("width" , "100%");
};
//Описываем действия при клике на кнопку Дальше
$(function(){
$(".t702 .t-btn").click(function () {
//Если первый шаг пройден вызываем функцию второго шага
if (numstep==1) {
step2();
return;
};
//Если второй шаг пройден вызываем функцию третьего шага
if (numstep==2) {
step3();
return;
};
//Если третий шаг пройден вызываем функцию четвёртого шага
if (numstep==3) {
step4();
return;
};
//Если четвёртый шаг пройден вызываем функцию пятого шага
if (numstep==4) {
step5();
return;
};
//Если пятый шаг пройден вызываем функцию шестого шага
if (numstep==5) {
step6();
return;
};
//Если шестой шаг пройден вызываем функцию седьмого шага
if (numstep==6) {
step7();
return;
};
//Если седьмой шаг пройден вызываем функцию восьмого шага
if (numstep==7) {
step8();
return;
};
});
});
//При успешной отправке данных скрываем форму и фото подарка
$(document).ready(function(){
window.mySuccessFunction= function($form){
//Показываем фото подарка
$(".podarok").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>
2
Дополнительные стили для визуализации
<style>
/*Скрываем лишние поля при старте*/
.rb2, .rb3, .rb4, .rb5, .rb6, .rb7,
.t-input-group_nm,
.t-input-group_ph,
.t702 .t-submit,
.t702__form-bottom-text,
#rec40452666,
.podarok
{
display: none;
}
/*Эффект наведения для попап*/
.t702 .t-btn:hover{
background-color: #ffed4c !important;
}
/*Располагаем кнопки слева*/
.t702 .t-form__submit {
text-align: left !important;
}
/*Задаём плавность наведения для кнопки в pop-up*/
.t702 .t-btn{
transition: all 0.3s ease-in-out;
}
/*Задаём размер шрифта для надписи политика конфиденциальности*/
.t702__form-bottom-text div {
font-size: 10px !important;
}
/*Задаём стили для поля со скидкой*/
.t702 .t-input-subtitle {
padding-bottom: 0px !important;
width: fit-content;
background-color: #ffdf00;
font-size: 18px;
margin-bottom: 10px;
color: #000000;
opacity: 100;
}
/*Задаём максимальную ширину */
@media screen and (max-width: 2000px) {
.t-width_10 {
max-width: 980px !important; }
}
/*Радио button отступы и расположение в строчку*/
.t-radio__control {
margin: 10px 20px 10px 0 !important;
display: inline-block !important;
}
/*Чек бокс - отступы и расположение в строчку*/
.t-checkbox__control {
margin: 10px 20px 10px 0 !important;
display: inline-block !important;
}
/*Размер кнопки по содержимому*/
.t702 .t-submit {
overflow: hidden;
width: fit-content !important;
}
/*Размер кнопки и полей ввода 100% по ширине для экранов меньше 640px*/
@media screen and (max-width: 640px){
.t702 .t-submit, .t702 .t-input {
width: 100%;
}}
/*Размер поля ввода на большом экране*/
.t702 .t-input {
width: 400px;
}
/*Расположение фото подарка*/
.podarok {
text-align: center;
}
/*Расположение фото подарка*/
img.zavse {
position: absolute;
margin-top: -220px;
margin-left: 100px;
}
/*Расположение фото подарка на экранах меньше 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;
}
</style>
3
Стили для Progress Bar
<style>
.progress span{
color: #ffffff;
font-family: roboto;
font-weight: 700;
font-size: 16px;
text-align: center;
}
.progress {
margin: 5px 0 3px;
border: 1px solid #ffffff;
background: #00C3FD;
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 1px 1px 1px #000000;
-moz-box-shadow: 1px 1px 1px #000000;
box-shadow: 1px 1px 1px #000000;
}
.progress > span {
display: block;
height: 20px;
width: 12.5%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.gradient > span {
-webkit-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
}
.gloss > span {
background-image: -moz-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(45%,rgba(255,255,255,0.1)),
color-stop(55%,rgba(0,0,0,0.2)),
color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
}
.stripe > span {
background-size: 30px 30px;
background-image: -moz-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
}
</style>
4
Эффект бликов для кнопок
<script>
$('.t702 .t-btn').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.t702 .t-submit').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
$('.tn-elem__405789511488216364211 a').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
//Удаляем мерцание на старте
$(".t-btn div").removeClass("lighting");
</script>
<style>
.t702 .t-btn,
.tn-elem__405789511488216364211 a
{
position: relative;
overflow: hidden;
}
.t702 .flash ,
.tn-elem__405789511488216364211 .flash
{
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.lighting {
webkit-animation: moving 4s ease-in-out infinite;
-moz-animation: moving 4s ease-in-out infinite;
-ms-animation: moving 4s ease-in-out infinite;
-o-animation: moving 4s ease-in-out infinite;
animation: moving 4s ease-in-out infinite;
}
@keyframes moving {
50% { webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(50.5em);
}
100% { webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(50.5em);
}
}
</style>
Error get alias
Error get alias
Error get alias
