Основная функция блока:
Получение контактной информации от посетителей сайта.
При клике на кнопку открывается окно с формой заявки.
Пример:
Мы вам перезвоним!
В течение 5 минут менеджер свяжется с вами
Отправить заявку
Далее в примерах будут показываться открытые формы, чтобы удобнее было изучать блок.
Логика работы с полями:
​Поля добавляются внутрь, как блоки. Все визуальные настройки (шрифты, цвета и т.п.) к полям будут подтягиваться автоматически при добавлении в слот формы — это значительно ускоряет настройку дизайна.
Пример. Поле само по себе (не имеет настроек):
То же самое поле, но помещенное внутри формы. принимает её настройки и шрифт:
Типы полей:
Всего доступно 16 типов полей:
Скрытое поле пригодится, когда потребуется передать какие-либо промежуточные данные, которые
не должны изменяться посетителем сайта при оформлении заявки.
Скрытое поле видно только вам в редакторе. Выглядит оно так:
А в калькуляторе можно создать формулу для расчета суммы, используя переменные полей.
Чтобы увидеть работу калькулятора в форме справа, установите в полях "Количество" и "Количество (тянучка)" какое-нибудь число, и в Калькуляторе будет указана сумма значений этих полей.
Примеры всех типов полей:
Введите Имя и Фамилию
Дата и время:
Телефон:
Количество:
Количество (тянучка)
0 5
Выбор из вариантов:
Выбор из картинок:
Использование других блоков внутри:
​Вы можете добавлять любые блоки редактора внутрь формы. Например, колонки, картинки, слайдеры или тексты. Плюс ко всему, благодаря этой возможности сами поля формы можно размещать в колонках по несколько вряд, группируя их как вам нужно.
Пример формы с другими блоками внутри:
• текстовые блоки, чтобы можно было выделить
цветом и полужирным название компании ↓
Переехать вместе с Переезд59
Перезвоним вам в течение 5 минут
• картинка для декора ↓
• текст для заголовка "раздела" и колонки, чтобы
разместить два поля в одной строке ↓
Контактные данные
Адреса
День переезда
Дата и время подачи
Детали
Сколько понадобится грузчиков
1 10
• колонки для размещения картинки и текста ↓
Всем, кто оставит заявку до конца месяца,
дарим подарок от наших партнёров "ЭкоГрупп"
Быстрые настройки дизайна:
​Чтобы ускорить процесс работы над дизайном формы мы добавили предустановленные размерности элементов, скругления и готовые цветовые палитры, а также объединили настройки всех шрифтов формы в одном месте:
Примеры готовых цветовых палитр:
Количество:
Количество:
Количество:
Детальная настройка:
​Если вам не подходят готовые значения, вы смело можете задать свои параметры для каждого элемента. Настроить можно практически всё.
Пример формы с пользовательской настройкой:
Отправить заявку
Перезвоним в течение 5 минут
Количество:
Настройки pop-up:
​Вы можете настроить ширину по-апа и цвет заливки фона при открытии поп-апа.
Пример попапа с цветной заливкой фона:
Мы вам перезвоним!
В течение 5 минут менеджер свяжется с вами
Отправить заявку
Тексты ошибок формы:
​Вы можете сами прописывать текст, который будет выводиться при неверном заполнении каждого типа поля.
Попробуйте отправить форму, не заполняя полей:
Отправить заявку
Перезвоним в течение 5 минут
Количество:
Настройка отображения Положения и согласия:
​Согласие с политикой обработки персональных данных может отображаться по-разному. Есть 3 варианта:
  • Нет. Положение и согласие отключено.
  • Без явного согласия. Текстом прописано, что, нажимая на кнопку отправки формы, посетитель сайта соглашается с условиями.
  • С явным согласием. Когда нужно подтвердить согласие с условиями, поставив галочку.
Блок Форма
Пример формы без явного согласия:
Пример формы с явным согласием:
Отображение на мобильных устройствах:
Можно выбрать, как всплывающая форма будет показываться на мобильных:
• по центру экрана (стандарт)
• во всю ширину
• в виде шторки
Блок Форма
Примеры отображения формы на мобильном:
стандарт
во всю ширину
шторка