Калькулятор для Тильды: встроенный калькулятор в форме или внешний виджет
Калькулятор для Тильды: что умеет встроенный калькулятор в формах, когда нужен внешний виджет и как вставить Qalca через блок T123 или попапом по кнопке.
Калькулятор для Тильды можно сделать двумя путями: собрать его встроенными средствами в форме Тильды или вставить готовый калькулятор из внешнего сервиса через блок с HTML-кодом. Ниже разбираем, что умеет встроенный калькулятор по справке Тильды, в каких случаях его хватает, а когда удобнее внешний виджет. И пошагово показываем, как вставить калькулятор Qalca на страницу и как открыть его попапом по кнопке.
Что умеет встроенный калькулятор в формах Тильды
В формах Тильды есть специальное поле «Калькулятор». Оно считает итог по формуле из значений других полей формы. Вот что описано в справке Тильды (help-ru.tilda.cc, раздел про калькулятор в формах, проверено 13 октября 2026).
Какие поля участвуют в расчёте:
- «Количество», например ползунок с минимумом, максимумом и шагом;
- выпадающий список и чекбоксы, где цена варианта пишется через знак равно, например «Прозрачный лак, 2 слоя = 200»;
- поле ввода в одну строку;
- вопрос с вариантами ответа и картинками.
Как пишется формула. Каждому полю задаётся переменная латинскими буквами, например width или length. Формула собирается из переменных и чисел. Справка разрешает только базовые операторы: + - * / (). Пример из справки: length*width*(material+cover)+legs.
Что происходит с результатом:
- итог показывается в форме сразу при заполнении полей, с вашим текстом до и после числа;
- результат можно скрыть опцией «Не показывать в форме», тогда он виден только в корзине;
- результат можно добавить в корзину как товар со своим названием и картинкой;
- скрытый калькулятор подходит для промежуточных расчётов.
В каких блоках работает: основной блок BF204N «Вертикальная форма с множеством полей», а также BF310N, BF311N, BF402N, BF403N, BF502N и квиз QZ101.
Где встроенного калькулятора хватает
- Расчёт простой: площадь на цену за метр, количество на цену за штуку, плюс несколько опций.
- Вы готовы сами собрать формулу и проверить её на разных значениях.
- Вам нужна корзина Тильды: например, вы продаёте товар на заказ и хотите сразу принять оплату.
Где начинаются сложности
- Только арифметика. В справке описаны лишь четыре действия и скобки. Нет описания условий вроде «если выбран монтаж, добавить минимум 3 000 ₽» или округления до целой упаковки.
- Нет условной логики полей. Справка не описывает показ полей в зависимости от ответов. Если клиенту, который выбрал «без монтажа», не нужно видеть вопросы про монтаж, встроенными средствами это не описано.
- Формулу собираете вы. Для натяжного потолка с полотном, светильниками, профилями и карнизами формула получается длинной, и ошибку в ней легко пропустить.
Когда нужен внешний калькулятор на Тильде
Внешний сервис вставляется на страницу кодом и живёт отдельно от Тильды. Это удобно, если:
- у вас много параметров, надбавки, минимальный заказ, скидки;
- нужна форма заявки в несколько шагов, условные поля и загрузка фото или плана;
- заявки должны уходить сразу в Telegram или CRM с параметрами и суммой;
- вы хотите, чтобы цены можно было поменять без правки формулы;
- калькулятор должен работать одинаково и на Тильде, и на другом сайте, если вы переедете.
Сравнение сервисов, которые можно вставить на Тильду, с ценами в обзоре лучших конструкторов калькуляторов.
Как вставить калькулятор для Тильды на страницу через блок T123
В Тильде свой HTML-код вставляется через блок T123 «HTML-код». Покажем на примере Qalca.
Шаг 1. Подготовьте калькулятор. Выберите шаблон своей ниши в каталоге Qalca, например калькулятор натяжных потолков. Поставьте свои цены, переименуйте подписи полей, если нужно, и скройте лишние. Настройте, куда приходят заявки: почта, Telegram, вебхук в CRM.
Шаг 2. Скопируйте код вставки. В кабинете Qalca возьмите код для сайта. Это одна строка: элемент с атрибутом data-qalca и подключение скрипта widget.js. Вручную ничего менять в коде не нужно.
Шаг 3. Добавьте блок T123. В редакторе страницы Тильды откройте библиотеку блоков, раздел «Другое», и добавьте блок T123.
Шаг 4. Вставьте код. Откройте «Контент» блока и вставьте скопированный код. Сохраните.
Шаг 5. Опубликуйте страницу. По справке Тильды код из блока T123 выполняется на опубликованной странице. Поэтому проверяйте калькулятор после публикации: откройте страницу, заполните поля и отправьте тестовую заявку.
Калькулятор показывается внутри iframe. Это значит, что стили Тильды не ломают его вёрстку, а его скрипты не мешают вашей странице. Высота подстраивается под содержимое, на телефоне калькулятор тоже работает.
Общая инструкция для всех платформ есть на странице установки.
Как открыть калькулятор попапом по кнопке
Если не хочется занимать место на странице, калькулятор можно открывать во всплывающем окне по нажатию кнопки. Например, кнопка «Рассчитать стоимость» на первом экране.
- В кабинете Qalca откройте вкладку «Код вставки» и скопируйте ID калькулятора.
- Добавьте на страницу блок T123 и вставьте в него кнопку и скрипт:
<button data-qalca-open="ID">Рассчитать стоимость</button>
<script src="https://qalca.ru/widget.js" async></script>
Вместо ID подставьте свой. Атрибут data-qalca-open можно поставить на любой элемент, например на ссылку. Если скрипт уже есть на странице, второй раз его вставлять не нужно.
3. Ещё один вариант: «ушко» сбоку экрана, которое видно на всех экранах страницы. Для него в T123 вставьте <div data-qalca="ID" data-qalca-mode="popup" data-qalca-tab="Рассчитать стоимость"></div> и тот же скрипт. Окно можно открывать и само: через несколько секунд (data-qalca-delay="20") или после прокрутки страницы (data-qalca-scroll="50").
4. Опубликуйте страницу и проверьте: нажмите кнопку, посчитайте, отправьте тестовую заявку.
Что получаете с внешним калькулятором
Вот что даёт Qalca на Тильде помимо самого расчёта:
- Готовый расчёт под нишу. 84 шаблона в 13 нишах. Вы меняете цены, надбавки, скидку и минимальный заказ, переименовываете и скрываете поля. Добавить своё поле или поменять формулу самому нельзя. Если в шаблоне не хватает нужного варианта, напишите нам.
- Форма заявки до трёх шагов с условными полями и загрузкой файлов.
- Доставка заявок на почту, в Telegram, вебхуком в amoCRM, Битрикс24 и другие CRM, по желанию SMS. Заявка приходит с параметрами и суммой.
- Надёжность. Заявка сначала сохраняется, потом отправляется. Если канал не ответил, отправка повторяется до 8 раз в течение суток, а вам приходит уведомление о проблеме. Подробнее о том, почему это важно, в статье калькулятор с отправкой заявки.
- Защита. Цену пересчитывает сервер, поэтому подделать сумму в заявке нельзя. От спама защищают поле-ловушка, проверка времени заполнения, невидимая проверка браузера, лимит по IP и по желанию капча Яндекса (SmartCaptcha).
Из минусов: это отдельная подписка, от 490 ₽ в месяц за калькулятор, и внизу калькулятора есть ссылка «Калькуляторы для сайтов · Qalca». Убрать её можно на тарифе Про или за 590 ₽ в месяц.
Итог: что выбрать на Тильде
| Калькулятор в форме Тильды | Внешний виджет Qalca | |
|---|---|---|
| Стоимость | входит в тариф Тильды | от 490 ₽ в месяц за калькулятор |
| Расчёт | своя формула из + - * / () |
готовый шаблон под нишу, свои цены |
| Условная логика | в справке не описана | условные поля в форме заявки |
| Корзина и оплата Тильды | есть | нет |
| Куда приходят заявки | как остальные заявки Тильды | почта, Telegram, CRM, SMS |
| Работает на других сайтах | нет | да |
Если расчёт простой и вам нужна корзина, берите встроенный калькулятор. Если параметров много и важна доставка заявок в мессенджер или CRM, удобнее внешний виджет.
Попробуйте Qalca на Тильде 7 дней бесплатно
Выберите шаблон, поставьте свои цены и вставьте калькулятор в блок T123. Первые 7 дней бесплатно, вход в кабинет по коду из почты.