Как создать обратную связь 1с битрикс

Настройка форм обратной связи

Текущую редакцию Вашего 1С-Битрикс можно просмотреть на странице Обновление платформы ( Marketplace > Обновление платформы ).

Ограничений нет

В готовом решении «Некстайп: Прайм» созданы семь видов форм обратной связи:

Форма «Заказать услугу». Используется на детальной странице «Услуги».
Форма «Заказать звонок». Используется в «шапке» сайта.
Форма «Задать вопрос». Используется на странице «Контакты» и на других внутренних страницах сайта.
Форма «Задать вопрос о товаре». Используется в на страницах товаров.
Форма «Заказать проект». Используется на детальной странице «Проекты».
Форма «Оформить заказ». Используется в корзине в случае, когда решение установлено на редакцию «Стандарт» CMS «1С-Битрикс: управление сайтом».
Форма «Резюме». Используется в разделе «Компания» > «Карьера в компании».

Все формы обратной связи созданы с использованием модуля «Веб-формы» от «1С-Битрикс: управление сайтом».

Перед тем как приступить к настройке и редактированию форм обратной связи необходимо выполнить настройку модуля «Веб-формы».

Для этого необходимо:

авторизоваться в административном разделе сайта с правами администратора;
перейти в раздел «Настройки» > «Настройки продукта» > «Настройки модулей» > «Веб-формы»;
убрать галочку для параметра «Использовать упрощённый режим редактирования форм»:

Сохраните настройки модуля.

Для настройки форм обратной связи, необходимо:

авторизоваться в административном разделе сайта с правами администратора;
перейти в раздел «Сервисы» > «Веб-формы» > «Настройка форм»:

Для редактирования каждой формы, нужно нажать «Изменить» для необходимой формы:

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

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

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

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

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

Создание контактной формы по канонам БМ

Форма обратной связи — один из самых част встречающихся элементов на сайте и сейчас я хочу рассказать о том как сделать её на основе компонента, при этом не используя встроенный в битрикс модуля «Веб-формы» т.к. он доступен только начиная с лицензии «Стандарт», а подавляющее большинство сайтов не имеющих отношения к Интернет-торговле делаются на редакции «Старт». Так же мы учтём в форме один маленький лайфхак который я узнал на курсе Бизнес молодость ЦЕХ, который мне посчастливилось проходить летом 2019-го года. И так, поехали.

Подготовка компонента

Чтобы сэкономить время, предлагаю установить один прикольный модуль «Мастер создания компонента», он позволит быстро и без лишних телодвижений создать простой макет нашего компонента формы обратной связи. Устанавливаем компонент через страницу на маркетплейсе или через админку.

Затем переходим в раздел: Настройки -> Настройки продукта -> Список мастеров, тут ищем «Мастер создания компонента» и в контекстном меню напротив, выбираем пункт «Установить»:

Запуск мастера создания компонента

Для нашего компонента я выбрал следующие базовые настройки:

Базовые настройки будущего компонента

Тип компонента — простой
Пространство имён — custom
Идентификатор — emptyscript
Название — Пустой скрипт
Описание — Заготовка под кастомный компонент
Категория в списке компонентов — Custom

Почему пустой скрипт? Т.к. функциональность формы крайне простая мы будем описывать бизнес логику формы в файлах component_epilog.php или доп.файлах ajax.php в папке шаблона компонента. А сам компонент emptyscript послушит каркасом для ряда простых форм.

Опции шаблона компонента следующие:

Опции шаблона

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

Итоговые настройки мастера

Нажимаем «Создать», ждём пару секунд, готово! Компонент успешно создан! Можете поблагодарить автора компонента донатом, он действительно экономит кучу времени. Давайте создадим какой-нибудь раздел на сайте и разместим нашу заготовку.

Перейдём к описанию самой формы.

Шаблон формы обратной связи

Допустим вы фрилансер, вебмастер, у вас есть свой landing-page и вы хотите подвесить туда форму обратной связи. Как будет выглядеть наш шаблон? Какую информацию будем собирать о клиенте? Предлагаю собрать следующее:

Имя
Email
Контактный телефон
Сайт (если есть)
Описание проблемы или задачи которую хочет решить клиент
Уточнение способа связи (та самая фишка от БМ)
Согласие с политикой конфиденциальности

Основываясь на этом списке, делаем форму:

Шаблон формы

Первые три поля обязательны, т.к. нам нужна эта информация чтобы дозвониться до клиента и обсудить проект, а если не дозвонились то отправить адресованное ему письмо с коммерческим предложением (КП) и т.д. в котором нужно обратиться по имени. Поля «Сайт» и «Описание проблемы или задачи» позволят вам лучше подготовиться к обработки заявки, сделать более адресное КП.

Блок «Как с вами связаться» очень важен. Есть категория клиентов которая не любит звонки им гораздо удобнее провести первичный контакт с исполнителем через WhatsApp или электронную почту. Этот блок позволяет узнать предпочтение клиента и связаться с ним, наиболее удобным для него способом.

И конечно же «Согласие с политикой конфиденциальности». Согласно закону 152-ФЗ «О персональных данных», вы как владелец веб-сайта обязаны запросить подобное согласие от клиента если собираете его персональные данные (имя, телефон и т.п.). Кстати быстро сгенерировать страницу для сайта с описание политики конфиденциальности поможет этот сервис.

С внешним видом определились, давайте верстать!

 /ajax.php" method="POST"> Оставьте заявку.
 и получите аудит вашего сайта бесплатно
     Как нам с вами связаться?   Позвонить по телефону 
  Написать в WhatsApp 
  Написать на почту 
 
 
  Согласен с политикой конфиденциальности

Для валидации используем стандартный HTML5, однако при желании можно подключить jQuery Validate или аналогичный плагин.

Большая часть стилей, это стандартный Bootstrap 4, однако для некоторых элементов формы стиля я всё же приведу (это scss):

 .pb_form_v1 < padding: 50px; @include pb_box-shadow(1px, 11px, 68px, -20px, rgba($black,.75)); @include media-breakpoint-down(md) < padding: 30px; >> // inputs input, select, textarea < font-weight: 300; color: rgba($black, .7); >.pb_select-wrap < position: relative; &:before < @include Ionicons; content: "\f3d0"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; >select < appearance: none; >> // select < .form-control < &.reverse < background: lighten($black, 95%); transition: .3s all ease; border-color: lighten($black, 95%); &:focus, &:active < background: none; border-color: theme-color('primary')!important; >> > .form-control-outline < background: none; &:focus, &:active < background: none; >&.light < color: $white; border-color: rgba($white, .4); &:focus, &:active < border-color: rgba($white, 1); >&::placeholder < color: rgba($white, .5); >> &.dark < color: $body-color; >> // buttons .btn < &:focus, &:active < box-shadow: none!important; outline: none!important; >> .btn-shadow-blue < @include pb_box-shadow(0px, 15px, 28px, -5px, rgba($blue,.45)); >.pb_btn-pill < border-radius: 50px; padding-left: 40px; padding-right: 40px; >.pb_outline-light < border: 1px solid rgba(255,255,255,.2); text-transform: uppercase; background: none; color: #ffffff; &:hover, &:active, &:focus < outline: none; background: $white!important; border: 1px solid #ffffff; color: $black; >> .pb_outline-dark < border: 1px solid rgba(0,0,0,.2); text-transform: uppercase; color: #000000; background: none; &:hover, &:active, &:focus < outline: none; background: $black!important; border: 1px solid #000000; color: $white; >>

И стили для чекбоксов блока «Как нам с вами связаться?»:

 .custom-control < position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; min-height: 1.8rem; padding-left: 1.5rem; margin-right: 1rem; >.custom-control-input < position: absolute; z-index: -1; opacity: 0; >.custom-control-input:checked ~ .custom-control-indicator < color: #fff; background-color: #007bff; >.custom-control-input:focus ~ .custom-control-indicator < -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007bff; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007bff; >.custom-control-input:active ~ .custom-control-indicator < color: #fff; background-color: #b3d7ff; >.custom-control-input:disabled ~ .custom-control-indicator < background-color: #e9ecef; >.custom-control-input:disabled ~ .custom-control-description < color: #868e96; >.custom-control-indicator < position: absolute; top: 0.4rem; left: 0; display: block; width: 1rem; height: 1rem; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ddd; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; >.custom-checkbox .custom-control-indicator < border-radius: 0.25rem; >.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator < background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); >.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator < background-color: #007bff; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); >.custom-radio .custom-control-indicator < border-radius: 50%; >.custom-radio .custom-control-input:checked ~ .custom-control-indicator < background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); >.captcha-wrapper

Давайте так же подключим плагин для всплывающих окон, чтобы показывать пользователю результат. Я предпочитаю magnificPopup , подключите плагин, стили и jQuery (если ещё не сделали этого):

И создайте внизу страницы (после формы) блок для показа всплывающего окна:

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

Подключаем проверку Google

Перейдите на страницу Google reCaptcha (у вас должен быть аккаунт на Google), нажмите кнопку «Создать» и введите следующие настройки:

Настройка Google reCaptcha

Указываем тип капчи «Я не робот»:

Тип капчи Я не робот

После сохранения настроек, вы получите пару ключей, а именно «Ключ сайта» и «Секретный ключ»:

Ключи Google reCaptcha

Их лучше сразу сохранить в константах сайта. Обычно это файл init.php или отдельный файл constants.php подключаемый в начале init.php.

Добавим блок капчи в вёрстку формы, вот так (можно вставить его перед согласием с политикой конфиденциальности):

Так же необходимо подключить js скрипта api Goolge reCaptcha, делается это в файле header.php шаблона сайта:

 addString(' ');

Проверка ввода капчи

Для верификации ввода капчи нам потребуется дополнительный php класс ReCaptcha, его можно найти на GitHub. Скачиваем и подключаем его в наш компонент. Т.к. для обработки формы я собираюсь использовать ajax.php подключим этот класс туда (ajax.php это доп.файл в лежащий в папке с шаблоном компонента и отвечающий за серверную обработку запроса с формы).

 verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); > //Проверяем ответ Google if ($response->success) < //Отправляем форму, записываем данные в инфоблок . echo json_encode(['success'=>'y', 'message'=>'Заявка успешно отправлена! Мы скоро свяжемся с вами.']); > else < echo json_encode(['success'=>'n', 'message'=>'Вы не прошли проверку Google reCaptcha']); > >

Как видите здесь мы создаём экземпляр класса ReCaptcha() подставляя ранее полученный «секретный ключ», Google по средствам своего API сам проверит валидность капчи и вернёт соответствующий ответ в переменную $response. Проверка $response->success сообщает нам об успешной проверки пользователя или же о провале.

Давайте добавим JavaScript обработчик нашей форме, чтобы удостовериться что всё работает:

 //Отправка формы $('.ajax_form').submit(function(event) < event.preventDefault(); var form = $(this); $.ajax(< url: form.attr('action'), method: 'POST', data: form.serialize(), beforeSend: function () < /* здесь можно задать визуальный эффект отправки формы*/>, success: function (data) < var formResponse = $.parseJSON(data); if(formResponse.success == 'y')< $('#js_contact_form_popup').html('Спасибо! 
Ваша заявка успешно отправлена. 
Мы скоро свяжемся с вами для уточнения деталей.'); form[0].reset(); > else < $('#js_contact_form_popup').html('Ошибка!
' + formResponse.message); > //Показываем всплывающее окно с сообщением от сервера $.magnificPopup.open( < items: < src: $('#js_contact_form_popup'), type: 'inline', mainClass: 'mfp-fade', removalDelay: 300, >>); > >); >);

Подробнее о том как работать с jQuery Ajax можно прочитать в этой статье. Проверим работу капчи:

Шаблон письма

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

Имя: #USER_NAME#
Телефон: #USER_PHONE#
Email: #USER_EMAIL#
Сайт: #USER_WEBSITE#
Способ связи: #CONNECT_TYPE# (предпочтительный способ связи с клиентом)

Осталось дополнить наш ajax.php чтобы в случае успешной проверки капчи он отправлял данные на почту:

 verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); > //Проверяем ответ Google if ($response->success) < //Отправляем форму $arrFields = [ 'USER_NAME' =>strip_tags($_POST['USER_NAME']), 'USER_EMAIL' => strip_tags($_POST['USER_EMAIL']), 'USER_PHONE' => strip_tags($_POST['USER_PHONE']), 'USER_MESSAGE' => strip_tags($_POST['USER_MESSAGE']), 'USER_WEBSITE' => strip_tags($_POST['USER_WEBSITE']), 'CONNECT_TYPE' => strip_tags($_POST['CONNECT_TYPE']), ]; if(CEvent::Send('CUSTOM_FORM', SITE_ID, $arrFields, 'N', 10))< echo json_encode(['success'=>'y', 'message'=>'Заявка успешно отправлена! Мы скоро свяжемся с вами.']); > > else < echo json_encode(['success'=>'n', 'message'=>'Вы не прошли проверку Google reCaptcha']); > >

Заявка с сайта

Метод CEvent::Send() отвечает за отправку письма, число 10 в параметрах метода — это идентификатор почтового шаблона который мы подготовили ранее, у вам он может отличаться. Если вы всё сделали правильно, в результате вам на почту будет приходить такое вот письмо:

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

Заключение

На первый взгляд внедрение такого функционала может показаться сложным, но если всё разложить на последовательные логические шаги и использовать пару спец.инструментов задача становится значительно проще! Если у вас остались вопросы — пишите их в комментариях. Желаю удачи!

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

Компонент выводит форму для отправки сообщения с сайта на 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.
Убедиться, что в шаблоне проставлен валидный адрес в поле Кому.

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

IncludeComponent("bitrix:main.feedback","",Array( "USE_CAPTCHA" => "Y", "OK_TEXT" => "Спасибо, ваше сообщение принято.", "EMAIL_TO" => "my@email.com", "REQUIRED_FIELDS" => Array("NAME","EMAIL","MESSAGE"), "EVENT_MESSAGE_ID" => Array("5") ) );?>

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

Как сделать чтобы после нажатия на кнопку «Отправить» в Форме обратной связи происходил переход на другую страницу сайта?

Постоянный посетитель
Сообщений: 213 Баллов: 40 Регистрация: 14.07.2015
11.01.2016 18:54:46
Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
12.01.2016 00:41:52

Цитата
Kler написал: Редирект, например, дописать https://dev.1c-bitrix.ru/api_help/main/functions/other/localredirect.php

а куда дописать? у меня либо ничего не происходит либо идет сразу переход на другую страницу. а мне нужно чтоб после нажатия переходил.

Постоянный посетитель
Сообщений: 322 Баллов: 28 Регистрация: 26.05.2015
Если программа заработала с первого раза, это не значит, что она написана неправильно.
12.01.2016 07:41:10

Цитата
Максим Толокань написал: а куда дописать? у меня либо ничего не происходит либо идет сразу переход на другую страницу. а мне нужно чтоб после нажатия переходил.

На событие click кнопки напишите редирект на нужную вам страницу.
Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
12.01.2016 09:41:23

Блин, чего то я не понимаю. Жизнь заставляет учить веб-технологии. Объясните пожалуйста на пальцах (один раз — так чтоб понял). Куда писать редирект?
Где находиться скрипт для обработки данной формы? в каком файле надо дописать редирект?

Постоянный посетитель
Сообщений: 322 Баллов: 28 Регистрация: 26.05.2015
Если программа заработала с первого раза, это не значит, что она написана неправильно.
12.01.2016 13:14:17
Ну если по-простому то так:

Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
12.01.2016 14:09:34
там код кнопки такой
при написании
обновляется страница и все (ни куда не переходит)
Сообщений: 1146 Баллов: 101 Регистрация: 16.03.2013
13.01.2016 10:30:37
Для компонента bitrix:main.feedback установлен редирект в коде самого компонента.

$arResult["PARAMS_HASH"] = md5(serialize($arParams).$this->GetTemplateName()); . LocalRedirect($APPLICATION->GetCurPageParam("success=".$arResult["PARAMS_HASH"], Array("success"))); .

Поэтому самое простое — проверять наличие в текущем GET-запросе параметра success в component_epilog шаблона.

$sHash = md5(serialize($arParams) . $templateName); if (isset($_GET['success']) && ($_GET['success'] == $sHash)) LocalRedirect(SITE_DIR);

Не проверено, но по идее должно работать. В качестве SITE_DIR можете указать требуемый раздел сайта.
Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
13.01.2016 15:04:01
Первую часть нашел и понял а вот со второй проблема. объясните пожалуйста как ребенку 10 лет что это означает.
——————————
Поэтому самое простое — проверять наличие в текущем GET-запросе параметра success в component_epilog шаблона.

Код
$sHash = md5(serialize($arParams) . $templateName); if (isset($_GET[‘success’]) && ($_GET[‘success’] == $sHash)) LocalRedirect(SITE_DIR);

Не проверено, но по идее должно работать. В качестве SITE_DIR можете указать требуемый раздел сайта.
——————————-
Постоянный посетитель
Сообщений: 322 Баллов: 28 Регистрация: 26.05.2015
Если программа заработала с первого раза, это не значит, что она написана неправильно.
13.01.2016 15:13:02

Цитата
Максим Толокань написал: Первую часть нашел и понял а вот со второй проблема. объясните пожалуйста как ребенку 10 лет что это означает.

Вставьте вторую часть в файл component_epilog.php.
Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
17.01.2016 02:19:38

такого файла нет.
создал его и вставил вторую часть заключив ее в
Ничего! вот только теперь даже удалив этот файл при нажатии «отправить» страница обновляется, но письма не приходят.
с файлом это связано или нет не знаю.

Сообщений: 1146 Баллов: 101 Регистрация: 16.03.2013
18.01.2016 11:13:26

Цитата
Максим Толокань написал: такого файла нет.

Его необходимо создать в папке используемого шаблона компонента.
Если шаблон редактируется впервые, то его необходимо скопировать в текущий шаблон сайта.
http://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=2829#tamplate_edit
Далее в папке шаблона компонента создаёте (если он там отсутствует) файл component_epilog.php.

Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
20.01.2016 15:05:33
пробовал так
не получилось.
и так
тоже не получилось
Сообщений: 1146 Баллов: 101 Регистрация: 16.03.2013
21.01.2016 10:22:18

Всё дело в параметрах компонента, которые в component.php обновляются после формирования строки HASH, поэтому нужно избавиться от лишних параметров для проверочной строки. Также переменная $templateName имеет отличное значение от CBitrixComponent::GetTemplateName.

 getTemplateName(); $tmpParams = $arParams; if (isset($tmpParams['EVENT_NAME'])) unset($tmpParams['EVENT_NAME']); $sHash = md5(serialize($tmpParams) . $tplName); if (isset($_GET['success']) && ($_GET['success'] == $sHash)) LocalRedirect('/contacts/');

Стоит ли доверять component.php, в котором после обновлений может измениться список параметров решать Вам, но можно и сократить данный код:

  0) LocalRedirect('/contacts/');

Заглянувший
Сообщений: 32 Баллов: 1 Регистрация: 07.07.2015
21.01.2016 15:40:07
Огромное спасибо Dmitry Sirotin .
Все заработало!
Заглянувший
Сообщений: 1 Регистрация: 03.02.2022
18.04.2023 11:08:56
Добрый день!
Не совсем понимаю куда вставить этот код, чтобы работало?
Страницы: 1

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507

Контент для лиц от 16 лет и старше