Как создать форму в Zero block?

Помимо стандартных блоков с формами от Тильда, вы можете создать и оформить форму в Zero block. Для того чтобы создать форма в Zero block нужно сделать следующие действия:
ДОБАВЛЕНИЕ ФОРМЫ В ZERO BLOCK

Зайдите в раздел "Мои сайты" и выберите нужный сайт.
Выберите страницу, на которой вы хотите добавить форму, и откройте ее в редакторе.
После вам нужно открыть каталог блоков, для этого наведите курсор в нижнюю часть блока и нажмите на иконку “+”.
В открывшейся панели пролистайте вниз и нажмите на кнопку “Нулевой блок”.
После появления блока, наведите на левый верхний угол блока и нажмите на кнопку "Редактировать блок", чтобы открыть режим редактирования Zero Block.
В режиме редактирования наведите курсор в левый верхний угол и нажмите икноку “+” и выберите пункт “Add form”.
Разместите его в нужном вам месте в пределах блока.
Для редактирования формы нужно открыть панель настроек. Для того чтобы открыть панель настроек наведите курсор в правый нижний угол и нажмите кнопку “Settings”. В правой части экрана у вас отобразится панель настроек.

ДОБАВЛЕНИЕ ПОЛЕЙ В ФОРМУ В ZERO BLOCK

Для того чтобы редактировать поля формы в панели настроек в разделе “Inputs” нажмите на кнопку “Input fields”
В открывшемся окне вы можете увидеть настройку полей. О том как редактировать поля, мы рассказывали в предыдущей главе “Как настроить форму на Тильде?”.
После добавления полей, нажмите на кнопку “Close&Update” для сохранения изменений.

РЕДАКТИРОВАНИЕ ПРИЁМЩИКА ДАННЫХ ИЗ ФОРМЫ В ZERO BLOCK

Для редактирования приёма данных из форм нужно нажать на кнопку “Services” в панели настроек.
Указать нужные приёмщики данных. О том как добавить новые сервисы приёма данных, мы рассказали в этой главе “Как получать заявки с формы на почту”.
После добавления приёмщиков данных, нажмите на кнопку “Close&Update” для сохранения изменений.

НАСТРОЙКА ВИЗУАЛЬНОГО ОФОРМЛЕНИЯ ФОРМЫ В ZERO BLOCK

Для редактирования оформления формы нужно перейти в раздел “Form style” в панели настроек.
Доступны следующие параметры редактирования:

Общие параметры формы

[a] Form design — Дизйан формы. С помощью данного параметра вы можете настроить вертикальный или горизонтальный вид формы
[b] Font family — Шрифт используемый в форме
[c] Success message — Сообщение которое будет отображаться, в случае успешной отправки заявки.
[d] Success URL — Адрес страницы в случае успеха.
[e] Form name — Название формы, чтобы можно было идентифицировать из какой формы пришла заявка. Пользователь не видит название формы.
[f] Error required field — Сообщение об ошибке заполнения поля.
[g] Error: email is incorrect — Сообщение в случае не правильного заполнения адреса электронной почты
[h] Error: phone is incorrect — Сообщение в случае не правильного заполнения номера телефона
[i] Error: name is incorrect — Сообщение в случае не правильного заполнения имени
[j] Text under form — Текст под формой.

Параметры полей

[a] Input font size — Размер текста в поле
[b] Input font weight — Начертание шрифта
[c] Input font family — Шрифт текста в поле
[d] Input color — Цвет текста в поле
[e] Input background — Цвет фона поля
[f] Input border color — Цвет обводки поля
[g] Input border size — Толщина обводки
[h] Input radius — Радиус скругления
[i] Input height — Высота поля
[j] Input margin bottom — Отступ снизу поля
[k] Input style — Стиль поля. Доступны 2 значения. 1) по умолчанию (default), когда обводка по всем границам поля. 2) обводка только нижней границы (only bottom border).
[l] Playceholder style — Стиль подсказки в поле. Доступны 2 значения: 1) по умолчанию (default), когда подсказка исчезает после того как пользователь клинкет на поле и начнет вводить текст. 2) показывать подсказку даже после того как пользователь начал вводить текст (visible after clicking on input).

Параметры галочек, переключателей и других элементов

[a] Color or checkboxes, radio btns and other elements — Цвета галочек, переключателей и других элементов.
[b] Checkbox label font size — Размер текста галочки.
[c] Checkbox label font weight — Начертание текста галочек.

Параметры заголовков полей

[a] Input title font size — Размер заголовка поля
[b] Input title font weight — Начертание заголовка поля
[c] Input title color — Цвет заголовока поля
[d] Input title padding bottom — Отступ снизу заголовка

НАСТРОЙКА КНОПКИ ФОРМЫ В ZERO BLOCK

Для редактирования кнопки формы нужно перейти в раздел “Button” в панели настроек.
Доступны следующие параметры редактирования:

[a] Button title — Текст кнопки
[b] Button align — Выравнивание кнопки
[c] Text color — Цвет текста кнопки
[d] Bg. color — Цвет фона кнопки
[e] Btn. border color — Цвет обводки кнопки
[f] Btn. border size — Толщина обводки кнопки
[g] Btn. corner radius — Радиус скругления углов кнопки
[h] Btn. margin top — Отступ сверху кнопки
[i] Btn. width — Ширина кнопки
[j] Btn. height — Высота кнопки
[k] Btn. font family — Шрифт кнопки
[l] Btn. font size — Размер текста кнопки
[m] Btn. font weight — Начертание текста кнопки
[n] Btn. shadow size — Размер тени
[o] Btn. shadow opacity — Прозрачность тени
[p] Btn. color on hover — Цвет текста кнопки при наведении
[q] Btn. bg. color on hover — Цвет фона кнопки при наведении
[r] Btn. border color on hover — Цвет обводки кнопки при наведении
[s] Btn. shadow size on hover — Размер тени при наведении.

АДАПТИВ ФОРМЫ В ZERO BLOCK

Важно тщательно проверить адаптацию формы на разных разрешениях мобильных устройств. В Tilda вы можете легко адаптировать контент в рамках блока для следующих разрешений: 320px—480px; 480px—640px; 640px—960px; 960px—1200px; 1200px—MAX. Чтобы проверить адаптацию на каждом разрешении, последовательно нажимайте на представленные опции в верхней части экрана и подстраивайте контент так, чтобы он соответствовал границам блока.

После того, как вы добавили форму, внесли все необходимые изменения и проверили ее адаптацию под различные разрешения экрана, не забудьте сохранить изменения, нажав кнопку "Сохранить и закрыть", расположенную в правом верхнем углу экрана. Чтобы изменения отобразились на вашем сайте, необходимо опубликовать их. Для этого нажмите кнопку "Опубликовать", также находящуюся в правом верхнем углу экрана.