Как добавить калькулятор stepFORM на сайт Тильды

Сайт на Тильде уже готов, осталось добавить расчёт стоимости услуги. Соберём его в stepFORM: посетитель укажет параметры, увидит предварительную цену и оставит контакт. Затем встроим форму на страницу через HTML-блок T123. Поля, ставки и уведомления будем настраивать в stepFORM, не меняя код расчёта на сайте.

Разберём уборку квартиры: площадь, вид уборки, окна и выезд. Для такой заявки менеджеру нужен телефон вместе с выбранными услугами и суммой. Один контакт без расчёта заставит его заново спрашивать, что именно выбрал клиент.

Что понадобится для подключения

Нужны форма stepFORM и доступ к странице Тильды, на которой можно разместить HTML-код. Проверьте свой тариф Тильды, а в тарифах stepFORM посмотрите доступные возможности и лимит ответов. Уведомления проверяются отдельно: например, отправка результатов на email описана в документации как платная функция.

До открытия редактора запишите свой прайс: за что берёте оплату, в каких единицах и какие заказы оцениваете отдельно. В нашем примере площадь умножается на ставку, окна добавляются поштучно, выезд оплачивается один раз. Сначала проверим эту арифметику, затем перенесём её в форму.

Шаг 1. Запишите поля и правило цены

В нашем учебном прайсе поддерживающая уборка стоит 80 ₽ за м², генеральная 120 ₽ за м². Мытьё одного окна добавляет 350 ₽. Выезд по городу стоит 500 ₽ за заказ, независимо от площади. После ремонта этот калькулятор цену не обещает: такую заявку нужно оценивать отдельно.

Под полем окон напишите, что входит в расчёт. Здесь считаем стандартный оконный проём, без балконного остекления. Иначе клиент может выбрать «одно окно», имея в виду панорамное остекление всей комнаты.

На языке прайса формула выглядит так:

area * rate + windows * 350 + 500

Для квартиры 50 м² с поддерживающей уборкой и двумя окнами получаем 50 * 80 + 2 * 350 + 500 = 5200. При генеральной уборке с теми же параметрами сумма составит 7 200 ₽. Окна не выбраны? Вторая часть равна нулю, выезд всё равно прибавляется один раз.

Не переносите эти границы в свой бизнес автоматически. Если берётесь за квартиру 15 м², нижний предел 20 не подходит. Если уборка студии стоит не меньше определённой суммы, это отдельное правило прайса. Сначала запишите правило, потом добавьте условие в расчёт. Прятать минимальный заказ в завышенной ставке за метр неудобно: менеджер и клиент будут считать по разным схемам.

Проверьте единицы измерения до настройки полей. Площадь вводится в квадратных метрах, ставка указана за квадратный метр, окна считаются штуками. Выезд относится ко всему заказу, поэтому его прибавляем после умножения площади на ставку. Если написать area * (rate + 500), за квартиру 50 м² выезд будет добавлен 50 раз. Сумма выглядит правдоподобно как число, но правило прайса уже другое.

Шаг 2. Соберите расчёт в stepFORM

1. Создайте форму stepFORM. Добавьте элемент «Диапазон» и назовите его «Площадь квартиры, м²». Задайте минимум 20, максимум 200, шаг 1 и начальное значение 50.
2. Добавьте «Выпадающий список» с вариантами «Поддерживающая» и «Генеральная». В настройках кастомизации задайте поддерживающую уборку как вариант по умолчанию.
3. Добавьте второй «Диапазон», «Количество окон»: от 0 до 10, шаг 1, начальное значение 0. Подпишите, что речь о стандартных окнах.
4. Добавьте «Формулу» с названием «Предварительная стоимость». Откройте её настройки через значок «Сумма».

В редакторе формулы задайте значения вариантов уборки: 80 для поддерживающей, 120 для генеральной. Для площади и окон используйте число, выбранное посетителем. Подробности настройки есть в инструкции по формуле и описании элементов.

area, rate и windows выше обозначают смысл полей. В выражении stepFORM нужны идентификаторы из вашего редактора, а не эти условные названия. Переносите значения из списка полей: их обозначения зависят от формы.

Допустим, редактор показывает D1 для площади, F1 для ставки и D2 для окон. Тогда выражение будет D1 * F1 + D2 * 350 + 500. Это условное сопоставление, не готовая строка для любой формы. Перепишите свои идентификаторы и проверьте каждый множитель отдельно.

Для варианта уборки задавайте цену, для площади оставляйте число, которое выбрал посетитель. В расчёте нужен выбранный тариф. Если оба тарифа складываются или вместо 80 получается номер варианта, проверьте значения полей до изменения формулы. Неверная переменная не исправляется дополнительными скобками.

В предпросмотре формы выберите 50 м², поддерживающую уборку и два окна. Должно получиться 5 200 ₽. Переключите уборку на генеральную: ожидаемая сумма 7 200 ₽. Если результаты не сходятся, исправьте значения полей до добавления контакта.

Шаг 3. Добавьте контакт и включите отправку

После результата добавьте имя и элемент «Мобильный телефон», сделайте телефон обязательным. Под суммой оставьте оговорку: «Расчёт для стандартной уборки. Сильные загрязнения и балконное остекление оценим отдельно». Дату и адрес спрашивайте сразу, только если без них нельзя обработать заявку; иначе уточните при ответе.

Для кнопки используйте «Уточнить стоимость уборки» и проверьте действие «Отправить форму». Надпись «Забронировать за 5 200 ₽» подходит лишь тогда, когда расчёт покрывает условия заказа и настроено бронирование. Для обработки контактов оформите подходящие документы и настройки формы. Отдельный разбор есть в статье о согласии на обработку персональных данных.

Шаг 4. Вставьте форму на страницу Тильды

Внешнюю форму и страницу сайта настраивают отдельно. В stepFORM вы меняете поля, расчёт и получение ответов. В Тильде размещаете код, выбираете место на странице и проверяете окружение блока.

1. В форме stepFORM откройте «Публикация», выберите размещение на сайте и скопируйте выданный код JavaScript целиком.
2. В Тильде откройте нужную страницу. В библиотеке блоков найдите «Другое» и T123 «HTML-код».
3. Откройте «Контент» блока, вставьте код, сохраните изменения. Не подставляйте чужой идентификатор формы из примера в интернете.
4. Опубликуйте страницу на своём сайте и откройте её обычный адрес. Проверьте расчёт там.

Этот путь описан в инструкции подключения stepFORM к Тильде. По документации T123, в редакторе и предпросмотре Тильды код показывается как текст; для работы нужна опубликованная страница. Отсутствие формы в таком предпросмотре само по себе не доказывает ошибку вставки.

По документации stepFORM, после установки кода сохранённые изменения формы отображаются без повторной вставки. Это удобно при смене ставки. Проверять опубликованную страницу после изменения прайса всё равно нужно: убедитесь, что изменили именно встроенную форму и получили ожидаемую сумму.

Шаг 5. Проверьте ответ в stepFORM и уведомление

HTML-блок только размещает внешнюю форму. Подключённая к обычной форме Тильды почта сама по себе не настраивает получение ответов stepFORM. Адресата и интеграцию выбирайте в том сервисе, чья форма принимает данные.

Отправленные данные ищите во вкладке «Ответы» формы stepFORM. Для письма менеджеру откройте «Настройки», включите email, подтвердите адрес кодом и активируйте его. Порядок описан в инструкции по ответам и настройке уведомлений. Если почта уже подтверждена, повторное подтверждение для другой формы не требуется.

Запишите, что должно оказаться в ответе: площадь 50, поддерживающая уборка, два окна, предварительная сумма 5 200 ₽ и контакт. Назовите результат «Предварительная стоимость», чтобы менеджер понял, что за число пришло. Если уведомление допускает выбор состава полей, убедитесь, что формула в него включена.

В собственном тестовом окружении отправьте одну заявку с пометкой «Тест калькулятора». Найдите запись в ответах формы, затем проверьте письмо или выбранную интеграцию. Не ограничивайтесь сообщением об успешной отправке. Если записи нет, разбирайте отправку; если запись есть, но уведомления нет, проверяйте адресата и подключение.

Контрольные суммы и ошибки перед запуском

Проверяйте на тех же ставках, что записаны в полях. Таблица ниже рассчитана независимо от конструктора. Она помогает поймать перепутанную цену, постоянную доплату в неправильном месте и потерянные окна.

Проверьте, что происходит у нижней и верхней границы. Наш пример не принимает площадь меньше 20 или больше 200 м² и дробное число окон. Для заказа вне диапазона нужен отдельный способ связаться с вами, а не случайная сумма. Попробуйте вернуться к полям, сменить уборку и убрать окна: итог должен пересчитаться по новым значениям.

На телефоне пройдите форму пальцем. Оцените подписи, управление ползунком, видимость результата и контакта. Если есть горизонтальная прокрутка всей страницы, сначала проверьте ширину контейнера. Если форма обрезана в Zero Block, проверьте его высоту и поведение на разных размерах экрана. Калькулятор должен помещаться и после показа ошибок заполнения.

Важна и начальная сумма: в примере при 50 м², поддерживающей уборке и нуле окон она равна 4 500 ₽. Покажите посетителю, какие значения уже выбраны, потому что пустой на вид выбор с посчитанной ценой сбивает с толку: непонятно, что именно включено в результат до первого нажатия.

После запуска считайте отправленные заявки отдельно от просмотров страницы. Для встроенной формы stepFORM настройка Метрики описана в документации по счётчику и целям. Идентификатор события берите из своей формы, а не из случайного примера. Не называйте открытие калькулятора заявкой: контакт и расчёт вы получите только после отправки.

С чего начать на своём сайте

Возьмите одну услугу и три заказа с известными суммами. Запишите поля и ставку, соберите расчёт, добейтесь совпадения. Затем добавьте контакт и проверьте получение ответа. Уже после этого ставьте калькулятор рядом с описанием услуги, где посетителю понятно, что входит в цену.

Начните с конструктора калькуляторов stepFORM: соберите одну форму, проверьте её сумму и ответ, затем скопируйте код в T123. При следующем изменении ставки вернитесь в редактор stepFORM и повторите контрольный расчёт. Общие принципы расчёта разобраны в статье «Калькулятор для сайта»; здесь мы разбирали именно подключение формы к странице Тильды.

Частые вопросы