Как настроить форму в зеро блоке тильда

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) В Zero block создаем форму и добавляем нужные нам поля.

2) Добавляем код в блок T123. Код 1 для двух колонок, код 2 для трех колонок.

3) В коде заменяем .tn-elem__986 168 601 554 888 163 328 на class формы из Zero block.

Если нужно чтобы кнопка была по центру формы, добавляем код 3, заменив в нем class формы из Zero block.

Если нужно что бы на экранах 960px и меньше была стандартная форма, в одну колонку, применяем код 4.

Формы в 2 или 3 колонки в Zero Block
Код 1: на 2 колонки

   .tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 50% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit 

Код 2: на 3 колонки

   .tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 33.33% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit 

Код 3: ставит кнопку формы по центру

   .tn-elem__986092821554888101247 .tn-form__submit 

Код 4: для экранов меньше 960px будет стандартная форма

Как настроить форму приема данных

Посмотрите видеоурок о том, как добавить настроить форму или прочитайте подробную инструкцию ниже.

Формы приема данных — блоки с полями, в которых посетители сайта вводят информацию (email, телефон), а вы получаете ее в сервисы приема данных.

Блоки с формами находятся в категории «Форма», также несколько блоков есть в категории «Обложка».

Готовые страницы опросов (форм с множеством полей) можно найти в шаблонах, в категории «Анкеты».

Рассказываем, как настроить поля в формах, отредактировать их внешний вид и как посмотреть полученные заявки внутри интерфейса Тильды.

Редактирование полей формы

В одной форме может быть до 100 полей.

Поля в форме настраиваются в меню «Контент» формы во вкладке «Поля для ввода».

Откройте меню «Контент» блока с формой
Перейдите в раздел «Поля для ввода»

Для каждого поля в форме есть отдельная карточка, в которой можно задать тип поля, заголовок и подзаголовок, подсказку значения, имя переменной и обязательность заполнения поля.

Заголовок поля — напишите, какую информацию нужно ввести, например, «Ваше полное имя». Этот текст выводится над полем.

Подзаголовок поля — если необходимо, расшифруйте заголовок, дайте инструкцию, например, «Укажите имя, фамилию и отчество». Этот текст выводится над полем, после заголовка.

Подсказка значения — напишите пример, как должно быть заполнено поле. Например, «Михайлов Сергей Александрович». Этот текст виден внутри поля до ввода в него данных.

Обязательно для заполнения — поставьте галочку, чтобы невозможно было отправить пустое поле, если наличие информации в этом поле критично.

Имя переменной задается по умолчанию в зависимости от типа поля. Если сервис приема данных из форм требует определенное имя переменной, то его можно поменять. Например, свои заранее заданные имена переменных есть у Mailchimp и Bitrix24.

В формах поддерживается несколько типов переменных для разных типов вводимых данных. В таблице ниже описаны типы полей, для чего они используются и что важно знать при их использовании.

Как создать свою кнопку в форме ZeroBlock на Tilda

Как выполнить данный пример:

1) Создали ZeroBlock
2) Добавили в него форму
3) Удалили надпись у кнопки формы и сделали ширину и высоту 0px
4) Создали обычную кнопку из button или shape
5) Назначили ей ссылку #sendmyform
6) Добавили код на страницу в блок ДРУГОЕ►Т123
В коде заменили ID нашего ZeroBlock #rec113649472

Внимание:

Пример работает только с одной формой на одной странице.
Применение скрипта к нескольким формам приведёт к ошибке его работы.

Пример формы со своей кнопкой.

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

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

   /*Задаём цвет таблички об успешной отправке данных */ .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