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="TCDEndPopup841" style="display:none;" role="button" aria-haspopup="dialog"></a>
<script>
document.addEventListener("DOMContentLoaded", function () {
var TCDforms841 = "#rec1353493701, #rec1364636181";
var TCDidonlyfrm841 = ["form1447056693"];
var TCDAnchor841 = document.querySelector(".TCDEndPopup841");
if (!TCDAnchor841) {
TCDAnchor841 = document.createElement("a");
TCDAnchor841.href = "#tc-success";
TCDAnchor841.className = "TCDEndPopup841";
TCDAnchor841.style.display = "none";
document.body.appendChild(TCDAnchor841);
}
var Tildalstfrm = null;
var Tctimerfrm = 2000;
function TCDHidePopup(el) {
if (!el) return;
try {
el.style.setProperty("position", "absolute", "important");
el.style.setProperty("left", "-5000px", "important");
el.style.setProperty("opacity", "0", "important");
el.style.setProperty("visibility", "hidden", "important");
el.style.setProperty("pointer-events", "none", "important");
} catch (e) {}
var win = el.querySelector(".t-form-success-popup__window");
if (win) {
try {
win.style.setProperty("position", "absolute", "important");
win.style.setProperty("left", "-5000px", "important");
} catch (e) {}
}
}
function TCDRestoreScroll() {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.classList.remove("t-popup-shown", "t-body_popup_show");
}
function TCDOpenCustom() {
if (TCDAnchor841) {
TCDAnchor841.click();
setTimeout(TCDRestoreScroll, 50);
}
}
function TCDHideAllPopups() {
var popups = document.querySelectorAll('#tildaformsuccesspopup, #tildaformsuccesspopup-new, .t-form-success-popup_new');
popups.forEach(function(popup) {
if (!popup) return;
var closeIcon = popup.querySelector && popup.querySelector('.t-form-success-popup__close-icon');
if (closeIcon) closeIcon.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
TCDHidePopup(popup);
popup.style.transition = 'opacity 0.2s ease';
popup.style.opacity = '0';
setTimeout(function() {
try { popup.style.display = 'none'; } catch (e) {}
popup.classList && popup.classList.remove('t-popup_show');
}, 250);
});
}
function TCDOnFormSuccess(form) {
if (!form) return;
var rec = form.closest("[id^='rec']");
if (!rec) return;
var allowedList = Array.prototype.slice.call(document.querySelectorAll(TCDforms841 || ""));
var isAllowedRec = allowedList.some(function(el) { return el.id === rec.id; });
if (!isAllowedRec) return;
Tildalstfrm = rec.id;
setTimeout(function(){ Tildalstfrm = null; }, Tctimerfrm);
TCDHideAllPopups();
var Tildapopwarp = form.closest(".t-popup");
if (Tildapopwarp) {
Tildapopwarp.style.display = "none";
TCDRestoreScroll();
}
setTimeout(TCDOpenCustom, 50);
}
function TCDAttachObservers(form) {
if (!form || form.__tcd_attached) return;
form.__tcd_attached = true;
form.addEventListener("tildaform:afterSuccess", function () {
TCDOnFormSuccess(form);
});
var mo = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
var successBox = form.querySelector(".js-successbox");
if (successBox) {
var comp = window.getComputedStyle(successBox);
if (comp.display !== "none" && comp.visibility !== "hidden" && successBox.textContent.trim() !== "") {
TCDOnFormSuccess(form);
return;
}
}
if (m.type === "attributes" && m.attributeName === "class") {
var cls = form.className || "";
if (cls.indexOf("js-send-form-success") !== -1 || cls.indexOf("js-form-success") !== -1 || cls.indexOf("t-form_sent") !== -1) {
TCDOnFormSuccess(form);
return;
}
}
});
});
mo.observe(form, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style"] });
}
function TCDShouldWatchForm(form) {
if (!TCDforms841 || TCDforms841.trim() === "") return true;
var rec = form.closest("[id^='rec']");
if (rec) {
var list = Array.prototype.slice.call(document.querySelectorAll(TCDforms841));
if (list.indexOf(rec) !== -1) return true;
}
if (TCDidonlyfrm841.indexOf(form.id) !== -1) return true;
var popup = form.closest(".t-popup");
if (popup) {
var innerRec = popup.querySelector("[id^='rec']");
if (innerRec) {
var list2 = Array.prototype.slice.call(document.querySelectorAll(TCDforms841));
if (list2.indexOf(innerRec) !== -1) return true;
}
}
return false;
}
function TCDWatchForm(form) {
if (!form || !(form instanceof HTMLElement)) return;
if (!TCDShouldWatchForm(form)) return;
TCDAttachObservers(form);
}
var allForms = document.querySelectorAll("form.t-form");
allForms.forEach(TCDWatchForm);
var TCDObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(n) {
if (!(n instanceof HTMLElement)) return;
if (n.matches && n.matches(".t-popup, .t-form, form.t-form")) {
var forms = n.querySelectorAll ? n.querySelectorAll("form.t-form") : [];
if (n.matches && n.matches("form.t-form")) forms = Array.prototype.slice.call(forms).concat(n);
forms.forEach(TCDWatchForm);
}
var tiwarpopp = (n.id === "tildaformsuccesspopup" || n.id === "tildaformsuccesspopup-new" || n.classList.contains('t-form-success-popup_new'));
if (tiwarpopp && Tildalstfrm) {
var closeIcon = n.querySelector && n.querySelector(".t-form-success-popup__close-icon");
if (closeIcon) closeIcon.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
TCDHidePopup(n);
setTimeout(TCDOpenCustom, 50);
}
});
if (m.type === "attributes" && m.target) {
if (m.target.matches && m.target.matches("form.t-form")) TCDWatchForm(m.target);
}
});
});
TCDObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "id"] });
var TCDfmpops = document.querySelectorAll(".t-popup form.t-form");
TCDfmpops.forEach(TCDWatchForm);
});
</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. Блок кода размещаем внизу сайта.
Форма
Спасибо за заявку!
Переходи в наш ТГ канал чтобы следить за выходом новых модификаций
