Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
 
+7 (921) 555-78-68
г. Санкт-Петербург, Пн-Сб с 10-00 до 20-00
ЗАКАЗАТЬ ЗВОНОК
ПОКРОЕМ НАДЁЖНУЮ И КРАСИВУЮ КРОВЛЮ ЗА 5 ДНЕЙ
Узнать стоимость кровли + получить подарок
Пройдите тест за 1 минуту и узнайте стоимость вашей кровли прямо сейчас
Финские технологии утепления
3D дизайн интерьера в подарок

© All Right Reserved 2017
Политика конфиденциальности
ДАЛЕЕ

Создаём квиз из 8 шагов из блока BF502N для Tilda

Форма состоит из штатных блоков раздела Форма и кнопка:
- форма 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
Made on
Tilda