Как создать открытую форму в ZeroBlock за 9 шагов для Tilda

Сохранив всю штатную интеграцию Tilda

Более новая версия способа: находиться по адресу https://mo-tilda.ru/formavzerovertical

Для сохранения полного функционала интеграции с другими сервисами и простоты визуальной настройки, просто переместим штатную форму BF204N в ZeroBlock

Порядок действий (4 шага - 4 фото и т.д.)

Создаём ZeroBlock (Нулевой блок)
Создаём в ZeroBlok'е элемент Shape и ставим примерный размер (например 300х400 px), удаляем фон, делаем border 1px любого цвета, сохраняем и выходим из ZeroBlock'а (border нужен для удобства, т.к. формы не будет видно в редакторе)
Создаём форму BF204N (Форма и кнопка►BF204N)
Создаём блок T123 HTML ( Другое►Т123) и вставляем в него наш код (расположен в конце страницы)

5. Через диспетчер кода узнаём class нашего shape в ZeroBlock (просто кликаете на shape правой кнопкой мыши и в меню нажимаете посмотреть код/исследовать элемент) Только цифры (Пример - 391855831512051368422)
6. В нашем скрипте заменяем цифры 391855831512051368422 на свои цифры из вашего класса
7. Заходим в настройки блока формы BF204N и копируем id код (только цифры), вставляем эти цифры вместо 39102526 в нашем скрипте
8. Также копируем id ZeroBlock'а (в настройках, только цифры) и вставляем в скрипт вместо значения 39185583
9. Всё дорогие друзья. Остаётся настроить форму (в штатном режиме в блоке BF204N)
Также дополнительные настройки добавил в css:
- цвет таблички об успешной отправке данных
- высота полей ввода
- отступ между полями
- цвет при наведении для кнопки в Zero
- высота и плавность перехода для кнопки в Zero

И не забудьте настроить ZeroBlock для всех экранов!


<script type="text/javascript">

//Добавляем контейнер для формы в наш shape в zero-block
$(".t396__elem.tn-elem.tn-elem__391855831512051368422 .tn-atom").append("<div></div>");
//Прописываем класс нашему новому контейнеру
$(".t396__elem.tn-elem.tn-elem__391855831512051368422 .tn-atom div").addClass('t678 zero');
//Удаляет псевдо рамку при публикации в нашем shape в zero-block
$('.t396__elem.tn-elem.tn-elem__391855831512051368422 .tn-atom').css('border-width', '0');
//клонируем нашу форму в ZeroBlock
$("#form39102526").clone().appendTo(".t678.zero");
//Скрывает табличку с ошибкой заполнения
$(".t-form__errorbox-middle").hide();
//Скрывает надписи об ошибке заполнения
$(".t-input-error").hide();
//Скрывает родительскую форму
$("#rec39102526").hide();
</script>

<style type="text/css">
/*Задаём цвет таблички об успешной отправке данных */    
    .t-form__successbox{
        background:#02a0c7 !important;
    }
/*Высота полей ввода */    
    #rec39185583 input{
    height: 45px !important;
    }
/*Отступ между полями */     
    #rec39185583 t-input-group{
    margin-bottom: 20px !important;
    }
/*Задаём цвет при наведении для кнопки в Zero */
    #rec39185583 button:hover {
    background-color:#fad60a !important;
    }   
/*Задаём высоту и плавность перехода для кнопки в Zero */
    #rec39185583 button{
    height: 50px !important;
    transition: all 0.3s ease-in-out;
    }       
    
 </style>