Стилизация или замена всплывающего окна об успешной отправке формы на 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 не будет опубликован. Обязательные поля помечены *

Другие интересные материалы в нашем блоге
Бизнес
10 причин, почему ваш бизнес нуждается в профессиональном веб-сайте

Узнайте, почему профессиональный веб-сайт важен для вашего бизнеса. 10 ключевых причин от digital агентства manufact.pro, которые помогут вам улучшить онлайн-присутствие и увеличить продажи.

Читать »
блог рекламного агентства - квиз сайт иллюстрация - статья блога MANUFACT PRO
Интернет-маркетинг
Что такое quiz-сайт

Разбираемся, что такое quiz-сайт, какие бывают квизы и как они помогают эффективнее продавать товары и услуги. Приводим примеры хороших квиз-сайтов.

Читать »
блог диджитал агентства - хостинг облачное хранилище иллюстрация - статья блога MANUFACT PRO
Инструкции
Tilda и белорусский хостинг

Настройка сайта на Тильде в связи с белорусским законодательством. Следуйте закону с помощью правильной настройки DNS.

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

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

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

Зачитались?

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