|
1. Создать ИБ для формы (документация Битрикс по
созданию ИБ)
В типе ИБ "Служебные" создайте новый ИБ
![Добавление ИБ Добавление ИБ](/upload/medialibrary/c0f/c0fcc9f611c6f93d7c93f3a06778d430.jpg)
Задайте название и символьный код у ИБ, и добавьте нужные свойства для ИБ, они и будут служить полями для вашей формы
![Добавление ИБ2.jpg Добавление ИБ2.jpg](/upload/medialibrary/a30/a30f50c1e294bf16c3c4329f1a7c3982.jpg)
![Свойства ИБ.jpg Свойства ИБ.jpg](/upload/medialibrary/c5d/c5d0e4485819567789e9abc48a2329b1.jpg)
Все настройки свойств очень важны:
- Названия - отвечает за вывод названия у поля
- Сортировка - отвечает за порядок вывода полей
- Тип - будет отвечать за внешний вид
- Обязательность - будет проверять поля на обязательность, в случае если галочка стоит, а при отправлении нужное поле не заполнено, то пользователю появится предупреждение
- Код - нужно для почтовых шаблонов, чтобы отправлять письма как клиенту, так и владельцам сайта (в зависимости от настроек)
Для демонстрации было заполнено 4 свойства (должность, место работы, стаж, комментарий)
Свойства должность и место работы - были отмечены обязательными
Свойство комментарий - был изменён размер поля для ввода значений:
![Дополнительная настройка.jpg Дополнительная настройка.jpg](/upload/medialibrary/4e2/4e2833b57516e70cc18aa5e7db7710c5.jpg)
Свойство стаж - выбрано с типом список и настроено след. образом:
![Дополнительная настройка 2.jpg Дополнительная настройка 2.jpg](/upload/medialibrary/47d/47d0de8b8e9e90bc445afe1c47cd2312.jpg)
2. Настроить любой наш компонент (поддерживающий формы) на вашу форму или разместить компонент на странице.
а. Настроить наш компонент
На данный момент формы поддерживаются в 2 компонентах bxready2:catalog.lite и bxready2:block
Для примера перенастроим форму в проектах на новый каталог, для начала зайдём в настройки компонента
![Настройка форм в проектах.jpg Настройка форм в проектах.jpg](/upload/medialibrary/ce7/ce7010e2cf1e6d14097cc3ce691017b6.jpg)
Настроим компонент на новую форму
![Настройки компонента.jpg Настройки компонента.jpg](/upload/medialibrary/409/4098989fdaae761ff13ac81af8085d74.jpg)
![Настройки компонента2.jpg Настройки компонента2.jpg](/upload/medialibrary/8ce/8ce7a8ffc1beec00bf6e0d43d7dd900a.jpg)
- Сопроводительный текст формы - текст который выведется перед кнопкой, которая открывает форму;
- Свойства, выводимые на заполнение - все свойства которые будут доступны для заполнения пользователю;
- Название элемента брать из свойства - название для элемента, под которым он сохранится у вас в ИБ.
- Код типа почтового события для уведомления - код типа почтового события , которое будет срабатывать после отправки данных пользователем
В результате получилась следующая форма:
![Настроенная форма.jpg Настроенная форма.jpg](/upload/medialibrary/552/552103684e4789c9d2633598197b0f6f.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 Форма popup.jpg](/upload/medialibrary/aac/aacd5473d323f2b830f0fefdd03ce129.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 Тестовая форма.jpg](/upload/medialibrary/32e/32e34da0e6b91a68a937294ef7be08b5.jpg)
3. Добавление собственных почтовых типов и почтовых шаблонов.
Документация Битрикс по
добавлению почтовых типов и
добавлению почтовых шаблонов.
Добавим тип почтового события (с кодом что мы ранее указывали в настройках компонента KZNC_NEW_FORM_RESULT_TEST (код может быть любым))
В описание укажите коды из созданного ИБ.
![Почтовый тип.jpg Почтовый тип.jpg](/upload/medialibrary/3de/3de8780c60c6519f26a47ffbf8dd75e3.jpg)
Нажмите Применить, после этого появится вкладка Шаблоны
Зайдите в нее и нажмите Добавить почтовый шаблон
Поставьте галочки Активность и выберите сайт.
От кого: #DEFAULT_EMAIL_FROM# (означает, что подставится e-mail, указанный в настройках сайта, но вы можете вписать любой другой)
Кому: #DEFAULT_EMAIL_FROM# (означает, что подставится e-mail, указанный в настройках сайта, но вы можете вписать любой другой)
Тема - укажите нужную тему шаблона (является заголовком письма)
Сообщение - в сообщении можно использовать поля из форм
![Почтовый шаблон.jpg Почтовый шаблон.jpg](/upload/medialibrary/724/72458d5ff9aeeb380d03cd0cba71c930.jpg)
На один тип почтового события можно задавать несколько почтовых шаблонов, и если у вас в форме есть поле email, то вы можете подставить данное поля в получатели (Кому), и ваш клиент будет получать соответствующее письмо.
Формы в решении и их почтовые шаблоны |
Описание курса
| Настройки главной страницы
|