Настраиваемая форма обратной связи для 1С-Битрикс: Управление сайтом

Модуль упрощает и ускоряет процесс создания формы обратной связи с ajax-отправкой. Будет полезен как для редакции Старт, так и для других редакций, когда есть необходимость вывести на странице достаточно простую форму, не прибегая к долгим предварительным настройкам и сборке формы в админке. Скачать бесплатно в Маркетплейс Битрикс.

Все настройки вынесены в параметры компонента. Обработка формы в публичной части использует нативный 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# выставлен по умолчанию).

Сохранение данных формы
Данные отправленной формы можно сохранить в инфоблок (выбирается в настройках), список отправленных полей сохраняется в поле "описание анонса", для сохранения отправленного файла в инфоблоке необходимо добавить свойство типа файл и указать его символьный код в настройке "Код свойства инфоблока для сохранения файла".

Стандартная установка модуля из MarketPlace Битрикс.

После установки модуля, в папке /local/components/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-событие

Для кастомизации оповещений при отправке формы 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-классы в разметке шаблоне.