Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать калькулятор шиномонтажа в Tilda
Цены на шиномонтаж
Тип автомобиля
Количество колёс
Диаметр колеса
Итоговая стоимость:
Введите телефон
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Как сделать калькулятор шиномонтажа в Tilda

1
Создали блок BF310N с полями:
  • Тип автомобиля - выпадающий список - с именем type
  • Количество колёс - выпадающий список - с именем wheels
  • Диаметр колеса - выпадающий список - с именем diameter
  • Вид услуги - вопрос с вариантами ответа(радиокнопки) - с именем service
  • Доп услуги - вопрос с вариантами ответа(галочки) - с именем option
  • Скрытое поле - с именем summ
2
Добавили код в блок Т123
Библиотека примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        // ПРАЙС ЛЕГКОВОЙ
        // Опции
        const optionPrice = {
            "Легковой": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [999, 999, 999, 1355, 1680, 1920, 2240, 3720, 3960, 4477, 4477, 4477, 4477, 4477, 4477],
                //R 12     13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [26, 26, 26, 45, 45, 50, 60, 90, 100, 98, 98, 98, 98, 98, 98],
                "Установка колес": [26, 26, 26, 45, 45, 50, 60, 90, 100, 98, 98, 98, 98, 98, 98],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [26, 26, 26, 26, 60, 80, 100, 200, 220, 240, 240, 240, 240, 240, 240],
                "Монтаж покрышки": [40, 40, 40, 60, 70, 90, 98, 200, 220, 240, 240, 240, 240, 240, 240],
                "Балансировка колес": [126, 126, 126, 170, 200, 210, 226, 350, 350, 370, 370, 370, 370, 370, 370],
            },
            "Кроссовер": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [2000, 2000, 2000, 2120, 2160, 2160, 2440, 3870, 3870, 3870, 3870, 3870, 3870, 3870, 3870],
                //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Установка колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [80, 80, 80, 80, 80, 80, 100, 200, 200, 200, 200, 200, 200, 200, 200],
                "Монтаж покрышки": [90, 90, 90, 100, 100, 100, 98, 200, 200, 200, 200, 200, 200, 200, 200],
                "Балансировка колес": [226, 226, 226, 250, 260, 260, 260, 350, 350, 350, 350, 350, 350, 350, 350],
            },
            "Внедорожник": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [2000, 2000, 2000, 2120, 2160, 2160, 2440, 3870, 3870, 3870, 3870, 3870, 3870, 3870, 3870],
                //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Установка колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [80, 80, 80, 80, 80, 80, 100, 200, 200, 200, 200, 200, 200, 200, 200],
                "Монтаж покрышки": [90, 90, 90, 100, 100, 100, 98, 200, 200, 200, 200, 200, 200, 200, 200],
                "Балансировка колес": [226, 226, 226, 250, 260, 260, 260, 350, 350, 350, 350, 350, 350, 350, 350],
            },
            "Микроавтобус": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [2000, 2000, 2000, 2120, 2160, 2160, 2440, 3870, 3870, 3870, 3870, 3870, 3870, 3870, 3870],
                //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Установка колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [80, 80, 80, 80, 80, 80, 100, 200, 200, 200, 200, 200, 200, 200, 200],
                "Монтаж покрышки": [90, 90, 90, 100, 100, 100, 98, 200, 200, 200, 200, 200, 200, 200, 200],
                "Балансировка колес": [226, 226, 226, 250, 260, 260, 260, 350, 350, 350, 350, 350, 350, 350, 350],
            },
            "Коммерческий": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [2000, 2000, 2000, 2120, 2160, 2160, 2440, 3870, 3870, 3870, 3870, 3870, 3870, 3870, 3870],
                //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Установка колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [80, 80, 80, 80, 80, 80, 100, 200, 200, 200, 200, 200, 200, 200, 200],
                "Монтаж покрышки": [90, 90, 90, 100, 100, 100, 98, 200, 200, 200, 200, 200, 200, 200, 200],
                "Балансировка колес": [226, 226, 226, 250, 260, 260, 260, 350, 350, 350, 350, 350, 350, 350, 350],
            },
            "Грузовой": {
                //R12     13     14     15     16      17      18      19     20     21     22     23     24     25     26
                "Комплексный шиномонтаж": [2000, 2000, 2000, 2120, 2160, 2160, 2440, 3870, 3870, 3870, 3870, 3870, 3870, 3870, 3870],
                //R 12   13   14   15   16    17    18    19   20    21    22    23    24    25    26
                "Снятие колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Установка колес": [50, 50, 50, 50, 50, 50, 70, 125, 125, 125, 125, 125, 125, 125, 125],
                "Мойка колёс": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
                "Детейлинг чистка колёс": [1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230, 1230],
                "Демонтаж покрышки": [80, 80, 80, 80, 80, 80, 100, 200, 200, 200, 200, 200, 200, 200, 200],
                "Монтаж покрышки": [90, 90, 90, 100, 100, 100, 98, 200, 200, 200, 200, 200, 200, 200, 200],
                "Балансировка колес": [226, 226, 226, 250, 260, 260, 260, 350, 350, 350, 350, 350, 350, 350, 350],
            },
        };
    
        function divide(x, delimiter) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
        }
    
        // Вспомогательные функции для работы с DOM
        function getElement(selector) {
            const element = document.querySelector(selector);
            if (!element) {
                console.warn(`Элемент не найден: ${selector}`);
            }
            return element;
        }
    
        function getElements(selector) {
            const elements = document.querySelectorAll(selector);
            if (elements.length === 0) {
                console.warn(`Элементы не найдены: ${selector}`);
            }
            return elements;
        }
    
        // Размечаем поля в форме
        const inputGroups = getElements('.uc-calc-wheels .t-input-group');
        if (inputGroups.length > 0) {
            inputGroups.forEach((group, i) => {
                group.classList.add('calc-el_' + (i + 1));
            });
        }
    
        // Добавляем спец классы
        const calcEl4 = getElement('.calc-el_4');
        if (calcEl4) {
            const labels4 = calcEl4.querySelectorAll('label');
            if (labels4[0]) labels4[0].classList.add('complex');
            if (labels4[1]) labels4[1].classList.add('detailing');
        }
    
        const calcEl5 = getElement('.calc-el_5');
        if (calcEl5) {
            const labels5 = calcEl5.querySelectorAll('label');
            const classNames = ['snyatie', 'ustanovka', 'moika', 'chistka', 'demontag', 'montag', 'balansirovka'];
            
            labels5.forEach((label, i) => {
                if (classNames[i]) {
                    label.classList.add(classNames[i]);
                }
            });
        }
    
        // Считаем и выводим итог
        function setPrice() {
            const typeSelect = getElement('select[name="type"]');
            const wheelsSelect = getElement('select[name="wheels"]');
            const diameterSelect = getElement('select[name="diameter"]');
            const serviceInputs = getElements('input[name="service"]');
            
            if (!typeSelect || !wheelsSelect || !diameterSelect || serviceInputs.length === 0) {
                console.warn('Не все необходимые элементы формы найдены');
                return;
            }
    
            const type = typeSelect.value;
            const wheels = parseInt(wheelsSelect.value) || 0;
            const diameter = diameterSelect.value;
    
            const indexType = typeSelect.selectedIndex;
            const indexDiam = diameterSelect.selectedIndex;
    
            let checkedService = null;
            let indexServ = -1;
            serviceInputs.forEach((input, i) => {
                if (input.checked) {
                    checkedService = input;
                    indexServ = i;
                }
            });
    
            // Вывод всех цен на данную комбинацию
            // Комплекс
            const complex = optionPrice[type]?.['Комплексный шиномонтаж']?.[indexDiam] || 0;
            const complexElement = getElement('.complex');
            if (complexElement) complexElement.setAttribute('data-price', divide(complex));
            
            // Детэйлинг
            const detailing = complex * 2;
            const detailingElement = getElement('.detailing');
            if (detailingElement) detailingElement.setAttribute('data-price', divide(detailing));
    
            // Индивидуально
            const checkboxControls = getElements('.calc-el_5 .t-checkbox__control');
            checkboxControls.forEach((control, i) => {
                const input = control.querySelector('input');
                if (input && optionPrice[type] && optionPrice[type][input.value]) {
                    const dataPrice = optionPrice[type][input.value][indexDiam] * wheels;
                    control.setAttribute('data-price', divide(dataPrice));
                }
            });
    
            // ВЫВОДИМ ИТОГОВУЮ СУММУ
            const resultSpan = getElement('.calc-el_6 span');
            const summInput = getElement('input[name="summ"]');
    
            // Если Комплексный
            if (indexServ === 0) {
                if (resultSpan) resultSpan.setAttribute('data-price', divide(complex));
                if (summInput) summInput.value = divide(complex) + ' руб';
            }
    
            // Если детэйлинг
            if (indexServ === 1) {
                if (resultSpan) resultSpan.setAttribute('data-price', divide(detailing));
                if (summInput) summInput.value = divide(detailing) + ' руб';
            }
    
            // Если Индивидуальный расчёт
            let summOption = 0;
            if (indexServ === 2) {
                checkboxControls.forEach(control => {
                    const input = control.querySelector('input');
                    if (input && input.checked) {
                        const price = control.getAttribute('data-price');
                        if (price) {
                            summOption += parseInt(price.replace(/\s+/g, '')) || 0;
                        }
                    }
                });
                
                if (resultSpan) resultSpan.setAttribute('data-price', divide(summOption));
                if (summInput) summInput.value = divide(summOption) + ' руб';
            }
        }
    
        setTimeout(function() {
            setPrice();
        }, 1000);
    
        // Формируем блок с фото
        const formInputsBox = getElement('.uc-calc-wheels .t-form__inputsbox');
        if (formInputsBox) {
            const imageBlock = document.createElement('div');
            imageBlock.className = 'image-wrp';
            imageBlock.innerHTML = `
                <div class="image-wrp-border">
                    <img data-img-index="0" class="t-img t-width" src="https://static.tildacdn.com/tild3565-3862-4738-a337-383334303061/image.png" style="display: none;">
                    <img data-img-index="1" class="t-img t-width" src="https://static.tildacdn.com/tild3238-6265-4332-b734-373233373539/image.png" style="display: none;">
                    <img data-img-index="2" class="t-img t-width" src="https://static.tildacdn.com/tild6162-6364-4435-a563-343139666263/image.png" style="display: none;">
                    <img data-img-index="3" class="t-img t-width" src="https://static.tildacdn.com/tild3735-3839-4537-b633-616432393961/image.png" style="display: none;">
                    <img data-img-index="4" class="t-img t-width" src="https://static.tildacdn.com/tild3239-3234-4134-b964-323637353161/image.png" style="display: none;">
                    <img data-img-index="5" class="t-img t-width" src="https://static.tildacdn.com/tild6662-3130-4138-b431-613162363333/image.png" style="display: none;">
                </div>
                <div class="image-text t-text"></div>
            `;
            formInputsBox.parentNode.insertBefore(imageBlock, formInputsBox.nextSibling);
    
            // Показываем первое фото
            const firstImage = getElement('.image-wrp img[data-img-index="0"]');
            if (firstImage) firstImage.style.display = 'block';
        }
    
        // При изменении типа авто
        const typeSelect = getElement('select[name="type"]');
        if (typeSelect) {
            typeSelect.addEventListener('change', function() {
                const index = this.selectedIndex;
                const images = getElements('.image-wrp img');
                images.forEach(img => {
                    img.style.display = 'none';
                });
                
                const targetImage = getElement('.image-wrp img[data-img-index="' + index + '"]');
                if (targetImage) targetImage.style.display = 'block';
                
                fillImgText();
            });
        }
    
        // Блокируем при старте галочки
        if (calcEl5) {
            calcEl5.classList.add('block-mode-boxes');
        }
    
        // При изменении типа услуги
        function changeServ() {
            const serviceInputs = getElements('input[name="service"]');
            const calcEl4Labels = getElements('.calc-el_4 label');
            
            if (serviceInputs.length === 0 || calcEl4Labels.length === 0) return;
    
            let checkedIndex = -1;
            serviceInputs.forEach((input, i) => {
                if (input.checked) {
                    checkedIndex = i;
                }
            });
    
            // Блокируем все
            calcEl4Labels.forEach(label => {
                label.classList.add('block-mode');
            });
            
            if (calcEl5) {
                calcEl5.classList.add('block-mode-boxes');
            }
    
            // Разблокируем нужные
            if (checkedIndex === 0 && calcEl4Labels[0]) {
                calcEl4Labels[0].classList.remove('block-mode');
            }
            
            if (checkedIndex === 1 && calcEl4Labels[1]) {
                calcEl4Labels[1].classList.remove('block-mode');
            }
            
            if (checkedIndex === 2 && calcEl4Labels[2]) {
                calcEl4Labels[2].classList.remove('block-mode');
                if (calcEl5) calcEl5.classList.remove('block-mode-boxes');
            }
        }
    
        // При изменениях в форме
        function handleFormChanges() {
            changeServ();
            setPrice();
        }
    
        const formElements = getElements('input[name="service"], .calc-el_5 input[type="checkbox"], .uc-calc-wheels select');
        formElements.forEach(element => {
            element.addEventListener('change', handleFormChanges);
            if (element.type === 'checkbox' || element.tagName === 'SELECT') {
                element.addEventListener('input', handleFormChanges);
            }
        });
    
        // Смена подписи фото
        function fillImgText() {
            const typeSelect = getElement('select[name="type"]');
            const imageText = getElement('.image-text');
            if (typeSelect && imageText) {
                imageText.textContent = typeSelect.value;
            }
        }
        fillImgText();
    
        // Отслеживаем клик по кнопкам в формах 
        const calcWheels = getElement('.uc-calc-wheels');
        if (calcWheels) {
            calcWheels.addEventListener('click', function(event) {
                if (event.target.classList.contains('t-submit') || event.target.closest('.t-submit')) {
                    const submitButton = event.target.classList.contains('t-submit') ? event.target : event.target.closest('.t-submit');
                    const block = submitButton.closest('.t-rec');
                    const form = submitButton.closest('form');
                    
                    if (!form) return;
                    
                    let iteration = 0;
                    const waitSendTimer = setInterval(function() {
                        iteration++;
    
                        if (form.classList.contains("js-send-form-success") || iteration >= 30) {
                            clearInterval(waitSendTimer);
                            calcWheels.classList.add('send-form');
                            
                            const formBottomText = calcWheels.querySelector('.t696 .t696__form-bottom-text');
                            if (formBottomText) formBottomText.style.display = 'none';
                            
                            const imageWrp = calcWheels.querySelector('.image-wrp');
                            if (imageWrp) imageWrp.style.display = 'none';
                        }
                    }, 100);
                }
            });
        }
 
 
    })();    
});    
</script>


<style>

.uc-calc-wheels .image-wrp img{
    display: none;
}

.uc-calc-wheels .t696 .t-form__inputsbox {
    max-width: none;
    width: 65%;
    padding-right: 50px;
    box-sizing: border-box;
}    

.uc-calc-wheels label.t-radio__control {
    width: 100%;
}

.uc-calc-wheels label.t-radio__control:after {
    content: attr(data-price)" руб";
    float: right;
    font-weight: 600;
}

.uc-calc-wheels label.t-checkbox__control:after {
    content: attr(data-price)" руб";
    float: right;
    font-weight: 600;
}

.calc-el_6 .t-text span:after {
    content: attr(data-price)" руб";
    float: right;
}

.uc-calc-wheels .t-form {
    display: flex;
    position: relative;
}

.uc-calc-wheels .image-wrp {
    width: 35%;
    display: block !important;
    margin-top: -15px;

}

.uc-calc-wheels .image-wrp img.t-img {
    width: 100%;
}

.uc-calc-wheels .image-wrp-border {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc-calc-wheels select.t-select {
    height: 45px;
}



.uc-calc-wheels .t696__text-wrapper {
    display: none;
}

.uc-calc-wheels .t696 .t696__content {
    padding-top: 30px;
    padding-bottom:30px;
}

.uc-calc-wheels .t696__text-wrapper {
    display: none;
}

.uc-calc-wheels .t696 .t696__content {
    padding-top: 30px;
    padding-bottom:30px;
}

.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 30%;
}

.calc-el_7 {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 35%;
}

.calc-el_4 label.t-radio__control:last-child:after {
    display: none;
}

.calc-el_5 {
    width: 100%;
}


.calc-el_6 {
    width: 100%;
}

.uc-calc-wheels .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.uc-calc-wheels .t-input-subtitle {
    height: auto;
}


.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 18px;
    
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 18px;
    padding-left: 30px;
    box-sizing: border-box;
}

.uc-calc-wheels label.t-radio__item.t-radio__control.t-text span,
.uc-calc-wheels label.t-checkbox__control.t-text span{
    flex-grow: 1;
}



.uc-calc-wheels .t696 .t-input-group.calc-el_5 {
    box-shadow: 0 1px 0 0 #d6d6d6;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.uc-calc-wheels .t696 .t-input-group.calc-el_4 {
    width: 100%;
    margin-bottom: 5px;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 35%;
    float: right;
    font-size: 10px;
    margin-top: -40px;
    position: relative;
    z-index: 99;

}

.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 35%;
    height: auto;
}

.uc-calc-wheels button.t-submit {
    width: 100%;
}

.uc-calc-wheels .t-form__errorbox-middle {
    display: none;
}

.uc-calc-wheels .image-text {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.block-mode{
    opacity: 0.4;
}

.block-mode-boxes{
    opacity: 0.4;
    pointer-events: none;
}

#allrecords .t-select:focus-visible {
    outline-color: transparent;
}

.js-send-form-success .t-form__inputsbox.t696__inputsbox_hidden {
    display: none;
}

.js-successbox.t-form__successbox {
    flex-grow: 1;
}

.uc-calc-wheels.send-form .t696 .t696__content {
    padding-bottom: 10px !important;
}




@media screen and (max-width:1200px){

.uc-calc-wheels select.t-select{
    font-size: 14px;
    height:40px;
}
.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 33%;
}

.uc-calc-wheels .t696 .t-input-subtitle {
    padding-bottom: 5px;
}

.uc-calc-wheels .t696 .t-input-group {
    margin-bottom: 10px;
}    

.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 16px;
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 16px;
}    
    
}

@media screen and (max-width: 960px){
.uc-calc-wheels .t-form {
    display: flex;
    flex-direction:column;
}
.uc-calc-wheels .t696 .t-form__inputsbox {
    max-width: none;
    width: 100%;
    padding:0;
}

.calc-el_7 {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 50%;
}
.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 50%;
    height: auto;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 50%;
    float: right;
    font-size: 10px;
    margin-top: -25px;
}
.uc-calc-wheels .t696 .t696__content {
    padding-bottom: 40px;
}    

.uc-calc-wheels .image-wrp img.t-img {
    width: 140%;
}

.uc-calc-wheels .image-wrp {
    padding-top: 75px;
}

    
}

@media screen and (max-width: 640px){
.calc-el_1, .calc-el_2, .calc-el_3 {
    width: 100%;
}

.uc-calc-wheels label.t-checkbox__control.t-text {
    padding-left: 0px;
}

.calc-el_7 {
    position: absolute;
    bottom: -100px;
    right: 0;
    width: 100%;
}
.uc-calc-wheels .t696 .t-form__submit {
    position: absolute;
    bottom: -185px;
    right: 0;
    width: 100%;
    height: auto;
}

.uc-calc-wheels .t696 .t696__form-bottom-text {
    width: 100%;
    float: right;
    font-size: 10px;
    margin-top: 170px;
}
.uc-calc-wheels .t696 .t696__content {
    padding-bottom: 220px;
}  

.uc-calc-wheels .image-wrp {
    width: 100%;
}    
.uc-calc-wheels .image-wrp img.t-img {
    width: 90%;
}
    
}

@media screen and (max-width: 480px){


.uc-calc-wheels label.t-radio__control.t-text {
    font-size: 14px;
}
.uc-calc-wheels label.t-checkbox__control.t-text {
    font-size: 14px;
}

.calc-el_6 .t-text div{
    font-size:16px !important;
}

.uc-calc-wheels .t696 .t696__content {
    padding: 10px 5px 45px;
    padding-bottom: 230px;
}

}

</style>
Made on
Tilda