Как создать подбор тарифа в зависимости от набранных баллов в форме 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 ).ready(function() {
    
let resultList = {
    "4" :"Elementary",
    "9" :"Middle",
    "14":"Maximum"
}; 

$('.rate').on('DOMSubtreeModified', ' .t-calc', function() {
    setTimeout(function(){
        let total = +$('.rate .t-input-group_fr').find('input').val();
        let finalRate='';
        $.each(resultList, function( key, value ) {
            if(total>=+key) finalRate =  resultList[key];
        });
        if(finalRate == '') finalRate = '...';
        $('.ratetxt .tn-atom').html(finalRate);
        $('input[name="rate"]').val(finalRate);
    }, 100);
});
});	
</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