Технические данные
- Опубликовано:
- 20.11.2025
- Версия:
- 1.0.8
- Установлено:
- Менее 50 раз
- Подходящие редакции:
- «Старт», «Стандарт», «Малый бизнес», «Бизнес»
- Адаптивность:
- Да
- Поддержка Композита:
- Нет
- Совместимо с Сайты24
- Нет
Пользовательское соглашение
Описание
Все настройки вынесены в параметры компонента. Обработка формы в публичной части использует нативный js (нет необходимости подключать jquery), можно вызывать несколько компонентов на одной странице - в этом случае нужно обязательно указать уникальное название для каждой формы в настройке Название формы.
Настройка формы
Настройки компонента позволяют выбрать предустановленные поля формы из предложенного списка, отсортировать их и задать обязательные. Для предустановленных полей зарезервированы имена полей: CF_NAME, CF_PHONE, CF_EMAIL, CF_COMMENT. Есть возможность добавить в форму дополнительные поля (атрибут name), название полей можно добавить тут же через разделитель == (пример: COMPANY==Компания) - префикс CF_ в настройках не нужно писать, он добавится в шаблоне автоматически.
Поле комментария можно выбрать и отсортировать в настройках списка предустановленных полей, но есть настройка, позволяющая выводить это поле в конце списка после остальных текстовых полей, игнорируя сортировку.
Можно включить поле для загрузки файл и настроить проверку на тип и размер загружаемого файла. У поля файла в форме предустановлено имя CF_FILE.
В процессе обработки на сервере все поля формы экранируются, у предустановленных полей телефона и email идет дополнительная валидация. Подключена js-маска телефона, по умолчанию в настройках включена стилизация Bootstrap 5 и антиспам, который проверяет у пользователя наличие работающего js в браузере и реализует сравнение произвольной контрольной строки на стороне сервера и клиента. При отправке формы идет проверка CSRF-токена.
Отправка EmailЕсть настройка включения отправки письма на Email, при установке модуля автоматически создается почтовое событие ABCWWW_CUSTOM_FORM_FILLING с прикрепленным почтовым шаблоном, но можно указать своё почтовое событие. В настройках компонента есть поле получателя, в нём указывается email, который подхватывается почтовым шаблоном по макросу #EMAIL_TO# (в предустановленном шаблоне макрос #EMAIL_TO# выставлен по умолчанию).
Сохранение данных формыДанные отправленной формы можно сохранить в инфоблок (выбирается в настройках), список отправленных полей сохраняется в поле "описание анонса", для сохранения отправленного файла в инфоблоке необходимо добавить свойство типа файл и указать его символьный код в настройке "Код свойства инфоблока для сохранения файла".
После установки модуля, в папке /bitrix/components/abcwww/ появится компонент abcwww:custom.form, который вы можете подключить на странице.
Кастомизация шаблона
При кастомизации шаблона компонента под свою верстку ВАЖНО оставить служебные классы разметки с префиксом js - они отвечают за дефолтный js-функционал отправки формы. Основной класс формы - jsCustomForm, все остальные должны быть внутри него:
- jsCustomResult - контейнер результатов отправки формы (именно его можно удалить из шаблона, если оповещение об успешной или неуспешной отправке формы планируется выводить другим способом, к примеру, через модальное окно)
- jsCFTel - подключается к преустановленному полю телефона, если в настройках выбрана js-маска
Вызовы $arResult['FORM_ATTRIBUTES'] и $arResult['FORM_HIDDENS'] нельзя удалять из шаблона, это нарушит работу компонента.
Если у формы сложная разметка, то допускается добавить её в шаблон напрямую взамен дефолтной разметки, при этом нужно понимать, что сортировка полей в настройках перестанет работать, и необходимо соблюдать следующие правила:
- Для предустановленных полей зарезервированы имена полей: CF_NAME, CF_PHONE, CF_EMAIL, CF_COMMENT
- Для подключения маски телефона у поля должен быть класс jsCFTel
- К именам дополнительных полей в форме добавляется префикс CF_ (в настройках компонента у дополнительных полей формы префикс указывать не нужно)
- Имена дополнительных полей должны быть перечислены в параметре Список полей для формы (без префикса CF_), в противном случае эти поля будут проигнорированы
- У чекбоксов полей согласия обработки политики и обработки персональных данных зарезервированы имена CF_AGREE и CF_POLITICS соответственно, атрибут value должен быть Y
- У поля для файла зарезервировано имя CF_FILE
- Блоки оповещений валидации полей должны иметь класс CF_<имя поля>_error
- Для показа оповещения об успешной отправке внутри формы должен быть элемент с классом jsCustomResult
- Обязательно оставляем для формы служебный класс jsCustomForm
- Обязательно оставляем вызовы $arResult['FORM_ATTRIBUTES'] (вызывается внутри открывающего тега form) и $arResult['FORM_HIDDENS'] (вызывается после открывающего тега form)
Для кастомизации оповещений при отправке формы js инициирует событие cf_success, в которое передаются параметры message, success, errors и form. Пример js-кода обращения к событию:
document.addEventListener("cf_complete", function(event) {
//console.log(event.detail)
form = event.detail.form
if (event.detail.success === true && form.getAttribute('id') === 'customFormId') {
// выполняем действие в случае успешной отправки формы и если id формы customFormId
}
}) |
Пример закомментированного кода для работы с событием cf_success есть в файле script.js в папке шаблона компонента.
ПримечаниеЕсли на странице компонент вызывается более одного раза, то нет возможности в настройках отключить Bootstrap только для одной формы. В этом случае у нужной формы необходимо убрать bootstrap-классы в разметке шаблоне.
При обращении указывайте название модуля и купон, полученный при покупке решения.