URL скопирован в буфер обмена!
Как сделать свою уникальную форму в Zero Block на Tilda?
Модификация поможет сделать свою кастомную форму на Zero Block используя разные поля ввода и кнопку.
Модификация обновлена. Исправлена ошибка блокировки скрола страницы после отправки формы.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
id Zero Block с формой
id блока BF204N
Ссылка для кнопки отправки
Включить отправку формы кнопкой Enter?
Отключить стандартный попап "Спасибо"?
Класс для своего текста "Спасибо"
Настройки стандартного popup блока "Спасибо"
Цвет фона popup
Цвет крестика popup
Цвет иконки popup
Цвет текста popup
Радиус скругления popup
Текст popup
<!--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>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем создаем в зеро блок свою форму(можно использовать комбинацию из нескольких форм с различными типами полей ввода, расположенных в нужном вам порядке)
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Примечание! После отправки данных можно показывать свой текст и другие элементы. Для этого нужным элементам указываем класс из поля "класс для своего текста спасибо". По стандарту класс: tc-success-text. Скрипт скроет эти элементы и покажет их после отправки формы вместе или вместо стандартного popup.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Для целей успеха ссылки брать из блока BF204N
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Примечание! После отправки данных можно показывать свой текст и другие элементы. Для этого нужным элементам указываем класс из поля "класс для своего текста спасибо". По стандарту класс: tc-success-text. Скрипт скроет эти элементы и покажет их после отправки формы вместе или вместо стандартного popup.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Для целей успеха ссылки брать из блока BF204N
Форма со стандартным popup окном в конце
Форма с выводом своего текста в конце
