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

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

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

22 мая 2018 в 13:05
ни то, ни другое. Стандартная «форма обратной связи» из вкладки «Служебные»
22 мая 2018 в 13:21

Да уже увидел не смог посмотреть сразу посольку сайт с докой по битриксу лежал. Нашел решение, которое должно вам подойти. Опубликовал в ответе.

22 мая 2018 в 14:51

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

/bitrix/components/newform/ /bitrix/templates/ваш_шаблон/components/newform/

/bitrix/components/bitrix/main.feedback/ в /bitrix/components/newform/main.feedback/ /components/main.feedback/ в /bitrix/templates/ваш_шаблон/components/newform/main.feedback/

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

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

Текущую редакцию Вашего 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 в параметрах метода — это идентификатор почтового шаблона который мы подготовили ранее, у вам он может отличаться. Если вы всё сделали правильно, в результате вам на почту будет приходить такое вот письмо:

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

Заключение

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