Компонент для 1С-битрикс: Форма обратной связи — простой конструктор веб-форм

Компонент для 1С-битрикс: Форма обратной связи — простой конструктор веб-форм

Форма обратной связи. Сохраняет результаты в указанном в настройках компонента инфоблоке. Есть возможность добавлять поля формы.

1. Простая установка и настройка. Уже при установке модуля автоматически создаются необходимые инфоблоки и почтовые шаблоны. Вам необходимо просто разместить компонент "форма обратной связи" в нужном месте и настроить отображение полей.
2. Хранение всех сообщений в базе данных. Все сообщения отправляются на указанные адреса электронной почты и сохраняются в инфоблоках 1С-Битрикс. Это исключает потерю сообщений при сбое почтовой системы.
3. Неограниченное количество полей. Изначально в компоненте "Форма обратной связи" представлен минимальный набор полей. Вы всегда можете добавить дополнительно любое количество текстовых полей (поддерживаются поля типа текст, файл и список), задать им название и настроить обязательность заполнения.
4. Маска для корректного заполнения номера телефона. У поля PHONE автоматически подключается так называемая "маска" — автоматическая расстановка тире между цифрами для удобного восприятия номера телефона. Маска работает с международными форматами ( 8 (888) 888-88-88 ).
5. Посетители могут отправлять вам свои файлы прямо через форму обратной связи. При этом вы можете настроить, какие типы файлов разрешается загружать.
6. Защита от спама. Для неавторизированных посетителей по умолчанию выводится КАПТЧА, осложняющая автоматическое заполнение веб формы обратной связи спам-ботами. Если каптча нечеткая, посетитель может запросить новую картинку каптчи, кликнув по ссылке "обновить картинку". При этом будет сгенерирована новая картинка каптчи, а не новая каптча, что избавит посетителя от повторного ввода каптчи (например, если была не понятна только последняя буква). Добавлена reCapthca от Google вместо стандартной Капчи (на выбор).
7. Настройка внешнего вида и реакции. Прямо в свойствах компонента можно указать размеры шрифтов, цвета и ширину полей. Есть возможность включить отправку сообщения без перезагрузки страницы, задать текст и реакцию формы после успешной отправки сообщения.
8. Загрузка веб-формы во всплывающем окне. Просто укажите в настройках компонента, как должна отображаться веб форма обратной связи у вас на сайте.
9. Разделение обращений по категориям. Если в инфо блоке создать разделы — компонент форм обратной связи автоматически их подхватит и выведет поле с выпадающим списком, который содержит названия этих разделов. Таким образом вы легко сможете разделить обращения, например, по категориям (вопрос, предложение, пожелание, жалоба). Сообщения будут автоматически размещаться в указанном пользователем разделе инфо блока.
10. Отправка всех обращений в CRM корппортала. Сообщения появляются у вас в CRM в виде "Лидов". Работает как с облаком, так и с коробочными версиями.

Вот такую веб-форму вы можете получить на вашем сайте буквально за несколько минут:

После загрузки и установки модуля в списке компонентов появится новый элемент "Форма обратной связи".
Откройте нужную страницу на редактирование и перетащите мышью компонент и нажмите кнопку "сохранить".

В итоге мы получим следующую форму (вид для неавторизированных посетителей):

Для администраторов и прочих авторизированных посетителей защита от спама отображаться не будет.

Следующие два изображения отображают элементы настроек компонента:

• Шаблон компонента — Вам доступны несколько шаблонов, отвечающих за внешний вид формы обратной связи.
• Тип Инфо Блока, Инфо Блок — Указывает, где будут храниться отправленные сообщения и от куда браться набор дополнительных полей для формы. Вы можете указать любой другой инфоблок по своему усмотрению. По умолчанию создается и указывается инфоблок "Обратная связь".
• Тип почтового события — Создается автоматически и доступен для редактирования в почтовых шаблонах сайта.
• Поля для заполнения — Набор полей, доступных для вывода в форм обратной связи. Берутся автоматически из свойств инфоблока, указанном в настройках выше. Выделите нужные поля мышкой, удерживая клавишу "ctrl" на клавиатуре.
• Обязательные для заполнения — эти поля будут помечены звездочкой. Без заполнения данных полей форма отправляться не будет, а посетителю будет отображаться текст ошибки.
• Сделать именем элемента — Укажите поле, которое будет сохраняться в имени элемента. Для разных задач удобно использовать разные типы имен.
• Дополнительный Email (через запятую) — Укажите адреса, на которые будут отправляться сообщения, отправленные с данной веб-формы. По умолчанию письма отправляются только на адрес, указанный в настройках сайта в поле "E-Mail адрес по умолчанию".
• Текст, выводимый при успешном добавлении сообщения — занесите приемлемый для вашего сайта текст, выводимый посетителю.
• Выдавать сообщения об ошибках — Отвечает за отображение ошибок заполнения формы. По умолчанию — включено.
• Активировать элемент после добавления — по умолчанию добавленное сообщение сохраняется в элементе, помеченном как "активный".
• Использовать CAPTCHA — выводит защиту от спам-ботов автоматического заполнения веб-форм. По умолчанию — включено. Для авторизированных пользователей каптча не выводится.
• Отправлять подтверждение о принятии обращения, если указан e-mail — Если в вашей форме представлено поля для ввода e-mail посетителя, вы можете отправлять ему на указанный адрес подтверждение, что его сообщение получено вами.
• Убирать форму после отправки сообщения — включите данную опцию, если после отправки сообщения посетителем, форму необходимо скрыть (останется только текст, сообщающий об успешной отправке).
• Раздел "внешний вид" — задайте размеры и цвет элементов веб-формы. В размерах поддерживаются параметры в процентах и пикселах.
• Раздел " Управление режимом AJAX" — включите режим AJAX, если хотите, чтобы форма отправлялась без перезагрузки страницы.

Для добавления новых полей необходимо зайти в административную часть в инфоблок, используемый для требуемого компонента и перейти по ссылке "Настройка информационного блока" (смотрите рисунок выше).

В открывшемся окне выбираем вкладку "Свойства" и прописываем нужные поля:

Тип поля может быть либо "Строка" либо "Файл". Указываем нужные параметры и нажимаем кнопку "Применить".
Для поля типа "Файл" потребуется настроить дополнительные свойства. Кликаем на кнопочку настройки поля:

В появившемся окне указываем требуемые к загрузке документы и нажимаем кнопку "Далее" и после возвращения к предыдущему окну кнопку "Применить".

После того, как мы добавили новые свойства, нужно отметить их в свойствах компонента:

Отмечать поля нужно мышкой, при этом удерживать кнопку ctrl на клавиатуре.

Всплывающее окно битрикс 24

1. Получаем от Bitrix код для формы
2. Выбираем код «Клик по ссылке»
3. Удаляем в коде фразу «Подать заявку»
4. Добавляем скрипт управления из нужной нам кнопки
5. Меняем в скрипте свои данные
5. Прописываем в нужной кнопке ссылку #bitrixform

Всплывающие окна

Владислав, скажите, пожалуйста, каких именно данных не хватает в блоке с информацией о контакте. Сейчас в сделке можно вынести привязку к контакту в шапку, перетащив это поле из тела документа. В этом случае будет отображаться фото, ФИО контакта телефоны и e-mail адреса, которые были указаны при создании контакта.

Какие еще данные вы хотели бы видеть о контакте в карточке сделки?

Вы можете настроить показ всплывающего окна по своему вкусу и под свои задачи.

Настройки закрытия всплывающего окна

• Отображать крестик вверху окна? — добавляет крестик в правый верхний угол всплывающего окна который закрывает всплывающее окно;
• Закрывать окно при клике вне окна? — позволяет включать/выключать закрытие всплывающего окна при клике вне окна, т.е. при клике на любую область затемненной страницы;
• Закрывать окно при клике на текст закрытия? — позволяет включать/выключать закрытие всплывающего окна при клике специальный текст закрытия;
• Текст закрытия окна — напишите специальный текст закрытия всплывающего окна, чтобы пользователь не хотел его закрыть!;

Анимации и эффекты отображения всплывающего окна на странице

• Эффект появления окна — выберите анимацию появления всплывающего окна из списка текущих анимаций;
• Эффект скрытия окна — выберите анимацию исчезновения всплывающего окна из списка доступных анимаций;
• Цвет затемнения страницы — позволяет указать цвет затемнения страницы, который будет накладываться при появлении всплывающего окна;
• Прозрачность затемнения — позволяет указать процент прозрачности затемнения страницы.
  

Расположение всплывающего окна

• Позиционирование — выберите расположение всплывающего окна на странице;
• Фиксировать окно при прокрутке? — позволяет включить/выключить залипание всплывающего окна при прокрутке страницы.
  

Таймер обратного отсчета

• Отображать таймер — таймер обратного отсчета позволяет дополнительно призвать пользователя к действию;
• Таймер работает до — время, до которого будет работать таймер обратного отсчёта. По истечении времени всплывающее окно автоматически перестанет показываться. Необходимо указывать время относительно времени сервера;
• Текущее время сервера — указано текущее время сервера. Обновляется при перезагрузке страницы;
• Текст таймера — сообщение, которое будет отображаться в блоке таймера. Вы можете выбрать расположение текста относительно изображения.
  

«Упростите мне Битрикс24!» – А, пожалуйста! (как упростить интерфейс Битрикс24, заточив его под свой регламент)

Да, есть такое: Битрикс24 — большой «комбайн», который практически никто не использует по всем его возможностям, каждый внедряет свой набор значимых функций, остальные «кнопки» просто приходится терпеть. Хотя к этому адаптируешься быстро и напрягаться перестаешь.

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

Вот фрагмент одного кейса, где мы решали вопрос упрощения интерфейса.

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

Упрощением интерфейса решалось сразу несколько задач:

• повышение эргономики рабочего пространства,
• повышение степени информационной безопасности (нечего лазить, куда не надо),
• усиление рамок регламента работы

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

Интерфейс сотрудников с ролью «менеджер по продажам» был выполнен в упрощенном варианте. К стандартной верхней части (блок логина и регистрации начала и окончания рабочего дня) остался ограниченный по функционалу рабочий блок с двумя пунктами меню: «Компании» и «Счета».

При нажатии на кнопку «Добавить компанию» в списке компаний форма открывается во всплывающем окне, а не на новой странице.

Карточка компаний приведена к более подходящему виду со своими индивидуальными закладками (скрин из ТЗ).

Кураторы и пользователи выше по иерархии видят вкладку «История».

Фиксация результата звонка

Для фиксации результата звонка менеджер нажимаем на единственную доступную ему кнопку «+Звонок», в результате чего открывается форма со своим набором полей:

На открывшейся форме располагаются поля:

• «Когда»: заполняется автоматически текущими датой и временем;
• «С кем» — подбирается один из контактов (физических лиц) – сотрудников организации заказчика;
• «Тема» — текстовый комментарий;
• «Результат звонка» — выпадающий список их предустановленных результатов звонка;
• «Товар/Услуга» — подбора товара из справочника.

Блок для «перезвона»:

• «Дата перезвона» — на основании этого поля (если заполнено) создается запланированный звонок с указанной датой.

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

Возможность крепить товары к звонкам и выставление счетов

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

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

Добавление нового сотрудника в компанию заказчика

Добавление нового сотрудника в компанию заказчика происходит в детальной карточке компании на вкладке «Сотрудники компании», кнопка «+Контакт». В результате открывается popup-окно (без перехода на новую страницу). В этой форме выводится базовая информация, для быстрого ввода контакта. В будущем созданную карточку физического лица (контакта) можно будет дозаполнить.

Формы Битрикс24

Практически любая современная компания имеет свой собственный сайт. Сайт — это идеальное решение для привлечения новых, потенциальных клиентов. При помощи Bitrix24 у вас есть возможность создать ознакомительный сайт со всей необходимой информацией о вашей компании и даже целый онлайн-магазин без особых усилий и затрат.

Созданный таким образом сайт содержит формы для обратной связи. Они могут быть размещены как на сайтах, созданных через инструмент «Битрикс24.Сайты», так и добавлены на уже существующий сайт для его связки с CRM Битрикс24. Посетители сайта заполняют созданную с помощью Битрикс24 форму, и вся контактная информация сразу же переносится в CRM. После этого смело можно приступать к общению с новым клиентом!

Далее мы детально изучим весь процесс создания формы обратной связи Битрикс24 и разберемся с настройками параметров.

Размещение формы обратной связи Битрикс24

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

Чтобы начать процесс создания такой формы, нужно выбрать подходящий вам шаблон. Рассмотрим все возможности эксплуатации формы захвата Битрикс24 на примере небольшого сайта о туристических услугах. Для начала создадим собственный сайт или воспользуемся одним из шаблонов, заготовленными Bitrix24. Далее создаём новый блок с помощью кнопки «Добавить блок» и выбираем раздел «CRM форма».

В нём представлено более десяти видов готовых форм, вам необходимо лишь выбрать подходящий вам шаблон и добавить его на страницу вашего сайта или интернет-магазина. После выбора нужной формы вы сможете настроить внешний вид блока и его отображение на сайте. Выбрать цвет фона и настроить отступы можно с помощью кнопки «Дизайн» слева, в правой части блока.

Редактировать внешний вид блока и настроить его отображение на сайте можно при помощи кнопки «Редактировать».

В этом разделе вы сможете:

• Редактировать или изменить картинку формы Битрикс24;
• Скрыть или показать заголовок формы;
• Изменить дизайн;
• Настроить саму CRM-форму;

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

CRM-форма, виджет на сайт

«Виджет на сайт» объединяет все цифровые каналы коммуникаций с клиентами напрямую из вашего Bitrix24. При добавлении виджета вы сможете:

• Вставлять на свой сайт специальный html код;
• Использовать онлайн-чат, обратный звонок, CRM-форму — весь необходимый функционал для связи вашей компании с вашими клиентами;
• Повысить конверсию сайта и увеличить продуктивность отдела продаж.

Также на сайте появиться так называемая «Кнопка» для того, чтобы при нажатии на неё посетитель выбирал удобный способ связи с вашей организацией.

Перейти к настройке CRM-формы можно тремя способами:

На основной странице вы можете воспользоваться предустановленными виджетами или создавать собственные. У каждой формы есть краткая информация:

1. Дата создания;
2. Кем и когда активирован виджет;
3. Положение на странице;
4. Настройка отображения.

Для того, чтобы создать или внести изменения в уже созданную форму обратной связи Битрикс24 нужно перейти в раздел «CRM» → «Ещё» → «CRM-формы».

На этой странице есть 2 предустановленных формы:

1. Форма обратной связи;
2. Контактные данные.

В этих формах также указывается основная информация:

• Дата создания;
• Кто и когда активировал форму;
• Публичная ссылка;
• Количество лидов.

Размещение формы на сайте возможно при помощи специального кода, который можно найти, нажав на кнопку «Код на сайт» или же с помощью «Публичной ссылки», которую можно найти в списке основной информации о форме. Скопируйте и отправляйте прямо клиенту!

Кейс: корпоративный портал Bitrix24 для оконной компании

Заказчик обратился к нам за помощью в решении указанных проблем. А именно: требовалась удобная CRM, которая позволяла бы хранить информацию о заказчиках (включая потенциальных), а также систематизировать коммуникации между сотрудниками компании и с внешними лицами (заказчики). Также система должна помогать отслеживать эффективность продаж и рекламы, включая распределение по видам рекламы.

Планировалась интеграция с SIP-телефонией, 1С заказчика и системой расчета изделий WinDraw

Функционал:

• Были проанализированы бизнес-процессы в компании и составлены схема движения лидов, и этапы в сделках. На каждом этапе настроены необходимые тригеры и роботы, которые помогают менеджерам не затягивать сроки выполнения действий по заказу.

• Разработаны и внедрены индивидуальные карточки лидов и сделок по требованиям оконной компании. Теперь менеджеры не могут переводить сделку в значимые статусы, не прикрепляя к бизнес-процессам сканы документов. Теперь менеджер всегда может найти первичные документы по клиенту в единой системе.

• Настроены индивидуальные отчеты по требованию руководителей отдела продаж и маркетинга. Отслеживать воронку продаж стала проще.

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

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

• Установлены формы и открытые линии на сайт клиента. С сообщениями из всех мессенджеров, email, онлайн-чатов можно работать в 1 месте.

• Настроен отчёт по статистике диалогов.

Дополнительный функционал

Разработана и внедрена система бронирования выезда замерщика к клиенту. Теперь менеджер знает где и когда находится замерщик в тот или иной день. Это позволяет более эффективно использовать замерщиков.

На какую целевую категорию было направлено внедрение?

Внедрение было нацелено на менеджеров и руководство компании. В первую очередь решались проблемы отдела продаж и маркетинга.

С какими техническими сложностями пришлось столкнуться?

Отсутствие у заказчика SIP телефонии на начальном этапе внедрения. Очень сложная дописанная 1c и стороннее приложение WinDraw без web-интерфейса.

Итоги проекта

1. Увеличился контроль обработки заказов.
2. Упростилась работа с базой клиентов
3. Уменьшилось количество «неактивных» клиентов
4. Появились отчеты по продажам и рекламе
5. Увеличилась эффективность рекламной компании за счет сквозной аналитики
6. Появилась единая база электронных документов по клиентам
7. Появились отчеты для управленческих решений
8. Ускорение обработки заказа
9. Упрощение работы с замерщиками.
10. Появилось внутреннее корпоративное пространство для общения и коммуникаций сотрудников
11. Повысили безопасность клиентской базы.

Дальнейшие планы по развитию проекта

Более плотная интеграция с программой WinDraw и 1с. Переход на коробочную версию.