1. Создать ИБ для формы (документация Битрикс по созданию ИБ)
В типе ИБ "Служебные" создайте новый ИБ
Добавление ИБ

Задайте название и символьный код у ИБ, и добавьте нужные свойства для ИБ, они и будут служить полями для вашей формы
Добавление ИБ2.jpg

Свойства ИБ.jpg

Все настройки свойств очень важны:
  • Названия - отвечает за вывод названия у поля
  • Сортировка - отвечает за порядок вывода полей
  • Тип - будет отвечать за внешний вид
  • Обязательность - будет проверять поля на обязательность, в случае если галочка стоит, а при отправлении нужное поле не заполнено, то пользователю появится предупреждение
  • Код - нужно для почтовых шаблонов, чтобы отправлять письма как клиенту, так и владельцам сайта (в зависимости от настроек)
Для демонстрации было заполнено 4 свойства (должность, место работы, стаж, комментарий)

Свойства должность и место работы - были отмечены обязательными

Свойство комментарий - был изменён размер поля для ввода значений:
Дополнительная настройка.jpg

Свойство стаж - выбрано с типом список и настроено след. образом:
Дополнительная настройка 2.jpg

2. Настроить любой наш компонент (поддерживающий формы) на вашу форму или разместить компонент на странице.

а. Настроить наш компонент
На данный момент формы поддерживаются в 2 компонентах bxready2:catalog.lite и bxready2:block
Для примера перенастроим форму в проектах на новый каталог, для начала зайдём в настройки компонента
Настройка форм в проектах.jpg

 Настроим компонент на новую форму
Настройки компонента.jpg
Настройки компонента2.jpg

  • Сопроводительный текст формы - текст который выведется перед кнопкой, которая открывает форму;
  • Свойства, выводимые на заполнение -  все свойства которые будут доступны для заполнения пользователю;
  • Название элемента брать из свойства - название для элемента, под которым он сохранится у вас в ИБ.
  • Код типа почтового события для уведомления -  код типа почтового события , которое будет срабатывать после отправки данных пользователем
В результате получилась следующая форма:
Настроенная форма.jpg

б. разместить компонент alexkova.business:form.iblock на странице.
Для размещение компонента воспользуйтесь документацией Битрикс ( размещение компонентов) 

Настройки у компонента точно такие же как и в примере выше, единственное отличие это разные шаблоны.
  • built_in - форма появится сразу в месте размещения компонента.
  • request_product - служебный шаблон, используется в каталоге
  • popup -  добавит скрытую форму или скрытую форму с кнопкой (данная форма у нас размещается в футере сайта, а в нужных моментах мы её привязываем к элементам на странице, с помощью параметра "ID формы в DOM структуре" а на элементе при клике на который мы хотим открыть эту форму указываем data-toggle="modal" data-target="#ID формы" )
Пример размещения тестовой формы с шаблоном popup:

На тестовой странице размещаем компонент alexkova.business:form.iblock  (id у формы устанавливаем form-test)

$APPLICATION->IncludeComponent(
  "alexkova.business:form.iblock",
  "popup",
  Array(
    "BUTTON_TEXT" => "",
    "BXR_FORM_ID" => "form-test",
    "BXR_FORM_SUBMIT_CAPTION" => "",
    "BXR_FORM_SUBMIT_ICON" => "",
    "FORM_TITLE" => "Заполните поля",
    "GROUPS" => array(),
    "IBLOCK_ID" => "187",
    "IBLOCK_TYPE" => "services",
    "MAX_FILE_SIZE" => "0",
    "NAME_FROM_PROPERTY" => "1005",
    "PROPERTY_CODES" => array("1005", "1006", "1007", "1009"),
    "RESIZE_IMAGES" => "N",
    "SEND_EVENT" => "KZNC_NEW_FORM_RESULT_TEST",
    "STATUS_NEW" => "N",
    "USER_MESSAGE_ADD" => "",
    "USE_CAPTCHA" => "N"
  )
);
Форма popup.jpg

Размещаем кнопку в шапке с помощью кода
<button class="bxr-color-button bxr-color-button-small" data-toggle="modal" data-target="#form-test">Открыть форму</button>
Обязательные параметры это data-toggle и data-target. В data-target нужно указать id формы (код который мы указывали в компоненте "ID формы в DOM структуре")
Тестовая форма.jpg


3. Добавление собственных почтовых типов и почтовых шаблонов.
Документация Битрикс по добавлению почтовых типов и добавлению почтовых шаблонов.

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

Нажмите Применить, после этого появится вкладка Шаблоны

Шаблоны.png
Зайдите в нее и нажмите Добавить почтовый шаблон

Поставьте галочки Активность и выберите сайт.
От кого: #DEFAULT_EMAIL_FROM# (означает, что подставится e-mail, указанный в настройках сайта, но вы можете вписать любой другой)
Кому: #DEFAULT_EMAIL_FROM# (означает, что подставится e-mail, указанный в настройках сайта, но вы можете вписать любой другой)
Тема - укажите нужную тему шаблона (является заголовком письма)
Сообщение - в сообщении можно использовать поля из форм

Почтовый шаблон.jpg

На один тип почтового события можно задавать несколько почтовых шаблонов, и если у вас в форме есть поле email, то вы можете подставить данное поля в получатели (Кому), и ваш клиент будет получать соответствующее письмо.


 Формы в решении и их почтовые шаблоны | Описание курса | Настройки главной страницы