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

Оформить доступ с промокодом
100
#2470a1
Как создать подбор тарифа в зависимости от набранных баллов в форме ZeroBlock в Tilda
Подбор тарифа
Ответы на вопросы помогут подобрать оптимальный тариф
Rate Calc
Ваш тариф -
...

Как создать подбор тарифа в зависимости от набранных баллов в форме ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него формы с полями (нужным полям задали значение балла)
  • dropdown c именами place, sweets , open , consumer , preferences , options
  • Question with answers (multiple) c именем options
2
Добавили форму с контактами - поля Name, Phone и ещё добавили
Hidden Field с именем rate
3
Создали форму с калькулятором, задали ей класс rate
Полю калькулятор задали формулу
place+sweets+open+consumer+preferences+options
4
Создали элемент Text для тарифа и задали ему класс ratetxt
5
Добавили код в блок Другое - Т123
Прописали соответствие баллов и значения
От 4 до 8 - Elementary
От 9 до 13 - Middle
От 14 - Maximum

"4" :"Elementary",
"9" :"Middle",
"14":"Maximum"
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём автоматический подбор тарифа по системе набранных баллов за ответы
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        const resultList = {
            "4" :"Elementary",
            "9" :"Middle",
            "14":"Maximum"
        };
        
        setTimeout(function(){
            const rateCalc = document.querySelector(".rate .t-calc__hiddeninput");
            if(rateCalc!=null){
            
                rateCalc.addEventListener('change', function(event) {
                    setTimeout(function(){
                        const total = +rateCalc.value;
                        let finalRate='';
                
                        for (key in resultList) {
                             if(total>=+key) finalRate =  resultList[key];
                        };
                        
                        if(finalRate == '') finalRate = '...';
        
                        document.querySelector('.ratetxt .tn-atom').innerHTML = finalRate;
                        document.querySelector('input[name="rate"]').value = finalRate;

                    }, 100);
                });
            };
        }, 1500);
    })();    
});    
</script>
Библиотека для примера
Стили из этого примера

<style>
.t396__elem button.t-submit {
    transition: all 0.3s ease-in-out;
}

.t396__elem button.t-submit:hover {
    background-color: #fff !important;
    color: #c7a17a !important;
}  
.rate .t-calc {
    font-size: 600px;
    opacity: 0.07;
}
.rate {
    left: auto !important;
    right: 0 !important;
    top: -170px !important;
}

select option {
    margin: 40px;
    background: rgb(199 161 122);
    color: #fff !important;
    text-shadow: 0 1px 0 rgb(199 161 122);
}

select:focus > option:checked { 
    background: #c7a17a !important;
}
</style>
Made on
Tilda