URL скопирован в буфер обмена!
Как сделать свою уникальную форму в Zero Block на Tilda?
Модификация поможет сделать свою кастомную форму на Zero Block используя разные поля ввода и кнопку.
Модификация обновлена. Исправлена ошибка блокировки скрола страницы после отправки формы.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
id Zero Block с формой
id блока BF204N
Ссылка для кнопки отправки
Включить отправку формы кнопкой Enter?
Класс для своего текста "Спасибо"
<!--TICODE--><!-- Библиотека модификаций для Тильда hhttps://ticode.dev -->
<!--TCD022--><script>
$(document).ready(function () {
let TCDsendlink = '#sendform';
let TCDsendByEnter = true;
let TCDsuccessPopup = true;
let ticodezero = '#rec517216497';
let formblock = '#rec517216498';
let successText = 'Спасибо! Данные были отправлены!';
let successElement = '.tc-success-text';
let $ticodezero = $(ticodezero);
let $formblock = $(formblock);
let $TCDsendlink = $ticodezero.find('[href="' + TCDsendlink + '"]');
init();
$TCDsendlink.click(function () {
send();
});
$ticodezero.on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13 && TCDsendByEnter) {
e.preventDefault();
send();
return false;
}
});
$('form').submit(function(e) {
var scrollPosition = $(window).scrollTop();
send();
$(window).scrollTop(scrollPosition);
return false;
});
function init() {
removeFields();
if (successElement !== '' && $(successElement).length > 0) {
$(successElement).css({'display': 'none'});
}
if (!TCDsuccessPopup) {
$('[data-zf="success-style"]').remove();
} else {
$('body').append(getPopupHtml());
$('.t-form-success-popup__close-icon').click(function(){
$('.t-form-success-popup').css({'display': 'none'});
$('body').removeClass('t-body_success-popup-showed');
});
$('.t-form-success-popup').click(function(e){
if ($(e.target).hasClass('t-form-success-popup')) {
$('.t-form-success-popup').css({'display': 'none'});
$('body').removeClass('t-body_success-popup-showed');
}
});
}
let forms = document.querySelectorAll(formblock + ' .js-form-proccess');
Array.prototype.forEach.call(forms, function (form) {
form.addEventListener('tildaform:aftersuccess', function () {
success();
});
});
}
function send() {
if (validate()) return false;
removeFields();
createSimpleFields();
createHiddenFields();
createOtherFields();
fillFields();
createUploadFields();
$(formblock + ' .t-submit').click();
$(ticodezero + ' form').trigger('reset');
}
function success() {
if (TCDsuccessPopup) $('.t-form-success-popup').css({'display': 'block'});
if (successElement !== '' && $(successElement).length > 0) {
$(successElement).css({'display': '', 'opacity': 1});
$(successElement + ' .tn-atom').css({'display': '', 'opacity': 1});
}
$('body').removeClass('t-body_success-popup-showed');
}
function validate() {
let formNum = ticodezero.replace("#rec", "");
let $form = $('[name="form' + formNum + '"]');
let arErrors = [];
let arErrorsClean = [];
$form.each(function (index, element) {
window.tildaForm.hideErrors(element);
arErrors.push(...window.tildaForm.validate(element));
});
arErrors.forEach(function(item, index, array){
if (item.obj !== 'none') arErrorsClean.push(item);
});
window.tildaForm.showErrors($form, arErrorsClean);
return window.tildaForm.showErrorInPopup($form, arErrorsClean);
}
function removeFields() {
$(formblock + ' .t-form__inputsbox .t-input-group').remove();
$ticodezero.find('.t-submit').hide();
$formblock.hide();
}
function getFieldHtml(name) {
let html = '<div class="t-input-group t-input-group_in">\n' +
' <div class="t-input-title t-descr t-descr_md" data-redactor-toolbar="no"></div>\n' +
' <div class="t-input-block">' +
' <input type="text" name="' + name + '" class="t-input js-tilda-rule " value="" placeholder="' + name + '">\n' +
' <div class="t-input-error"></div>\n' +
' </div>\n' +
'</div>';
return html;
}
function getPopupHtml() {
let html = '<div class="t-form-success-popup" style="display: none; opacity: 1;" id="tildaformsuccesspopup">\n' +
' <div class="t-form-success-popup__window">\n' +
' <div class="t-form-success-popup__wrapper">\n' +
' <svg class="t-form-success-popup__close-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14"\n' +
' viewBox="0 0 23 23">\n' +
' <g fill-rule="evenodd">\n' +
' <path d="M0 1.41L1.4 0l21.22 21.21-1.41 1.42z"></path>\n' +
' <path d="M21.21 0l1.42 1.4L1.4 22.63 0 21.21z"></path>\n' +
' </g>\n' +
' </svg>\n' +
' <svg width="50" height="50" fill="#62C584">\n' +
' <path d="M25.1 49.28A24.64 24.64 0 0 1 .5 24.68 24.64 24.64 0 0 1 25.1.07a24.64 24.64 0 0 1 24.6 24.6 24.64 24.64 0 0 1-24.6 24.61zm0-47.45A22.87 22.87 0 0 0 2.26 24.68 22.87 22.87 0 0 0 25.1 47.52a22.87 22.87 0 0 0 22.84-22.84A22.87 22.87 0 0 0 25.1 1.83z"></path>\n' +
' <path d="M22.84 30.53l-4.44-4.45a.88.88 0 1 1 1.24-1.24l3.2 3.2 8.89-8.9a.88.88 0 1 1 1.25 1.26L22.84 30.53z"></path>\n' +
' </svg>\n' +
' <div class="t-form-success-popup__text t-descr t-descr_sm" id="tildaformsuccesspopuptext">' + successText + '\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
return html;
}
function createSimpleFields() {
$(ticodezero + ' .js-tilda-rule').each(function(index) {
if ($(this).parents('.t-upwidget').length == 0) {
let name = $(this).attr('name');
let html = getFieldHtml(name);
if ($(ticodezero + ' .js-tilda-rule').eq(index).attr('type') == 'radio' && $(formblock + ' [name="' + name + '"]').length >= 1) {
} else {
$(formblock + ' .t-form__inputsbox').prepend(html);
}
}
});
}
function createHiddenFields() {
$(ticodezero + ' [type="hidden"][tabindex="-1"]:not(.js-tilda-rule)').each(function (index) {
let name = $(this).attr('name');
let html = getFieldHtml(name);
$(formblock + ' .t-form__inputsbox').prepend(html);
});
}
function createOtherFields() {
$(ticodezero + ' .js-tilda-rule').each(function (index) {
let name = $(this).attr('name');
if ($(ticodezero + ' .js-tilda-rule').eq(index).attr('type') == 'checkbox') {
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]:checked').val());
} else if ($(ticodezero + ' .js-tilda-rule').eq(index).hasClass('t-radio')) {
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]:checked').val());
} else if ($(ticodezero + ' .js-tilda-rule').eq(index).hasClass('t-checkbox')) {
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]:checked').val());
} else if ($(ticodezero + ' .js-tilda-rule').eq(index).hasClass('t-img-select')) {
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]:checked').val());
} else {
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]').val());
}
});
}
function fillFields() {
$(ticodezero + ' [type="hidden"][tabindex="-1"]:not(.js-tilda-rule)').each(function (index) {
let name = $(this).attr('name');
$(formblock + ' [name="' + name + '"]').val($(ticodezero + ' [name="' + name + '"]').val());
});
}
function createUploadFields() {
$(ticodezero + ' .t-upwidget').each(function (index) {
let field = $(this).parents('.t-input-group').clone();
$(formblock + ' .t-form__inputsbox').prepend(field);
});
}
});
</script>
<style media="screen" data-zf="success-style">
.t-form-success-popup {
display: none;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
overflow-y: auto;
cursor: pointer;
}
.t-body_success-popup-showed {
height: auto;
min-height: auto;
overflow: auto;
}
.t-form-success-popup__window {
width: 100%;
max-width: 400px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0px;
right: 0px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.t-form-success-popup__wrapper {
background-color: #ffffff;
padding: 40px 40px 50px;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
position: relative;
cursor: default;
}
.t-form-success-popup__text {
padding-top: 20px;
color: #000000;
}
.t-form-success-popup__close-icon {
position: absolute;
top: 14px;
right: 14px;
cursor: pointer;
fill: #000000;
}
@media screen and (max-width: 480px) {
.t-form-success-popup__window {
padding: 20px 10px;
}
.t-form-success-popup__wrapper {
padding: 20px 10px 30px;
}
}
</style>
<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. Создаем создаем в зеро блок свою форму(можно использовать комбинацию из нескольких форм с различными типами полей ввода, расположенных в нужном вам порядке)
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Для целей успеха ссылки брать из блока BF204N
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Для целей успеха ссылки брать из блока BF204N
Форма со стандартным popup окном в конце
Форма с выводом своего текста в конце
