screenshot14

Все мы прекрасно знаем, что в битриксе существует стандартный функционал создания html-форм. Модуль «Формы» доступен, начиная с версии «Стандарт». На версии «Старт» реализовать форму через стандартный функционал не получится, но всегда можно использовать API для этих целей.

Так давайте же попробуем создать на нашем сайте форму стандартным способом.

1. Создаем форму в административной части сайта bitrix

Заходим в меню Сервисы->Настройка форм и нажимаем создать:

skrinshot5

Заполняем все необходимые поля на первой вкладке (свойства).

  • Наименование — название нашей формы
  • Сайты формы — сайты на который будет размещена форма
  • Отправлять результат по E-mail — ставим сюда галочку, если хотим, чтобы после отправки формы пользователем, нам приходило письмо-уведомлениe на почту
  • Подпись на кнопке, сохраняющей результаты формы — заполняем надпись, которая будет на кнопке submit (отправки формы на сервер)

Всё должно выглядеть примерно так:

screensho6

Остальные вкладки в принципе можно оставить как есть. Этих данных достаточно для дальнейшей работы.

Теперь необходимо создать так называемые «Вопросы». Вопросы — это собственно и будут поля нашей формы. Но перед этим кое-что сделаем. Дело в том, что в настройках модуля «Веб-формы» по умолчанию выставлена галочка «Использовать упрощённый режим редактирования форм». А упрощенный режим не для нас), так что убираем галочку, щелкаем «сохранить» и возвращаемся в настройки нашей формы.

screenshot7

Теперь добавляем «Вопросы» к нашей форме — то есть поля.

Во вкладке «Свойства» задаем символьный идентификатор (желательно писать заглавными латинскими буквами) и выбираем будет ли наше поле обязательным для заполнения.

Во вкладке «Вопрос» задаем название нашего поля.

Во вкладке «Ответ» в колонке «Текст» вводим любой текст. Можно просто поставить пробел (как я и сделал) так как использовать эти данные мы не будем, но для заполнения это поле обязательно. Если его оставить пустым, то при сохранении увидим ошибку (скриншот ниже).

screenshot8

Также зададим «Тип поля» — это может быть текстовое поле либо любой другой существующей html тип.

Остальные вкладки можно оставить без изменения. Создадим нужное количество «Вопросов» (полей) и перейдем к следующему шагу.

Осталось создать «Статус». У меня он создался автоматически, но иногда его нужно создавать самому. Этот статус будет присваиваться при заполнении формы пользователем.

screenshot9

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

2. Создаем форму на странице с помощью компонента form.result.new

2.1 Настраиваем параметры компонента

Создавать форму мы будем с помощью компонента form.result.new, как написано в заголовке. Вот так будет выглядеть код вызова компонента (скриншот ниже). Располагаем код на странице в том месте, где будет выводиться наша форма.

 

К каждому параметру написано пояснение в комментариях. На что стоит обратить внимание, так это на два важных параметра:

Шаблон компонента — вписываем сюда название шаблона компонента

И id формы (WEB_FORM_ID) — вписываем сюда id нашей веб формы. Подсмотреть его можно здесь:

screenshot10

2.2 Создаем шаблон компонента

Пришло время создать шаблон вывода формы. Я буду использовать стандартный шаблон (.default), который можно найти в папочке нашего компонента.

Для формы у меня будет создано два «Вопроса» — это «ФИО» и «Телефон» и оба эти поля будут обязательными для заполнения. Так как основной шаблон на моём сайте — это один из стандартных шаблонов битрикса, который можно выбрать при установке самой CMS на наш сервер, то выглядеть всё это дело у меня будет примерно так на данный момент:

screenshot11

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

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

Обязательными являются следующие параметры:

  • Атрибут ‘name’ -> вводим сюда символьный код нашей формы (подсмотреть можно в административной части)
  • Также обязательными являются два скрытых поля (hidden) sessid  и WEB_FORM_ID. В их значения нужно записать id сессии пользователя и значение id нашей формы.
  • Атрибуты полей ‘name’ должны быть следующего вида — for_text_(id поля). Id каждого поля также можно подсмотреть в административной части сайта в настройках формы.
  • Ну и собственно кнопка сабмит должна иметь ‘name’  -> web_form_submit.

Если ваш шаблон корректно выведет данные параметры, то форма будет работать исправно.

Естественно вручную в шаблоне заполнять их не надо. Все эти параметры приходят в массиве $arResult, а наша задачи лишь правильно их расставить и вывести.

Все данные заполненные пользователем приходят в «Результаты формы», которые можно увидеть в админке здесь:

screenshot12

2.3 Отправка письма-уведомления на почту

При создании любой формы в битриксе автоматически создается «Тип почтового события» и привязывается шаблон отправки. Называться событие будет по такому принципу FORM_FILLING_(Символьный код вашей формы). Вот как это выглядит у меня:

screenshot13

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

На этом в принципе всё, возможно эта статья будет кому-то полезна.