Как настроить форму обратной связи битрикс

Форма обратной связи

Описание main.feedback

Компонент выводит форму для отправки сообщения с сайта на E-mail. Компонент является стандартным и входит в дистрибутив модуля.

Для работы формы не требуется модуль Почта.

Компонент относится к Главному модулю.

Параметры

Поле	Параметр	Описание
Основные параметры
Использовать защиту от автоматических сообщений (CAPTCHA) для неавторизованных пользователей	USE_CAPTCHA	[Y|N] При отмеченной опции для неавторизованных пользователей будет использоваться CAPTCHA при создании сообщений.
Сообщение, выводимое пользователю после отправки	OK_TEXT	Задается текст сообщения, выводимый пользователю после отправки.
E-mail, на который будет отправлено письмо	EMAIL_TO	Задается E-mail, на который будет отправлено письмо (будет отображен в форме для отправки сообщений в поле Ваш E-mail).
Обязательные поля для заполнения	REQUIRED_FIELDS	Указываются поля формы, которые будут обязательными для заполнения.
Почтовые шаблоны для отправки письма	EVENT_MESSAGE_ID	Указывается почтовый шаблон, на основе которого будут отправляться письма.

Если компонент размещён на сайте, настроен, но сообщения не приходят, необходимо:

• С помощью Проверки системы необходимо убедиться что почта уходит с сайта.
• Убедиться, что есть активный почтовый шаблон FEEDBACK_FORM.
• Убедиться, что в шаблоне проставлен валидный адрес в поле Кому.

Пример вызова

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Источник

Как сделать форму в Битрикс со своей версткой и Ajax режимом

Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.

Форма будет называться «Оставьте заявку». Наша обратная форма Битрикс будет содержать поля имя, телефон, сообщение.

Будет использоваться модуль bitrix webforms.

Создание и настройка формы в административном разделе

Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.

В противном случае, бывают баги, по типу «не отправляются сообщения из формы на почту», «не привязывается почтовый шаблон к форме».

Теперь идем в Сервисы -> Веб формы -> Настройка форм и жмем там Создать, чтобы создать форму.

Во вкладке Свойства заполняем все необходимые поля. Во вкладке «Доступ» проверьте, чтобы для группы «Все пользователи» было право «Заполнение формы«.

Капчу на данном этапе включать не будем.

Жмем Применить, чтобы создать форму.

Переходим во вкладку Вопросы и добавляем их.

Настройка полей для формы:

• Имя:
  • Вкладка Свойства
    • Активность: да
    • Символьный идентификатор: «NAME«
    • Обязателен: да
  • Вкладка Вопрос
    • Заголовок: «Ваше имя«
  • Вкладка Ответ
    • Текст [ANSWER_TEXT]: ставим пробел
    • Значение [ANSWER_VALUE]: оставляем пустым
    • Тип поля: «text«
    • Параметры: пусто
• Телефон
  • Вкладка Свойства
    • Активность: да
    • Символьный идентификатор: «PHONE«
    • Обязателен: да
  • Вкладка Вопрос
    • Заголовок: «Номер телефона«
  • Вкладка Ответ
    • Текст [ANSWER_TEXT]: ставим пробел
    • Значение [ANSWER_VALUE]: оставляем пустым
    • Тип поля: «text«
    • Параметры: «phone«
• Сообщение
  • Вкладка Свойства
    • Активность: да
    • Символьный идентификатор: «MESSAGE«
    • Обязателен: нет
  • Вкладка Вопрос
    • Заголовок: «Сообщение«
  • Вкладка Ответ
    • Текст [ANSWER_TEXT]: ставим пробел
    • Значение [ANSWER_VALUE]: оставляем пустым
    • Тип поля: «textarea«
    • Параметры: «phone«

Так же создаем статус по умолчанию для результатов, если он не создался.

Заголовок: Default. Во вкладке Доступ для всех операций поставьте «Создатель результата».

В панели администратора всё добавили и сохранили, молодцы!

Вывод формы в публичном разделе сайта

Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.

А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.

Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.

Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.

Через несколько секунд появится окно настройки компонента.

Там нам надо заполнить:

• ID веб-формы — выбрать нашу форму
• Использовать расширенный вывод сообщений об ошибках — да
• Включить поддержку ЧПУ — нет
• Страница со списком результатов — пусто
• Страница редактирования результата — пусто
• Страница с сообщением об успешной отправке — пусто

• 
• 

После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.

Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.

Укажем новое название шаблона, шаблон сайта — текущий.

В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.

Оставим только файл template.php

Приступим к редактированию шаблона.

В template.php доступны следующие переменные:

• $arResult[«isFormErrors»] — равен «Y«, если есть ошибки с формой
• $arResult[«isFormNote»] — равен «Y«, если форма успешно отправлена. С условием по этой переменной можно выводить сообщение об успешной отправке уже без формы.
• $arResult[«FORM_HEADER»] — открытие формы и системные теги
• $arResult[«FORM_FOOTER»] — закрытие формы и системные теги
• $arResult[«QUESTIONS»] — массив вопросов формы
• $arResult[«isUseCaptcha»] — равно true, если включен показ капчи
• $arResult[«CAPTCHA_IMAGE»] — тег img с картинкой капчи
• $arResult[«CAPTCHA_FIELD»] — поле для ввода капчи

• $arResult[«FORM_ERRORS_TEXT»] — текст ошибок
• $arResult[«FORM_NOTE»] — сообщение об успешной отправке
• $arResult[«FORM_TITLE»] — заголовок формы
• $arResult[«FORM_DESCRIPTION»] — описание формы
• $arResult[«arForm»][«BUTTON»] — текст кнопки Отправить

Для вывода полей надо брать вопросы из $arResult[«QUESTIONS»] по символьному коду.

• CAPTION — имя поля
• IS_HTML_CAPTION — имя поля в формате HTML, Y/N.
• REQUIRED — обязательно к заполнению, Y/N.
• IS_INPUT_CAPTION_IMAGE — есть ли изображение вопроса
• HTML_CODE — HTML код поля
• STRUCTURE — детальное описание поля
• IMAGE — описание изображения вопроса, если IS_INPUT_CAPTION_IMAGE равен Y.

Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:

На основе переменных выше соберем шаблон

Логика его такая:

Вначале проверяем, подключает ли файл Битрикс или его открыл пользователь введя в браузере адрес шаблона. Если не битрикс — блокируем генерацию шаблона.

Если форма успешно отправлена — выводить сообщение, иначе — выводим форму.

— выводит открытие формы со служебными скрытыми полями.

Поле web_form_submit в значении Y — триггер для Битрикс, говорящее о том, что форма отправлена и надо бы проверить, что там ввел пользователь.

Если есть ошибки — выводим их в диве с классом errors.

Далее выводим три поля, у каждого: Имя, если обязательное — галочка, HTML код инпута для ввода.

Перед закрытием формы — кнопка отправить с тексом, который указан в настройках формы.

На этом можно закончить, форма уже будет работать.

Ajax отправка

Еще не забыли про ajax?

Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:

«AJAX_MODE» => «Y»,
«AJAX_OPTION_SHADOW» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,

Кстати, с помощью этих параметров добавить AJAX можно в любой компонент. Эти параметры — не особенность вебформ, реализована работа с ajax в базовом классе компонентов.

Теперь Битрикс сам добавит нужные скрипты.

Алгоритм работы Ajax формы:

1. Весь шаблон формы оборачивается в тег с уникальным ID.
2. После этого тега добавляется JS, который устанавливает событие на отправку формы.
3. Пользователь отправляет форму
4. На сервер запрос через весь шаблон доходит до вызова компонента
5. Битрикс обрабатывает введенные данные
6. Получает вывод шаблона формы и заменяет на странице в теге, добавленном в пункте 1, всё содержимое.
7. Результат: страница не перезагружалась, пользователь видит вместо формы сообщение об успешной отправке или ту же форму с ошибками.

Из этой логики мы получаем некоторые нюансы. Поля формы, обработанные на джаваскрипте при загрузке страницы, снова будут не обработанные, так как они заменились, а события загрузки страницы заново не было.

Особенность 1

Если в форме в поле телефона на JS ставится маска, например $(‘.my_phone_input’).mask(‘9 (999) 999 9999’), то маска пропадет после замены битриксом формы. Поэтому маску придется накладывать в файле template.php, чтобы она накладывалась каждый раз заново.

Особенность 2

Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.

Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.

#1 — блок компонента формы. Эту верстку мы генерируем в шаблоне на сервере.

#2 — блок, который появляется при открытии формы на фронте. В него копируется наша верстка.

Проблема в том, что ajax будет заменять контент скрытого блока, внутри блока #1, а в блоке #2, который видит пользовать, изменений не будет.

Как исправить это? Вынести разметку попапа из шаблона компонента формы, то есть в нашем случае, вызов компонента сделать внутри

Настройка капчи

Чтобы в форме появилась капча:

Добавьте в шаблон формы следующий код:

В настройках формы включите показ капчи.

На этом капча уже будет работать.

Обновление капчи пользователем.

Бывает такое, что код с картинки не читается и пользователь не может отправить форму. Поможем пользователю.

Теперь, если пользователь не может прочитать код, он может обновить картинку.

Настройка формата изображения капчи

Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.

Своя верстка полей ввода в форме

До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.

Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.

1. Для поля должен быть указан соответствующий тип type.
2. Требуется указать имя поля (name).
3. Если форма отправлена и были ошибки, значения в поле не должны пропадать.
4. Если поле обязательно к заполнению, должен быть атрибут required.
5. Для полей ввода номера телефона добавим класс phone.
6. Должна быть поддержка двух типов полей: text и textarea, так как в форме мы использовали только их.

Источник

Ajax форма обратной связи на bitrix

Всем привет. В данном посту мы рассмотрим простой пример создания формы обратной связи, форму обратного звонка на сайте. Реализовать форму вы сможете у себя на сайте, это может быть отдельная страница, либо модальное окно, которое будет доступно при клике на определённые кнопки. Заявки, отправляемые с формы, будут записываться в информационных блок, так же администрации сайта будут отправляться почтовые уведомления о новых заявках.

Теперь давайте приступим непосредственно к примеру. Первым делом, что требуется нам сделать, это подготовить информационный блок, в который будут записываться данные, а также, создать почтовое событие + шаблон для отправки письма уведомления на почту.

Добавление инфоблока для записи заявок

Создаем информационный блок «Заявки», и добавляем свойства для информационного блока. В моём примере путь к созданию нового инфоблока следующий:
Контент > Инфоблоки > Типы инфоблоков > Каталог > Добавить инфоблок

Назначение полей свойств говорит само за себя, мы будет записывать ID элемента, с которого отправляется форма, имя пользователя, телефон, почтовый адрес, а также записывать URL страницы, с которой были отправлены данные.

Добавление почтового события и шаблона

Далее создаём почтовое событие, которое будет вызываться при успешной отправке данных с формы на сервер.
Добавить новое почтовое событие можно по пути:

Настройки > Настройки продукта > Почтовые события > Типы почтовых событий > Добавить тип

Тип почтового события я указал как NEW_USER_RESPONSE, в самом деле вы можете назвать его по-своему, это не так принципиально. Далее создаем почтовый шаблон, который будет использован для отправки писем на почту администрации сайта.
Путь к созданию нового почтового шаблона такой:

Настройки > Настройки продукта > Почтовые события > Почтовые шаблоны > Добавить шаблон

Выбираем в качестве почтового события запись с кодом NEW_USER_RESPONSE, далее, как показано на скриншоте:

После того как сохранили почтовый шаблон, можно приступать непосредственно к самой форме отправки. Сайт, который использовался в примере свёрстан с использованием bootstrap 4, этого не говорит о том, что вам необходимо его так же использовать. Вы можете реализовать эту форму самостоятельно, без использование сторонних фреймворков для верстки. В моём же примере используется модальные окна, которые хорошо описаны в документации по bootstrap 4.
Сам код формы я поместил в основной файл шаблона header.php, так как модальное окно с формой должно быть доступно по всему сайту.

Кнопка вызова модального окна так же располагается на странице, выглядит она таким образом:

Итак, действие с открыванием и закрыванием модального окна выполняется самим фреймворком bootstrap, и большого интереса для нашего поста это не представляет. Для нас интересна сама отправка данных с формы. Начинать проверку полей и отправку мы будем при нажатии на кнопке «отправить».
Код написан на js + jquery, выполняет валидацию заполнения полей, а также отправку данных на сервер:

Хотелось бы немного пояснить по коду js. В коде объявляется переменная err, которая по сути является счётчиком ошибок при валидации. Если ошибок проверки полей не возникало, то значение счётчика соответственно равно 0. Это означает что после проверки полей, будет выполняться отправка данных на сервер, посредством ajax-запроса. В случае успешной отправки, значения полей будет очищаться. Если сервер отправил сообщение об ошибке или успешной отправке, они будут записываться в блок с классом .md-resp-msg, с указанием дополнительного класса для типа сообщения .md-true или .md-error. Это используется для стилизации цвета текста сообщения.

В корне сайта создаем ajax.customer-response.php который будет выполнять код на стороне сервера, при ajax-запросе.

Код на стороне сервера довольно прост, не смотря на его объем. Первое что выполняется – проверка отправленных полей, количество ошибок записывается в переменную $err, как вы, наверное, уже поняли с примером на js, если количество ошибок равно нулю, создается элемент в инфоблоке, а после вызывается почтовое событие, которому передаются ключевые поля для почтового шаблона. В качестве результата скрипт возвращает массив полей, конвертированный в строку json. Ключевой параметр в массиве, обозначающий успешность выполнения операции называется «status», по умолчанию он равен false, при успешном выполнении параметр переводится в значение true. Параллельно с ним, так же отправляются сообщения посредством поля msg. Сообщение формируется из двух полей, text – текст сообщения, type – обозначает тип сообщения, может быть true – успех, false – ошибка. Вот в целом собственно и всё. Если остались какие-либо вопросы, вы можете писать их в комментарии. Разумеется, форму можно переделать под ваши нужды, к примеру, добавить полей, или наоборот убрать их. Всё зависит от ваших задач.

Источник