Проблема
Делая сайты на Тильде для наших клиентов, мы столкнулись с такой проблемой, как невозможность редактировать стандартное всплывающее уведомление об отправке формы Тильды. Максимум, что можно сделать с помощью кода — изменить стандартный зелёный цвет. Но что, если вы хотите добавить туда кнопку, ссылки на социальные сети или опрос? Рассказываем ниже.
Решение
Простой код для замены стандартного уведомления об успешной отправке формы на Тильде на ваше - ниже
Инструкция
Итак, давайте пройдёмся пошагово.
1. Блоку, в котором у нас расположена форма, нужно присвоить класс:
uc-manufact-popup
2. Добавляем на сайт Зеро-блок и верстаем своё собственное всплывающее окно. Обязательно удалите белый фон в настройках блока, чтобы задний фон вашего будущего всплывающего окна был прозрачный. Сюда вы можете добавить что угодно, сделать любой дизайн вашего нового окна успеха вместо стандартного Тильдовского. Не забудьте пробежаться по внешнему виду блока на всех устройствах.
3. После того как сделали наше новое окно успешной отправки формы, добавляем ссылку, по которой будет открываться всплывающее окно. Для этого добавляем на страницу блок T1093. В настройках этого блока добавляем ссылку открытия #uspeh-popup и добавляем наш созданный зеро-блок.
4. Финальный шаг — добавляем на страницу блок T123 и в него копируем код, представленный ниже. В коде никаких изменений вносить не нужно.
<a href="#uspeh-popup" class="uspehform"></a>
<script>
$(document).ready(function () {
$('.uc-manufact-popup').delegate(".t-submit", "click", function(){
setTimeout(function(){
if ( $('.uc-manufact-popup .t-form').hasClass("js-send-form-success")){ $('.uspehform')[0].click()};
}, 500);
});
});
</script>
