JS для Тильды на заказ: что можно доработать без смены платформы

Тильда закрывает большую часть сайта из коробки, но регулярно упирается в мелочи: нет валидации телефона по маске, нельзя показать попап через 20 секунд только новым посетителям, форма не умеет прокидывать UTM-метки в CRM. С такими задачами ко мне и приходят чаще всего - js для тильды на заказ пишу без миграции на другую платформу, без потери накопленной индексации и без переделки готовой вёрстки. Дальше - что реально чинится скриптами, а что упирается в ограничения самого конструктора.

Какие задачи на Tilda закрывает кастомный JS-код

На практике заявки сводятся к десятку однотипных доработок. Вот те, что встречаются почти в каждом проекте:

• Маски и валидация полей формы - телефон, email, ИНН. Zero Block умеет только базовый required, дальше нужен свой обработчик.
• Условный показ блоков по UTM-метке, реферер-домену или типу устройства.
• Попапы с триггером по скроллу, времени на странице или уходу курсора за пределы окна - но без фанатизма, три попапа подряд на одной странице убивают конверсию быстрее, чем их отсутствие.
• Передача скрытых полей формы (utm_source, utm_campaign, id рекламного кабинета) в CRM вместе с заявкой.
• Калькуляторы стоимости и слайдеры с пересчётом суммы в реальном времени.
• Периодическая синхронизация каталога с 1С или выгрузкой из учётной системы.

Простой пример - ловим UTM-метки из адресной строки и складываем в скрытые поля формы перед отправкой:

document.addEventListener('submit', function (e) {
  var form = e.target.closest('form');
  if (!form) return;
  var params = new URLSearchParams(window.location.search);
  ['utm_source', 'utm_medium', 'utm_campaign'].forEach(function (key) {
    var value = params.get(key);
    if (value) {
      var input = form.querySelector('input[name="' + key + '"]');
      if (input) input.value = value;
    }
  });
}, true);

Выглядит несложно, но на живом сайте добавляются нюансы: Tilda пересобирает DOM формы при каждом ререндере блока, поэтому обработчик вешается на document, а не на конкретный элемент, иначе после любого редактирования в конструкторе скрипт отваливается.

Чем Zero Block ограничен и где начинается кастомный код

Интеграции с эквайрингом и CRM без переезда с Tilda

На одном из проектов подключал приём оплаты через T‑Bank Эквайринг к форме на Tilda. Сама форма умеет отправить заявку на почту или в CRM, но не умеет создать платёж - это делает бэкенд. Схема получилась такая: JS перехватывает сабмит формы, отправляет данные на серверный эндпоинт, тот создаёт платёж через API T‑Bank и редиректит клиента на страницу оплаты, а после успешной транзакции вебхук возвращается на сайт и триггерит событие в Метрике и создаёт сделку в amoCRM с пометкой «оплачено».

Простая доработка формы - валидация, скрытые поля, вебхук в одну CRM - обычно стоит от 3 000 ₽ и делается за 1-2 дня. Связка с приёмом оплаты и синхронизацией статусов заказа - это уже комплексная интеграция с бэкендом, обработкой вебхуков и тестированием повторных платежей и возвратов, поэтому такие проекты я оцениваю от 40 000 ₽.

СДЭК и статусы доставки на сайте

Второй частый запрос - расчёт доставки СДЭК прямо в корзине или форме заказа, без перехода на отдельный виджет. Виджет СДЭК встраивается через JS, но по умолчанию не синхронизирован с полями Tilda-формы: адрес нужно прокидывать вручную, а рассчитанную стоимость - записывать в скрытое поле перед отправкой. Дальше, когда заказ создан и передан в СДЭК, статусы доставки можно транслировать менеджеру в Telegram через бота на aiogram - это удобнее, чем проверять личный кабинет СДЭК вручную несколько раз в день.

Важный момент по персональным данным: если бот или интеграция хранит телефон и адрес клиента, база должна лежать на сервере в РФ - в CRM или собственной БД, а не в Google Таблицах или Airtable. Это требование 152-ФЗ, и на клиентских проектах я его соблюдаю по умолчанию, а не как опцию.

Автоматизация уведомлений через n8n

Штатное уведомление с формы Tilda - это письмо на почту, которое половина менеджеров читает раз в час. Вместо этого форма дёргает вебхук в n8n, а дальше сценарий сам решает, куда маршрутизировать заявку: в Telegram-чат отдела продаж, в CRM с проставленным статусом, с уведомлением ответственному менеджеру по времени поступления заявки. Настройка такого сценария в n8n стоит от 25 000 ₽ - сюда входит сама логика, обработка ошибок вебхука и тестирование на реальных заявках.

Если нужен не просто webhook-роутинг, а полноценный бот с командами, историей диалога и собственной логикой - например, бот, который принимает статус заказа и сам отвечает клиенту на типовые вопросы - это отдельная разработка на aiogram от 30 000 ₽, а не надстройка над формой.

Готовые скрипты или индивидуальная доработка

Не каждая задача требует индивидуальной разработки с нуля. Маски телефона, простая валидация email, счётчик обратного отсчёта - это типовые вещи, под которые проще взять готовый код и адаптировать под конкретный блок, чем писать заново. У меня в библиотеке готовых скриптов для Tilda собраны решения именно под такие задачи - экономит и время, и бюджет клиента.

Индивидуальная разработка нужна там, где логика завязана на конкретный бизнес-процесс: расчёт стоимости по своей формуле, синхронизация с внутренней CRM, нестандартный сценарий показа контента по сегменту аудитории. Тут готового решения просто не существует, потому что условия у каждого проекта разные.

Где кастомный JS упирается в ограничения платформы

Zero Block выполняется в песочнице, и не любой сторонний скрипт туда встанет без адаптации - особенно если он рассчитывает на прямой доступ к DOM всей страницы. Вставка кода в футер или хедер сайта целиком доступна не на всех тарифах Tilda, для сложных интеграций нужен минимум Business. Статический экспорт и кэширование Tilda означают, что после публикации страницы скрипт может подхватиться не сразу - это не баг, а особенность CDN, и об этом стоит предупреждать клиента заранее, чтобы не было паники «скрипт не работает» через пять минут после деплоя.

Ещё один момент - конфликты между несколькими Т‑кодами на одной странице: если два разных скрипта слушают одно и то же событие submit или пытаются переопределить один обработчик, начинаются трудновоспроизводимые баги. Перед тем как добавлять новый код, я всегда смотрю, что уже стоит на сайте, а не пишу поверх вслепую.

Сроки и стоимость доработок

Разброс в сроках объясняется просто: доработка формы - это правка одного скрипта и тест на трёх сценариях. Интеграция с эквайрингом - это бэкенд, обработка вебхуков, edge-кейсы с отменой и возвратом платежа и согласование с банком, если у клиента ещё не подключён приём оплаты.

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

Можно ли доработать Tilda-сайт без доступа к редактору у разработчика?

Нет, для вставки кода в Zero Block или в настройки страницы нужен доступ к самому сайту в Tilda - обычно клиент добавляет разработчика в проект как соавтора с ограниченными правами, этого достаточно.

Слетит ли кастомный скрипт после того, как я поправлю блок в конструкторе?

Если скрипт вставлен в сам Zero Block и завязан на конкретную структуру DOM, а вы поменяли расположение элементов - вероятность конфликта есть. Скрипты, вставленные через настройки кода на странице или сайта целиком и написанные с делегированием событий на document, такие правки переживают нормально.

Стоит ли переезжать с Tilda на WordPress, если нужна сложная интеграция?

Зависит от масштаба. Если задача - эквайринг, СДЭК, CRM и пара калькуляторов, всё это решается кастомным JS и бэкендом поверх Tilda без миграции. Переезд имеет смысл, когда нужен полноценный каталог с тысячами товаров, личный кабинет пользователя или логика, которую физически некуда встроить в конструктор - тогда разумнее интернет-магазин под ключ на своей платформе.

Как быстро можно получить оценку стоимости доработки?

После описания задачи и ссылки на сайт я обычно даю оценку в течение суток. Для нетипичных случаев - например, когда нужно сначала разобраться в существующем коде на сайте - предлагаю платную консультацию от 3 000 ₽, чтобы оценка была точной, а не «на глаз».