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 TIsendByEnter = true;
let TIticodezero = '#rec1603581511';
let TCformblock = '#rec1603398341';
let TCDsuccessElement = '.tc-success-text';
let TCD$ticodezero = $(TIticodezero);
let TI$formblock = $(TCformblock);
let TC$sendlink = TCD$ticodezero.find('[href="' + TCDsendlink + '"]');
tiCodeInit();
TC$sendlink.click(function () {
tiCodeSend();
});
TCD$ticodezero.on('keyup keypress', function (e) {
var TCDkeyCode = e.keyCode || e.which;
if (TCDkeyCode === 13 && TIsendByEnter) {
e.preventDefault();
tiCodeSend();
return false;
}
});
function tiCodeInit() {
tiCodeRemoveFields();
if (TCDsuccessElement && $(TCDsuccessElement).length) {
$(TCDsuccessElement).hide();
}
$(TCformblock + ' .js-form-proccess').each(function(){
this.addEventListener('tildaform:aftersuccess', tiCodeSuccess);
});
}
function tiCodeSend() {
if (tiCodeValidate()) return false;
tiCodeRemoveFields();
tiCodeCreateSimpleFields();
tiCodeCreateHiddenFields();
tiCodeCreateOtherFields();
tiCodeFillFields();
tiCodeCreateUploadFields();
$(TCformblock + ' .t-submit').click();
TCD$ticodezero.find('form').trigger('reset');
}
function tiCodeSuccess() {
if (TCDsuccessElement && $(TCDsuccessElement).length) {
$(TCDsuccessElement).css({'display':'','opacity':1});
}
}
function tiCodeValidate() {
let TCDErrors = [];
let TIcleanErrors = [];
TCD$ticodezero.find('form').each(function () {
window.tildaForm.hideErrors(this);
TCDErrors.push(...window.tildaForm.validate(this));
});
TCDErrors.forEach(item => {
if (item.obj !== 'none') TIcleanErrors.push(item);
});
TCD$ticodezero.find('form').each(function () {
window.tildaForm.showErrors(this, TIcleanErrors);
});
return window.tildaForm.showErrorInPopup(TCD$ticodezero.find('form'), TIcleanErrors);
}
function tiCodeRemoveFields() {
$(TCformblock + ' .t-form__inputsbox .t-input-group').remove();
TCD$ticodezero.find('.t-submit').hide();
TI$formblock.hide();
}
function tiCodeGetFieldHtml(name) {
return '<div class="t-input-group t-input-group_in">' +
'<div class="t-input-title t-descr t-descr_md"></div>' +
'<div class="t-input-block">' +
'<input type="text" name="' + name + '" class="t-input js-tilda-rule" value="" placeholder="' + name + '">' +
'<div class="t-input-error"></div></div></div>';
}
function tiCodeCreateSimpleFields() {
TCD$ticodezero.find('.js-tilda-rule').each(function(){
if($(this).parents('.t-upwidget').length==0){
let TCDname = $(this).attr('name');
if($(TCformblock + ' [name="'+TCDname+'"]').length==0){
$(TCformblock + ' .t-form__inputsbox').prepend(tiCodeGetFieldHtml(TCDname));
}
}
});
}
function tiCodeCreateOtherFields() {
TCD$ticodezero.find('.js-tilda-rule').each(function(){
let TCname = $(this).attr('name');
if($(this).is(':checkbox') || $(this).is(':radio')){
$(TCformblock + ' [name="'+TCname+'"]').val(
TCD$ticodezero.find('[name="'+TCname+'"]:checked').val()
);
} else {
$(TCformblock + ' [name="'+TCname+'"]').val($(this).val());
}
});
}
function tiCodeCreateHiddenFields() {
TCD$ticodezero.find('[type="hidden"][tabindex="-1"]:not(.js-tilda-rule)').each(function(){
let TIhname = $(this).attr('name');
$(TCformblock + ' .t-form__inputsbox').prepend(tiCodeGetFieldHtml(TIhname));
});
}
function tiCodeFillFields() {
TCD$ticodezero.find('[type="hidden"][tabindex="-1"]:not(.js-tilda-rule)').each(function(){
let TCfname = $(this).attr('name');
$(TCformblock + ' [name="'+TCfname+'"]').val($(this).val());
});
}
function tiCodeCreateUploadFields() {
TCD$ticodezero.find('.t-upwidget').each(function(){
let TCDfield = $(this).parents('.t-input-group').clone();
$(TCformblock + ' .t-form__inputsbox').prepend(TCDfield);
});
}
});
</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. Создаем создаем в зеро блок свою форму(можно использовать комбинацию из нескольких форм с различными типами полей ввода, расположенных в нужном вам порядке)
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках форм, у кнопок удаляем текст и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных и удаляем все стандартные поля чтобы форма была пустая. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем ниже формы зеро блока и стандартной формы
Для целей успеха ссылки брать из блока BF204N
Важно: в настройках формы не используем горизонтальный тип формы. Только вертикальное расположение полей
2. В настройках форм, у кнопок удаляем текст и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных и удаляем все стандартные поля чтобы форма была пустая. Если нужно перенаправлять пользователя на страницу "спасибо", то указываем ссылку в форме через "контент"
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем ниже формы зеро блока и стандартной формы
Для целей успеха ссылки брать из блока BF204N
Форма со стандартным popup окном в конце
Форма с выводом своего текста в конце
