Вход / Регистрация

Добавление полей в форму

19 сентября 2018
Владимир Першин

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

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

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

Вкладка Designer

Давайте сделаем простую форму обратной связи. Для этого нам понадобятся такие поля:

  • Text field - текстовое поле
  • Textarea - поле текста
  • Button - кнопка, которая будет отправлять форму

Использование необходимых полей

Для того, чтобы добавить поля, необходимо просто перетащить их мышью в область зелёного поля. Если какое-то поле нужно использовать более одного раза, значит перетягиваем его ещё раз, как в данном случае. Текстовое поле в форме обратной связи будет использоваться как для ввода имени, так и для ввода почты.

Теперь все поля добавлены.

все поля добавлены

У каждого поля есть набор опций.

  • Отображает тип поля
  • Отображает ID поля
  • Настройки поля
  • Возможность сортировки (перемещение поля в списке)
  • Удаление поля из формы
  • Создание дубликата поля

Чтобы настроить поле, необходимо кликнуть на синюю шестерёнку. При нажатии откроются настройки поля.

Настройки поля

В настройках практически каждого поля вы увидите 4 вкладки, как сейчас:

  • General - основные настройки
  • Validation - валидация поля
  • Info - дополнительные данные для поля
  • Events - настройка событий для поля (то, как будет реагировать поле на определённое событие)

Всё начинается конечно же с первой вкладки, с основных настроек.

Вкладка General

  • Label - название поля
  • Placeholder - текст в поле, которй отображается, пока оно пустое
  • Name - имя поля
  • ID - уникальный идентификатор поля
  • Value - текст в поле, который будет уже по умолчанию
  • Include value in E-mail - включение данного поля в сообщение, которое придёт на почту после отправки формы
  • Save to database - добавление информации из данного поля в базу данных сайта

Вкладка Validation

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

Вкладка Validation

Список настроек в данной вкладке:

  • Required - обязательность поля
  • Optional - валидация поля, если оно заполнено
  • E-mail - валидация поля по e-mail
  • URL - валидация поля по ссылке
  • Integer - валидация поля по числам
  • Decimal - валидация десятичных дробей
  • Number - валидация поля по номеру телефона
  • Regular expression - валидация поля, используя регулярное выражение
  • Matches - ID поля, с которым будет совпадать валидация данного поля
  • Different - ID поля, от которого будет отличаться валидаия данного поля
  • Minimum length - минимальная длина поля
  • Maximum length - максимальная длина поля
  • Contains -введённый текст обязательно должен содержать текст в этом поле
  • Error message - сообщение об ошибке, если поле не прошло валидацию
  • Mask - маска поля для определённого типа валидации

Вкладка Info

Здесь вы увидите только 2 поля - это Description и Tooltip.

Description используется для дополнительного описания поля. Tooltip используется для дополнительной подсказки для ввода текста.

Вкладка Events

Вкладка Events

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

Также, можно влиять на другие поля при помощи событий.

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

Теперь, после рассмотрения настроек поля, давайте его настроим всё-таки.

В Label я пропишу Ваше имя, а в Name и ID - name. Также выключим опцию Save to database. На вкладке валидации сделаем это поле обязательным. Когда настройка поля завершена - жмём кнопку Close.

Следующее поле настраивается аналогично, только на вкладке валидации включим опцию E-mail.

При настройке поля текста Textarea вы увидите несколько новых опций.

Настройка поля Textarea

  • Rows - количество строк в поле (влияет на высоту поля)
  • Content - аналогично полю Value
  • Rich text editor - возможность включить для данного поля редактор (рекомендую этого не делать)
  • Auto expand - автоматическое увеличение поля по высоте, если текст не будет помещаться в поле

Все остальные настройки абсолютно такие же, как и у предыдущего поля.

И для того, чтобы закончить настройку наших полей, осталось настроить кнопку, которая будет отправлять форму. Для этой цели используется поле Button.

Открываем её настройки.

Настройка поля Button

  • Type - тип кнопки (для отправки формы используется тип Submit)
  • Content - надпись на кнопке
  • Color - фоновый цвет кнопки
  • Class - возможность указать CSS класс для кнопки
  • Full width - возможность сделать кнопку на всю ширину формы

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

Отзывы

Комментарии (0)

2018-09-18 23:24:12
Владимир Першин
Украина, г. Николаев
+380937417200