Tilda формы: запрет повторной отправки с JS

Для настройки формы tilda и запрета повторной отправки одним пользователем сохраните флаг успеха в localStorage через JavaScript в блоке T123. После отправки формы отслеживайте появление сообщения об успехе с помощью MutationObserver, даже если Tilda закрывает модалку автоматически без ID. При повторном клике на кнопку проверяйте localStorage и показывайте кастомное уведомление вместо формы заявки tilda.

Содержание

• Почему важен запрет повторных отправок в tilda формы
• Подготовка: добавляем JavaScript в Tilda через блок T123
• Сохранение состояния формы в localStorage
• Отслеживание успеха отправки без ID с MutationObserver
• Настройка кнопки для проверки и показа сообщения
• Полный рабочий код для tilda javascript форма
• Тестирование настройки формы tilda и возможные проблемы
• Альтернативы для tilda формы обратной связи

Почему важен запрет повторных отправок в tilda формы

Представьте: пользователь кликнул на кнопку, заполнил форму заявки tilda, отправил — и всё, база данных получила дубликат. Или хуже: спамеры жмут повторно. В tilda формы это особенно актуально для всплывающих модалок, где кнопка всегда на виду.

Запрет через localStorage решает проблему на клиенте — дешево, быстро, без серверных хаков. Но после обновления Tilda (закрытие формы + сообщение без ID) стандартные события формы не сработают. Нужно ловить DOM-изменения. Вы сэкономите трафик, нервы менеджеров и место в CRM.

А что если пользователь очистит кэш? Тогда форма вернётся — это нормально, не пытайтесь хранить вечно.

Подготовка: добавляем JavaScript в Tilda через блок T123

Сначала добавьте блок для скриптов. Откройте библиотеку блоков, найдите “Другое” и перетащите T123 на страницу с формой или кнопкой. Официальная инструкция Tilda подтверждает: туда кидайте HTML, CSS и JS — код запустится после загрузки страницы.

Почему T123, а не Zero Block? Он проще для чистого JS, без лишнего верстания. Разместите его перед формой или в футере проекта для глобального эффекта. Подробный гайд по методам рекомендует именно так для форм.

Вставьте код в поле “Контент”. Готово? Публикуйте и проверяйте консоль (F12).

Сохранение состояния формы в localStorage

LocalStorage — ваш лучший друг здесь. Он держит данные в браузере до очистки кэша, идеально для флага “форма отправлена”.

Базовый пример:

// Сохранить флаг
localStorage.setItem('tildaFormSubmitted', 'true');

// Проверить
if (localStorage.getItem('tildaFormSubmitted')) {
 console.log('Форма уже отправлена!');
}

Руководство по localStorage объясняет: данные persistent, но только на устройстве. Для tilda формы обратной связи хватит — один юзер, один девайс. Ключ назовите уникально, типа ‘myform-2026’, чтобы не конфликтовало с другими скриптами.

Очистка? Добавьте кнопку “Отправить заново” или таймер: localStorage.removeItem('key') через неделю.

Отслеживание успеха отправки без ID с MutationObserver

Вот засада обновления Tilda: форма закрывается, сообщение мелькает — и никакого удобного ID или события. MutationObserver решает: следит за изменениями DOM в модалке.

Создайте observer:

const observer = new MutationObserver((mutations) => {
 mutations.forEach((mutation) => {
 if (mutation.addedNodes.length) {
 mutation.addedNodes.forEach((node) => {
 if (node.nodeType === 1 && node.querySelector('.t-form__success')) { // Класс успеха Tilda
 localStorage.setItem('tildaFormSubmitted', 'true');
 observer.disconnect(); // Остановить слежку
 }
 });
 }
 });
});

// Запустить на модалке или body
observer.observe(document.body, { childList: true, subtree: true });

Статья про MutationObserver разбирает нюансы: ловит addedNodes, работает на subtree. Адаптируйте селектор под ваше сообщение успеха — инспектируйте DOM в F12 после отправки.

Запускайте observer при открытии модалки. Работает даже если Tilda прячет элементы.

Настройка кнопки для проверки и показа сообщения

Кнопка открытия формы — ваш триггер. Добавьте onclick или data-tilda-modal с JS-чеком.

Пример для кнопки с ID “open-form-btn”:

document.getElementById('open-form-btn').addEventListener('click', function(e) {
 if (localStorage.getItem('tildaFormSubmitted')) {
 e.preventDefault();
 showSuccessMessage(); // Ваша функция показа
 return false;
 }
 // Иначе открываем форму
});

Функция показа:

function showSuccessMessage() {
 alert('Спасибо! Ваша заявка уже отправлена ранее.'); // Или модалка
}

Для всплывающих форм Tilda используйте их API: tildaModal.open(). Интегрируйте чек перед вызовом. Если форма в Zero Block, ID генерится автоматически — найдите его.

Полный рабочий код для tilda javascript форма

Соберём всё в один скрипт для T123. Замените селекторы на свои.

<script>
(function() {
 const FORM_KEY = 'tildaFormSubmitted_2026';
 const BUTTON_ID = 'open-form-btn'; // ID вашей кнопки
 const SUCCESS_SELECTOR = '.t-form__success'; // Класс успеха

 // Observer для успеха
 const observer = new MutationObserver((mutations) => {
 for (let mutation of mutations) {
 for (let node of mutation.addedNodes) {
 if (node.nodeType === 1 && (node.matches(SUCCESS_SELECTOR) || node.querySelector(SUCCESS_SELECTOR))) {
 localStorage.setItem(FORM_KEY, 'true');
 observer.disconnect();
 return;
 }
 }
 }
 });

 // Проверка при клике
 document.addEventListener('DOMContentLoaded', () => {
 const btn = document.getElementById(BUTTON_ID);
 if (btn) {
 btn.addEventListener('click', (e) => {
 if (localStorage.getItem(FORM_KEY)) {
 e.preventDefault();
 // Показать модалку успеха
 const modal = document.createElement('div');
 modal.innerHTML = '<div style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;border:1px solid #ccc;">Спасибо! Заявка отправлена ранее.</div>';
 document.body.appendChild(modal);
 setTimeout(() => modal.remove(), 3000);
 return false;
 }
 // Запустить observer при открытии
 observer.observe(document.body, { childList: true, subtree: true });
 });
 }
 });
})();
</script>

Тестируйте: отправьте форму, обновите страницу — кнопка покажет сообщение. Идеально для настройки формы tilda.

Тестирование настройки формы tilda и возможные проблемы

Запустите в инкогнито, очистите localStorage (F12 > Application > Local Storage). Отправьте форму — флаг сохранится? Кликните повторно — модалка успеха?

Проблемы:

• Observer не ловит: Уточните селектор в DOM после отправки.
• Множественные страницы: Дублируйте T123 или добавьте в настройки проекта.
• Мобильные: LocalStorage работает, но проверьте модалки на iOS.
• Конфликты: Уникальный ключ решает.

Официальные FAQ Tilda упоминают: код T123 выполняется после загрузки, так что DOM-ready обязателен.

Альтернативы для tilda формы обратной связи

Не фанат JS? Интегрируйте с Google Tag Manager — там теги на события форм. Или внешний сервис вроде FormKeep с webhook’ами на сервер (проверяет email/телефон).

Для pro: сохраняйте hash email’а в localStorage, чтобы юзер мог отправить с новым. Но для простых tilda формы хватит нашего подхода — 50 строк кода, ноль серверов.

Форма tilda zero block? Аналогично, только ID блока в селекторах.

Источники

1. Примеры полезных JS-скриптов
2. Как добавить свой HTML, CSS или Javascript-код?
3. Как подключить JavaScript в Tilda
4. How to Use LocalStorage in JavaScript
5. JavaScript’s MutationObserver API

Заключение

Настройка формы tilda с запретом дубликатов через localStorage и MutationObserver — надёжный хак для 2026 года, даже после обновлений Tilda. Добавьте T123, вставьте код, протестируйте — и повторные заявки уйдут в прошлое. Если трафик большой, комбинируйте с сервером, но для старта хватит клиента. Теперь ваши tilda формы станут чище и удобнее.