Тильда (Tilda) — популярный конструктор сайтов, который используется не только для лендингов, но и для корпоративных сайтов с формами обратной связи. Стандартный механизм обработки форм Тильды отправляет данные на собственные серверы Tilda и уведомляет вас по email. Но что если нужно:
- Отправлять данные в CRM или собственную базу данных
- Регистрировать пользователей автоматически через API
- Передавать данные в Битрикс24 или amoCRM без посредников
- Фиксировать конверсию в Яндекс Метрике или Google Analytics
В таких случаях необходимо перехватить отправку формы и отправить собственный AJAX-запрос на свой обработчик. Именно это мы и разберём в этой статье.
Как работает событие в Тильде: tildaform:aftersuccess
Тильда предоставляет специальное событие tildaform:aftersuccess, которое срабатывает после того, как форма успешно прошла валидацию и была отправлена через стандартный механизм Тильды. Это не событие submit браузера — это кастомное событие DOM, которое генерирует сам JavaScript Тильды.
Важно правильно инициализировать обработчик. Поскольку формы Тильды рендерятся динамически, нужно убедиться, что DOM уже готов перед навешиванием обработчиков. Используем проверку document.readyState:
|
1 2 3 4 5 |
if (document.readyState !== 'loading') { us_sendFormAfterSuccess(); } else { document.addEventListener('DOMContentLoaded', us_sendFormAfterSuccess); } |
Полный пример кода для перехвата формы Тильда
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script> function mySuccessFunction(form) { if (!form) return; // Поддержка jQuery и стандартных DOM-элементов if (form instanceof jQuery) { form = form.get(0); } var obj = {}; Array.prototype.forEach.call(form.elements, function (input) { if (input.type === 'radio' && input.checked) { obj[input.name] = input.value; } else if (input.type !== 'radio') { obj[input.name] = input.value; } }); // Универсальный AJAX-запрос на свой обработчик $.ajax({ type: "POST", url: "https://your-site/api/tilda/createOrder.php", dataType: "json", data: { name: obj["Name"] || '', last_name: obj["last_name"] || '', second_name: obj["second_name"] || '', email: obj["Email"] || '', phone: obj["Phone"] || '', product: obj["product"] || '', }, success: function (result) { console.log(result); if (result.ok) { // window.location.href = result.link; // Перенаправление при успехе } }, error: function (error) { console.log(error); alert("Ошибка! Попробуйте позже."); } }); } function us_sendFormAfterSuccess() { var forms = document.querySelectorAll('.js-form-proccess'); Array.prototype.forEach.call(forms, function (form) { form.addEventListener('tildaform:aftersuccess', function () { mySuccessFunction(form); }); }); } if (document.readyState !== 'loading') { us_sendFormAfterSuccess(); } else { document.addEventListener('DOMContentLoaded', us_sendFormAfterSuccess); } </script> |
Объяснение ключевых частей кода
Сбор данных формы: Мы итерируемся по form.elements — это стандартная HTMLCollection всех полей формы. Для radio-кнопок проверяем input.checked, чтобы не захватить невыбранные варианты. Результат — объект obj, где ключи соответствуют атрибуту name каждого поля.
Имена полей в Тильде: В настройках каждого поля формы в редакторе Тильды можно задать переменную (Variable). Именно это значение попадает в атрибут name и становится ключом в объекте obj. По умолчанию Тильда использует имена вроде Name, Email, Phone.
Пример PHP-обработчика на своём сервере
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php header('Content-Type: application/json'); header('Access-Control-Allow-Origin: https://your-tilda-domain.com'); header('Access-Control-Allow-Methods: POST'); $name = htmlspecialchars($_POST['name'] ?? ''); $email = htmlspecialchars($_POST['email'] ?? ''); $phone = htmlspecialchars($_POST['phone'] ?? ''); if (empty($email)) { echo json_encode(['ok' => false, 'error' => 'Email is required']); exit; } // Здесь — ваша логика: запись в БД, вызов API CRM, отправка письма // mail($email, 'Заявка получена', "Имя: $namenТелефон: $phone"); echo json_encode(['ok' => true]); |
Как обойти CORS если домены разные
Если ваш обработчик находится на другом домене, чем сайт Тильды, браузер заблокирует запрос из-за политики CORS. Решения:
- Заголовки CORS на сервере — добавьте в PHP-обработчик заголовок
Access-Control-Allow-Origin: https://your-tilda-site.com. Не используйте*для запросов с авторизацией. - Proxy на сервере Тильды — если Тильда размещена на вашем домене (не на tilda.ws), можно использовать прокси на том же домене.
- JSONP — устаревший способ, не рекомендуется.
Отслеживание конверсии через Яндекс Метрику
После успешной отправки формы логично зафиксировать цель в Яндекс Метрике. Добавьте вызов в функцию mySuccessFunction:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// После успешного AJAX-запроса success: function (result) { if (result.ok) { // Отправка цели в Яндекс Метрику if (typeof ym !== 'undefined') { ym(XXXXXXXX, 'reachGoal', 'form_submit'); } // Google Analytics 4 if (typeof gtag !== 'undefined') { gtag('event', 'form_submit', { 'event_category': 'lead' }); } } } |
Замените XXXXXXXX на номер вашего счётчика Яндекс Метрики, а form_submit — на идентификатор цели, настроенной в интерфейсе Метрики.
Итог
Механизм tildaform:aftersuccess — правильный способ перехватить отправку формы Тильды без вмешательства в стандартный механизм. Данные уже прошли валидацию Тильды, поэтому вы получаете только корректно заполненные формы. Подключите jQuery (если его нет), добавьте скрипт в блок «HTML» или в пользовательский JS сайта, укажите правильные имена полей — и интеграция с любым внешним сервисом будет работать.
