Стилизация или замена всплывающего окна об успешной отправке формы на Tilda

Метод рабочий и обновлен 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>

				
			

Изменения будут видны только на опубликованной странице!

Спасибо за внимание.

Пишите комментарии, делитесь статьёй в социальных сетях с помощью кнопок ниже и подписывайтесь на рассылку в нашем блоге. Мы всегда рады новым гостям!

6 ответов

  1. все сделала, по написанному, получилось, но проблема в том, что открылось поверх стандартного окна и когда закрываешь мое, сделанное в зероблок — видишь стандартное, которое нужно отдельно закрывать

    подскажите как этого можно избежать?

    1. К сожалению с последними обновлениями Тильда заменила окно успеха на новое, поэтому наш код временно не актуален. Мы обязательно обновим инструкцию и уведомим вас по почте когда сделаем это!)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Другие интересные материалы в нашем блоге
Все статьи
Как сделать любой блок закрывающимся по клику на любой элемент на Tilda

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

Читать »
SEO обложка статьи - агентство по продвижению и рекламе - сайт, поисковая выдача, продвижение SEO иллюстрация - блог MANUFACT PRO
SEO
Вот почему вашего сайта может не быть в поисковой выдаче

Не можете найти свой сайт в результатах выдачи поисковиков? Причин, по которым вашего сайта нет в поисковой выдаче Яндекс и Google, может быть много. В этой статье объясняем, в чем именно может быть проблема.

Читать »
Способы увеличить конверсию на сайте - обложка статьи MANUFACT PRO - ракета, доска, рост, увеличение иллюстрация
Все статьи
Простые и действенные методы увеличить конверсию на сайте

Чтобы увеличить конверсию в онлайн магазине или на лендинге, нужно работать над удобством сайта для пользователя. Как сделать это с помощью UX, копирайтинга и психологии?

Читать »
Тильда Tilda иллюстрация - блог агентства по разработке сайтов - МАНУФАКТ ПРО
Разработка сайтов
Новенькое в Tilda: дайджест о новых функциях

Собрали для вас все самые интересные новые функции Тильда! Обновления блоков, новые функции личного кабинета и другие доработки, которые сделали сайты еще удобнее.

Читать »
Фотостудия для предметной съемки — камера на штативе — стол с лампой и реквизитом — интерфейс кадра на прозрачном экране
Все статьи
Фото для интернет магазина: как создать продающие изображения товара

Как влияют фото на решение о покупке? Какие снимки действительно продают? Примеры, тест и практические советы по созданию качественных изображений товара.

Читать »
MANUFACT это Digital Agency состоящее из специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.
Выжимки из наших статей и уникальные материалы мы публикуем в нашем Телгерам-канале. Подписывайтесь, чтобы ничего не пропустить.
Зачитались?

Оставьте свой email и получайте актуальный материал от команды MANUFACT.

НУЖЕН САЙТ ИЛИ РЕКЛАМА?
При заказе сайта в нашей студии, бесплатно настроим эффективную рекламу в Google

Зачитались?

Оставьте нам свой e-mail адрес и получайте актуальный материал от команды MANUFACT