Новости Нолим

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

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

  1. Зайдите в раздел "Мои сайты" и выберите нужный сайт.
  2. Выберите страницу, на которой вы хотите добавить форму, и откройте ее в редакторе.
  3. После вам нужно открыть каталог блоков, для этого наведите курсор в нижнюю часть блока и нажмите на иконку “+”.
  4. В открывшейся панели пролистайте вниз и нажмите на кнопку “Нулевой блок”.
  5. После появления блока, наведите на левый верхний угол блока и нажмите на кнопку "Редактировать блок", чтобы открыть режим редактирования Zero Block.
  6. В режиме редактирования наведите курсор в левый верхний угол и нажмите икноку “+” и выберите пункт “Add form”.
  7. Разместите его в нужном вам месте в пределах блока.
  8. Для редактирования формы нужно открыть панель настроек. Для того чтобы открыть панель настроек наведите курсор в правый нижний угол и нажмите кнопку “Settings”. В правой части экрана у вас отобразится панель настроек.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
ДОБАВЛЕНИЕ ПОЛЕЙ В ФОРМУ В ZERO BLOCK

  1. Для того чтобы редактировать поля формы в панели настроек в разделе “Inputs” нажмите на кнопку “Input fields”
  2. В открывшемся окне вы можете увидеть настройку полей. О том как редактировать поля, мы рассказывали в предыдущей главе “Как настроить форму на Тильде?”.
  3. После добавления полей, нажмите на кнопку “Close&Update” для сохранения изменений.
  • 1
  • 2
РЕДАКТИРОВАНИЕ ПРИЁМЩИКА ДАННЫХ ИЗ ФОРМЫ В ZERO BLOCK

  1. Для редактирования приёма данных из форм нужно нажать на кнопку “Services” в панели настроек.
  2. Указать нужные приёмщики данных. О том как добавить новые сервисы приёма данных, мы рассказали в этой главе “Как получать заявки с формы на почту”.
  3. После добавления приёмщиков данных, нажмите на кнопку “Close&Update” для сохранения изменений.
  • 1
  • 2
НАСТРОЙКА ВИЗУАЛЬНОГО ОФОРМЛЕНИЯ ФОРМЫ В ZERO BLOCK

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

  • [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

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

  • [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. Чтобы проверить адаптацию на каждом разрешении, последовательно нажимайте на представленные опции в верхней части экрана и подстраивайте контент так, чтобы он соответствовал границам блока.

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