URL скопирован в буфер обмена!
Как сделать кастомное окно "спасибо" для форм в Zero Block?
С помощью данной модификации можно создать свое окно "спасибо", которое будет показываться после отправки формы в Zero Block. В качестве окна можно использовать popup на зеро блоке или стандартный popup.
Модификация обновлена. Добавлена поддержка форм в popup окне. Один скрипт теперь можно привязать к множеству форм. Для этого нужно указать id блоков через запятую
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Id зеро блоков с формой
Ссылка на popup
Тип форм в зеро блоке
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD070--><a href="#tc-success" class="TCDEndPopup"></a>
<script>
document.addEventListener("DOMContentLoaded", function () {
var TCDGlobalStyle = document.createElement("style");
TCDGlobalStyle.id = "cost";
TCDGlobalStyle.innerHTML = "#tildaformsuccesspopup{position:absolute!important;left:-5000px;}";
var TCDformselector = "#rec1353493701, #rec1364636181";
var styleHideSuccess = document.createElement("style");
styleHideSuccess.id = "tcd-hide-success";
styleHideSuccess.innerHTML = TCDformselector.split(",").map(sel => sel.trim() + " .t-form__successbox { display: none !important; }").join("\n");
document.head.appendChild(styleHideSuccess);
function TiCodeSuccesPopup(form) {
if (!form) return;
var button = form.querySelector(".t-submit");
if (!button) return;
button.addEventListener("click", function () {
if (!document.getElementById("cost")) {
document.head.appendChild(TCDGlobalStyle);
}
var timerTi = setInterval(function () {
if (form.classList.contains("js-send-form-success")) {
clearInterval(timerTi);
document.querySelector(".t-form-success-popup")?.click();
document.querySelector(".TCDEndPopup")?.click();
setTimeout(function () {
TCDGlobalStyle.remove();
}, 1000);
}
}, 500);
});
}
document.querySelectorAll(TCDformselector).forEach(function (rec) {
var form = rec.querySelector("form");
if (form) TiCodeSuccesPopup(form);
});
var popupformTCTilda = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType === 1 && node.matches(TCDformselector)) {
var form = node.querySelector("form");
if (form) TiCodeSuccesPopup(form);
}
});
});
});
popupformTCTilda.observe(document.body, { childList: true, subtree: true });
document.addEventListener("click", function (event) {
if (
!event.target.closest(TCDformselector + " form") &&
!event.target.classList.contains("t-form-success-popup") &&
!event.target.classList.contains("TCDEndPopup")
) {
TCDGlobalStyle.remove();
}
});
});
</script>
<script> (function updateRecordType() { const scriptElement = document.currentScript; if (scriptElement) { const recordElement = scriptElement.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем форму в Zero Block, копируем id блока и вставляем в генератор. Если у вас несколько форм на странице и во всех нужно кастомное окно спасибо, то указываем id через запятую. Например: #rec1353493701, #rec1364636181
Важно! Если форма или одна из форм находится в popup, в поле «Тип форм» выбираем «Форма в popup».
2. Создаем второй Zero Block, который будем показывать в качестве окна "спасибо";
3. Создаем блок Т1093 и связываем его с зеро блоком "спасибо". Для этого в "контенте" блока Т1093 указываем id блока "спасибо" и указываем ссылку #tc-success
4. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем внизу сайта.
Важно! Если форма или одна из форм находится в popup, в поле «Тип форм» выбираем «Форма в popup».
2. Создаем второй Zero Block, который будем показывать в качестве окна "спасибо";
3. Создаем блок Т1093 и связываем его с зеро блоком "спасибо". Для этого в "контенте" блока Т1093 указываем id блока "спасибо" и указываем ссылку #tc-success
4. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем внизу сайта.
Форма
Спасибо за заявку!
Переходи в наш ТГ канал чтобы следить за выходом новых модификаций
