Help

Типы полей

Каждая форма составляется из полей определенных типов. У каждого поля есть стандартный набор параметров:

Название
Обычно отображается перед полем для ввода. Но на странице выбора дизайна вы можете выбрать отображение слева или внутри поля.

Описание
Небольшое описание поля. Здесь вы можете показать пользователю пример текста для ввода.

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

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

Кроме этого, для некоторых полей вы можете использовать расширенные настройки:

Включить атрибут name
Такая опция позволяет отображать выпадающие подсказки со значениями предыдущих заполнений поля. Например, при заполнении поля e-mail в подсказках пользователь увидит свои актуальные почтовые аккаунты.

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

Добавить свой CSS-класс обертке
Пропишите код своего CSS-класса, чтобы стилизовать поле при помощи собственных CSS-стилей:

Например, на своем сайте вы используете класс likeH1, который оформляет заголовов тега <h1> черным фоном и белым шрифтом. Если вы зададите обертке этот класс, в выбранном элементе формы будет использоваться такое же оформление.

Строка

Обычная строка. Может быть использована для любых текстовых и числовых данных. Например, для ФИО или адреса сайта.
 
В расширенных настройках поля вы можете добавить функцию автоподстановки в помощь пользователю, например, при вводе страны.  Эта настройка полезна, когда у вас есть база каких-либо данных (имен, адресов, услуг и т.д.), и вы хотите динамически подгружать их в форму. Функция «Автоподстановка» подойдет пользователям со знанием языков программирования.
 

Как добавить автоподстановку?

Например, у вас есть API, которое по ссылке выдает определенный список элементов. Ссылка выглядит так: https://apps.mos-gaz.ru/api/addr_search. Ее вам и нужно ввести в поле «Автоподстановка».
 
В поле «Путь к массиву» необходимо прописать путь массиву с элементами. Ваша ссылка выдает следующую структуру:

Значит, путь к массиву будет выглядеть так: answer.items
 
Название переменной — в этом поле вам необходимо прописать название переменной, в которой передается запрос из Formy. В данном случае название переменной — search.
 
Тестовый запрос — это текст, который пользователь должен ввести в строке (отправить запрос системе), чтобы система выдала нужные данные. В данном случае вы можете прописать в поле запрос «янгеля». После этого сервер отправит вызов следующего вида:
https://apps.mos-gaz.ru/api/addr_search?search=%D1%8F%D0%BD%D0%B3%D0%B5%D0%BB%D1%8F
 
И если все выше заполнено правильно, у вас появятся новые поля для настройки:

Индекс для кода — это индекс из массива, который вы будете использовать для сохранения в поле «Код» (то есть независимого от названия значения).
 
Индекс для названия — какая информация будет показана пользователю в виде списка.
 
Разрешить выбирать только из списка
— при активированной функции пользователь сможет ввести в поле только одно из предложенных значений.
 
Отправлять пустой запрос — при активированной функции сервер будет отправлять запрос на получение списка, даже если пользователь ничего не ввел.
 
Если вы правильно настроили автоподстановку, для пользователя форма будет работать так:

Текст

Мультистроковое поле. Может быть использовано для ввода больших текстовых данных, таких, как вопрос или описание проблемы.

Email

Это поле используется для ввода электронного адреса. Вы можете включить опцию «проверять на валидность», чтобы автоматически следить за правильностью заполнения поля. E-mail считается верным, если есть знак @, текст после знака @, точка после знака @ и текст после точки. Так же идет проверка на наличие MX записи к домена почты. Проверку валидности пройдут любые электронные адреса, написанные латиницей.

Дата

Поле для ввода даты, например, даты рождения или доставки товара. Вы можете запрашивать не только дату, но и точное время.

Номер телефона

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

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

По умолчанию пользователь может ввести номер и в международном, и в локальном формате. Вы можете запретить ввод номера в локальном формате, активировав функцию «Использовать международный формат» в настройках поля. Страна по умолчанию устанавливается в соответствии со страной нахождения пользователя (определяется по IP-адресу).

Выбиралка

В это поле вам нужно ввести список допустимых значений, чтобы пользователь выбрал одно из них. Или получить его из ссылки (для этого введите нужную ссылку в расширенных настройках поля). Поле может отображаться в виде:

1. радиокнопок

2. дропдауна

Для блока «Выбиралка» вы также можете использовать функцию «Автоподстановка» — она будет работать по тому же принципу — выбор нужного значения из выпадающего списка. Но в данном случае пользователь не сможет ничего ввести на клавиатуре. 
 

Опция добавлять пустое поле - добавляет пустую строку, если ее не отметить - будет автоматически выбрана первая строчка из тех, что передались по выбранной ссылке.
  
В расширенных настройках поля вы можете активировать отправку текущего состояния формы при запросе полей. По умолчанию текущее состояние не отправляется, а поля запрашиваются HTTP-методом GET (как с помощью ссылки в адресной строке браузера). Если вы используете функцию «Активировать отправку текущего состояния формы при запросе полей», при запросе полей система совершит POST запрос, в теле которого будут находиться текущие поля формы.
 
Например, пользователь на сайте поликлиники вводит отделение, в которое он планирует записаться на прием. Во втором поле должен появиться выбор времени приема. При этом список с интервалами отличается для разных отделений.

Чекбокс

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

Файл

Поле для загрузки файлов имеет две дополнительных опции:

  • Допустимые расширения
    Через запятую вводятся допустимые расширения файлов. Например: png, jpg, jpeg, gif
  • Максимальный размер
    Максимальный допустимый размер загружаемого файла. Вводится в байтах.

Оценка

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

Маска

Поле для ввода данных в определенном формате. Имеет 2 режима:

1. Pattern — упрощенный режим, плюсом которого являются символы-плейсхолдеры, в данном режиме вы можете использовать следующие параметры:

  • 0 - любая цифра
  • a - любая буква
  • * - любой символ
  • [] - опциональная часть маски
  • {} - статическая часть маски (не может быть изменена)

Например:

  • 0000 000000 — серия и номер паспорта
  • +{7(495)}000-00-00 — номер телефона, начинающийся на +7(495)
  • aaaa-{HL12}-****-**** — лицензионный ключ вида ASDA-HL12-SD42-3213

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

  • Примеры полезных регулярных выражений:
  • ^[a-zA-Z]+$ — разрешить ввод только латинских символов (как заглавных, так и строчных)
  • ^[а-яА-Я]+$ — разрешить ввод только кириллических символов (как заглавных, так и строчных)
  • ^[IXVLCDM]{1,2}-?[0-9]{0,5}$ — сначала должно вводиться римское число, состоящее из двух знаков, затем тире, затем 0-5 цифр

Обратите внимание: маска должна принимать промежуточные значения. Если маска будет выглядеть так: ^123 (при такой маске строка должна начинаться с 123), пользователь не сможет ничего ввести, так как мгновенно три символа в начале строки не появятся.

Кнопка

Кнопка используется для отправки заполненной формы. Имеет дополнительный параметр:

  • Положение кнопки
    Позволяет отобразить кнопку по центру, слева или справа.

Обратите внимание: если на форме отсутствует кнопка отправки, пользователь сможет отправить форму, только нажав на Enter в одном из текстовых полей.

Заметка

Статический блок. Используется для создания текстовых описаний прямо на форме.

Шапка

Статический блок. Вы можете как удалить «шапку», так и вставить дополнительную в нужной части формы

Обратите внимание: как правило, дизайн предполагает отступы до и после «тела» формы. Когда «шапка» стоит в верхней части формы, она выносится за рамки ее «тела», и расстояние между этими блоками может оказаться слишком большим.

Согласие с политикой конфиденциальности

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

Вы можете вставить документ тремя способами:

  1. Вставить в поле заранее подготовленный текст политики
  2. Вставить ссылку на политику, если она размещена на отдельной странице сайта
  3. Сгенерировать политику средствами Formy. При выборе этого варианта появятся дополнительные поля (домен, полное и сокращенное название сайта, e-mail для связи, организация, город и подпись), которые вам нужно заполнить:  

Капча

Поле с защитным кодом, который требуется ввести пользователю, чтобы система распознала его как человека и разрешила отправку формы. Используется для защиты сайта от ботов и спама.

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