После установки модуля, в папке /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-классы в разметке шаблоне.
Поддержка осуществляется через обращения на почту info@conversite.ruПри обращении указывайте название модуля и купон, полученный при покупке решения.
Модуль упрощает и ускоряет процесс создания формы обратной связи с 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# выставлен по умолчанию).
Сохранение данных формыДанные отправленной формы можно сохранить в инфоблок (выбирается в настройках), список отправленных полей сохраняется в поле "описание анонса", для сохранения отправленного файла в инфоблоке необходимо добавить свойство типа файл и указать его символьный код в настройке "Код свойства инфоблока для сохранения файла".
Закажите любой модуль у нас на сайте с бесплатной установкой и гарантией 14 дней
Мы работаем с физическими и юридическими лицами. И предоставляем сразу два варианта оплаты.
- Наличные. Вы подписываете товаросопроводительные документы, расплачиваетесь денежными средствами, получаете товар и чек.
- Безналичный расчет. Принимаем карты Visa и MasterCard. Доступен при курьерской доставке.
Ваш заказ можем доставить собственными ресурсами, при условии вашего нахождения в городе. Либо через 4 варианта доставки:
- Курьерская доставка. Курьерская доставка работает с 9:00 до 19:00. Когда товар поступит на склад, курьерская служба свяжется для уточнения деталей. Специалист предложит выбрать удобное время доставки и уточнит адрес.
- Самовывоз из магазина. Для получения заказа обратитесь к сотруднику в кассовой зоне и назовите номер.
- Сотрудничаем с постаматами. Срок хранения — 3 дня.
- Предоставляем почтовую доставку через почту России. Когда заказ придет в отделение, на ваш адрес придет извещение о посылке. Вскрывать коробку самостоятельно вы можете только после оплаты заказа.
Дополнительная вкладка для размещения информации о товарах, доставке или любого другого важного контента. Поможет вам ответить на интересующие покупателя вопросы и развеять его сомнения в покупке. Используйте её по своему усмотрению.
Вы можете убрать её или вернуть обратно, изменив одну галочку в настройках компонента. Очень удобно.
- Комментарии
- ВКонтакте