Как редактировать форму обратной связи на битрикс?(Добавление полей в форме обратной связи на битриксе).
Как редактировать форму обратной связи на битрикс?(Добавление полей в форме обратной связи на битриксе)
Часто приходится использовать форму обратной связи в редакии «Старт». Можно сделать свою без всяких компонентов, а просто кодом, но иногда достаточно использовать стандартную форму обратной связи, добавив или изменив нужные поля.
Данный материал описывает добавление одного поля в форму из страндартного комлекта Битрикса «Старт».
Сначала нужно создать свое пространство имен, чтобы обновления не затирали наши изменения, нужно стараться это делать обязательно.
1. Создаем в /bitrix/components/ свою папку, например, /dapit/.
2. В вновь созданную папку /dapit/ копируем из папки /bitrix/components/bitrix/ папку /main.feedback/.
3. Далее создаем папку /dapit/ для шаблонов с новым пространством имен в /bitrix/templates/ваш_шаблон/components/.
4. Создаем в ней папку шаблона /main.feedback/ и копируем в нее все файлы отсюда /components/dapit/main.feedback/templates/.default.
5. Правим файл template.php уже из папки /components/dapit/main.feedback/templates/main.feedback/, добавляя в него одно поле, например, «Удобное время для звонка». За основу берем поле «Имя».
На его основе создаем еще одно, прописываме новые значения и вставляем где нужно, наприме сразу по полем имя и у нас получтся следующее:
……Выше код мы не трогали……
……Ниже код мы не трогали……
6. Изменяем файл /bitrix/templates/ваш_шаблог/components/dapit/main.feedback/forma/lang/ru/template.php добавили одну строку с MFT_TIME
7. Теперь самое сложное, это оставшаяся кастомизация компонента в /bitrix/components/dapit/main.feedback/component.php. Тут я приведу сразу готовый код измененного стандатного файла. Везде где есть слово time или TIME, это то, что добавилось в нем.
$arResult[«TIME»] = htmlspecialcharsEx($_SESSION[«MF_TIME»]);
>
>
if($arParams[«USE_CAPTCHA»] == «Y»)
$arResult[«capCode»] = htmlspecialchars($APPLICATION->CaptchaGetCode());
$this->IncludeComponentTemplate();
?>
8. Изменяем языковой файл /bitrix/components/dapit/main.feedback/lang/ru/.parameters.php, опять же добавили лишь одну строку с TIME.
9. Напоследок заходим в Административной части Настройки —> Настройки продукта —> Почтовые события —> Почтовые шаблоны в «Отправка сообщения через форму обратной связи» и вставляем там наше поле TIME:
Информационное сообщение сайта #SITE_NAME#
——————————————
Вам было отправлено сообщение через форму обратной связи
Автор: #AUTHOR#
E-mail автора: #AUTHOR_EMAIL#
Удобное время для звонка: #TIME#
Текст сообщения:
#TEXT#
Сообщение сгенерировано автоматически.
Если я ничего не упустил, то теперь все должно получиться и работать.
Как сделать форму в Битрикс со своей версткой и Ajax режимом
Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.
Форма будет называться «Оставьте заявку». Наша обратная форма Битрикс будет содержать поля имя, телефон, сообщение.
Будет использоваться модуль bitrix webforms.
Создание и настройка формы в административном разделе
Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.
В противном случае, бывают баги, по типу «не отправляются сообщения из формы на почту», «не привязывается почтовый шаблон к форме».
Во вкладке Свойства заполняем все необходимые поля. Во вкладке «Доступ» проверьте, чтобы для группы «Все пользователи» было право «Заполнение формы«.
Капчу на данном этапе включать не будем.
Жмем Применить, чтобы создать форму.
Переходим во вкладку Вопросы и добавляем их.
Настройка полей для формы:
Так же создаем статус по умолчанию для результатов, если он не создался.
Заголовок: Default. Во вкладке Доступ для всех операций поставьте «Создатель результата».
В панели администратора всё добавили и сохранили, молодцы!
Вывод формы в публичном разделе сайта
Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.
А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.
Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.
Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.
Через несколько секунд появится окно настройки компонента.
Там нам надо заполнить:
После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.
Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.
В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.
Оставим только файл template.php
Приступим к редактированию шаблона.
В template.php доступны следующие переменные:
Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:
На основе переменных выше соберем шаблон
— выводит открытие формы со служебными скрытыми полями.
На этом можно закончить, форма уже будет работать.
Ajax отправка
Еще не забыли про ajax? Сейчас покажу вариант, который работает даже без JQuery.
Создайте в папке шаблона компонента файл script.js с контентом:
В шаблон (наш template.php) после добавьте строку
Создайте в папке шаблона компонента файл ajax.php с контентом:
В этом файле мы принимаем запрос от пользователя, если есть ошибки, выводим их в JSON, если всё успешно, так же через JSON говорим об успешности.
Аналогично компоненту веб формы, запускаем обработчики событий.
В этом варианте нет минусов, как в варианте с битриксовым аякс, потому что битрикс подменяет каждый раз HTML в нашей форме, а в текущем варианте DOM страницы не трогается.
Ajax. Битриксовый вариант.
Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:
«AJAX_MODE» => «Y»,
«AJAX_OPTION_SHADOW» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,
Теперь Битрикс сам добавит нужные скрипты.
Алгоритм работы Ajax формы:
Из этой логики мы получаем некоторые нюансы. Поля формы, обработанные на джаваскрипте при загрузке страницы, снова будут не обработанные, так как они заменились, а события загрузки страницы заново не было.
Особенность 1
Особенность 2
Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.
Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.
Проблема в том, что ajax будет заменять контент скрытого блока, внутри блока #1, а в блоке #2, который видит пользовать, изменений не будет.
Как исправить это? Вынести разметку попапа из шаблона компонента формы, то есть в нашем случае, вызов компонента сделать внутри
Настройка капчи
Чтобы в форме появилась капча:
Добавьте в шаблон формы следующий код:
В настройках формы включите показ капчи.
На этом капча уже будет работать.
Обновление капчи пользователем.
Бывает такое, что код с картинки не читается и пользователь не может отправить форму. Поможем пользователю.
Теперь, если пользователь не может прочитать код, он может обновить картинку.
Настройка формата изображения капчи
Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.
Своя верстка полей ввода в форме
До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.
Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.
Форма обратной связи на «старте»
Хочу сделать форму отправки сообщения на email (или попросту «обратная связь»
. Я буду использовать компонент добавления элемента инфоблока: минимум программирования, а все записи остаются в базе данных сайта, в любой момент можно к ним вернуться.
Сначала надо создать инфоблок, куда будут попадать отзывы, создам свойства «Город» и «email», в действительности их может быть больше.
Для всех пользователей даю права на изменения.
Получилась такая аккуратная форма:
Она уже будет работать и записи можно просмотреть из админки:
Теперь осталось сделать так, чтобы при добавлении записи отправлялось письмо ответственному человеку.
| Форма обратной связи на сайте |
Ссылку надо вставить свою.
В поле «кому» ставлю свой email.
Для отправки использую системный метод CEvent::Send
Взял за основу код из документации, получилось вот что:
Дополнено 19.06.2009 г. Чтобы включить защиту от автоматического заполнения включите в настройках компонента параметр
