ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК
8 (800) 630-21-22
Ежедневно с 09.00 до 19.00
ФИЛЬТРЫ ДЛЯ ВОДЫ
Круглосуточная доставка
Установка бесплатно
Одобрено педиатрами
Чистый родник прямо на вашей кухне. Рекомендовано детям от 5 месяцев
Купите фильтр и получите сменный модуль в подарок
Нажимая кнопку «Заказать фильтр», Вы соглашаетесь на обработку персональных данных

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

Сохранив всю штатную интеграцию Tilda
Более новая версия способа: находиться по адресу https://mo-tilda.ru/formavzerogorizont
Cоздание горизонтальной формы из блока BF203 N
Для сохранения полного функционала интеграции с другими сервисами и простоты визуальной настройки, просто переместим штатную форму BF203N в ZeroBlock

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

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

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

И не забудьте настроить ZeroBlock для всех экранов!
P.S. На маленьких экранах форма переходит в вертикалный формат 

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

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