Метод рабочий и обновлен 10.01.2026
Оглавление
Проблема
Делая сайты на Тильде для наших клиентов, мы столкнулись с такой проблемой, как невозможность редактировать стандартное всплывающее уведомление об отправке формы Тильды. Максимум, что можно сделать с помощью кода — изменить стандартный зелёный цвет. Но что, если вы хотите добавить туда кнопку, ссылки на социальные сети или опрос? Рассказываем ниже.
Решение
Мы написали простой код, который поможет вам заменить стандартное уведомление Тильды на абсолютно любой zero-block. Для реализации этой идеи достаточно выполнить пару простых шагов. Ниже представлена пошаговая инструкция по замене уведомления об успешной отправке формы на сайте Tilda на ваш собственный zero-block.
Простой код для замены стандартного уведомления об успешной отправке формы на Тильде на ваше - ниже
Инструкция
Итак, давайте пройдёмся пошагово.
1. Блоку, в котором у нас расположена форма, нужно присвоить класс:
uc-manufact-popup
2. Добавляем на сайт Зеро-блок и верстаем своё собственное всплывающее окно. Обязательно удалите белый фон в настройках блока, чтобы задний фон вашего будущего всплывающего окна был прозрачный. Сюда вы можете добавить что угодно, сделать любой дизайн вашего нового окна успеха вместо стандартного Тильдовского. Не забудьте пробежаться по внешнему виду блока на всех устройствах.
3. После того как сделали наше новое окно успешной отправки формы, добавляем ссылку, по которой будет открываться всплывающее окно. Для этого добавляем на страницу блок T1093. В настройках этого блока добавляем ссылку открытия #uspeh-popup и добавляем наш созданный зеро-блок.
4. Финальный шаг — добавляем на страницу блок T123 и в него копируем код, представленный ниже. В коде никаких изменений вносить не нужно.
<a href="#uspeh-popup" class="uspehform"></a>
<script>
$(document).ready(function () {
let lock = false;
$('.uc-manufact-popup').on('click', '.t-submit', function () {
if (lock) return;
lock = true;
const timer = setInterval(function () {
const $popup = $('#tildaformsuccesspopup-new'); // весь серый фон + обёртка
if ($popup.length && $popup.hasClass('t-popup_show')) {
clearInterval(timer);
// Закрываем стандартный попап полностью (и фон тоже)
$popup.removeClass('t-popup_show').hide();
$popup.find('.t-form-success-popup__wrapper').hide();
// На всякий: снять блокировку скролла, если Тильда её повесила
$('body').removeClass('t-body_popupshowed t-body_scroll-locked')
.css({ overflow: '', paddingRight: '' });
// Открываем твой зеро-попап
$('.uspehform')[0].click();
// отпускаем через небольшую паузу
setTimeout(function(){ lock = false; }, 1200);
}
}, 150);
// страховка: чтобы интервал не крутился бесконечно
setTimeout(function () {
clearInterval(timer);
lock = false;
}, 8000);
});
});
</script>
Изменения будут видны только на опубликованной странице!
Часто задаваемые вопросы
1. Можно ли использовать несколько таких всплывающих окон на странице?
Оптимальное количество — от 5 до 10 изображений. Этого достаточно, чтобы показать товар с разных ракурсов, крупным планом и в контексте использования, не перегружая карточку.
2. Этот метод работает на мобильных устройствах?
Да, если вы верно настроите адаптивность zero-блока, он будет отображаться корректно на всех устройствах.
3. Можно ли добавить видео или анимацию в новое всплывающее окно?
Конечно. Zero-блок позволяет вставлять любые элементы: видео, анимации, кнопки, изображения и даже формы.
4. Будет ли работать этот способ, если использовать встроенную интеграцию с CRM?
Да, способ не влияет на отправку данных формы. Он лишь заменяет визуальную часть уведомления об успехе.
5. Нужно ли знание кода для реализации?
Минимальное. Вам нужно только вставить готовый код в блок T123 и следовать инструкции.
6. Что делать, если всплывающее окно не появляется?
Проверьте правильность указания классов, наличие якоря и убедитесь, что все блоки корректно добавлены и опубликованы.
8 ответов
все сделала, по написанному, получилось, но проблема в том, что открылось поверх стандартного окна и когда закрываешь мое, сделанное в зероблок — видишь стандартное, которое нужно отдельно закрывать
подскажите как этого можно избежать?
К сожалению с последними обновлениями Тильда заменила окно успеха на новое, поэтому наш код временно не актуален. Мы обязательно обновим инструкцию и уведомим вас по почте когда сделаем это!)
Метод обновлен, новый код снова работает корректно и готов к использованию 🙂
Почему-то не работает код
Скоро обновим статью и добавим новый рабочий код
Метод обновлен, новый код снова работает корректно и готов к использованию 🙂
Добрый день! Полезный материал, спасибо! А как только цвет поменять – вы упомянули в начале статьи о такой возможности
Вы можете связаться с нашей командой разработки с помощью контактов на сайте – https://manufact.pro/contacts. Если задачка простая то вам оперативно помогут.)