CRM-формы: создание и подключение универсальной формы связи

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

Зеленая кнопка "Добавить" в верхней левой части экрана на странице списка CRM-форм.

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

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

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

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

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

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

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

Чёрная полупрозрачная кнопка "+ Создать поле" внизу списка позволяет создать пользовательское поле из интерфейса конструктора форм. Всё же удобнее и правильнее создавать пользовательские поля в специальном разделе настроек CRM.

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

Чтобы добавить поле "Имя" нужно поставить флажок в соответствующей строке и нажать зелёную кнопку "Добавить" внизу списка полей.

Если всё сделано правильно, то справа появится форма с одним только что добавленным полем.

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

Название поля может быть любым произвольным, желательно чтобы оно было кратким и понятным. В данном случае можно оставить как есть, т.е. "Имя", можно написать "Ваше имя" или "ФИО".

Независимо от названия, любые данные из этого поля попадут в поле "Имя" карточки лида.

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

То, что будет вписано в это поле до того, как клиент начнет его заполнять. Опция бесполезна для большинства полей. В данном случае, однозначно, заполнять не стоит.

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

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

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

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

В примере нужно добавить поля "Телефон", "E-mail", "Комментарий".

Поля добавились под поле "Имя" в том порядке, в котором они были представлены в списке доступных полей.

Чтобы скрыть форму редактирования поля "Имя", которая сейчас не нужна, достаточно еще раз нажать на карандашек справа от названия поля.

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

Вот теперь в нашем примере порядок.

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

Имя: Телефон; Обязательное поле: Да; Значение поля по умолчанию: +7; Включить автозаполнение: Да; Подсказка для поля: пример заполнения; Включить подсказку при фокусировке на поле: Да.

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

В примере активировать опцию не нужно.

Нет в битрихе поля "Телефон", а вместо этого есть группа полей "Телефон", которая состоит из полей типа "Телефон-Другой", "Телефон-Рабочий", "Телефон-Мобильный" и т.д. Проще говоря, выбираем в какой конкретно столбец базы данных будет записано значение.

Если нет явной на то причины, то оставить как есть: Тип - Другой.

Имя: E-mail; Обязательное поле: Да; Множественное: Нет; Значение поля по умолчанию: не заполнять; Тип: Другой; Включить автозаполнение: Да; Подсказка для поля: пример заполнения; Включить подсказку при фокусировке на поле: Да.

Название: Комментарий; Обзяательное поле: Нет; Включить автозаполнение: Нет; Подсказка для поля: не заполнять.

В юридических вопросах не силён, но последовательность действий, скорее всего, изложу верно.

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

После нажатия на ссылку отроется окно с формой создания соглашения.

Пусть название соглашения носит имя сайта, для которого оно создается, в примере это "accw.ru". В дальнейшем название будет отображаться в списке выбора соглашений.

Выбрать вариант "Стандартное согласие на обработку персональных данных "Русский"".

Должна быть выбрана опция "указывается вручую".

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

Вписать официальный адрес регистрации компании, указанной этажом выше.

По завершении заполнения полей нужно нажать на кнопку "Сохранить".

После сохранения созданного соглашения мы вернемся к конструктору форм. Теперь на вкладке "Соглашения" у нас их целых два. В форме это тоже видно. Ненужное нужно удалить, а нужное нужно оставить.

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

После завершения всех настроек вкладки "Соглашения" хоршо бы сохраниться.

Здесь предстоит выбрать сущность какого типа создаст заполненная CRM-форма.

В нашем примере целью заполнения формы является создание лида, поэтому изменять выбор по умолчанию не требуется.

В этом блоке предпочтительнее выбрать опцию "Разрешить дубликаты", тогда любое повторное заполнение формы одним и тем же человеком будет создавать новый лид. В таком случае корректно сработает робот (если он есть), отправляющий уведомление о заполнении формы в Телеграм.

"Объединить дубликаты" - хороший и правильный вариант, но в таком случае повторное обращение будет видно только в истории лида, а это не всегда удобно.

Думаю, все настройки вкладки можно коротко рассмотреть одним слайдом.

Самое приятное, что в этой вкладке можно ничего не трогать, - всё и так хорошо.

В нашем примере заголовок и подзаголовок заполнять не будетм, т.к. это будет только загромождать форму и декларировать очевидное.

Эти поля будут очень полезны при рассылке форм по почте или через ссылку, тогда заголовки можно будет персонализировать с помощью переменных и получить что-то типа: "Дорогой Сергей Валерьевич! Купите АКБ на Ваш погрузчик JAC".

Текст кнопки в нашем примере также менять не требуется, "Отправить" вполне адекватный вариант, поскольку форма универсальная.

Если злые спамеры форму не засирают, то лучше защиту не включать. Нам пока ни разу не требовалось.

В случае включения капчи придётся самостоятельно регистрироваться в Гугле и получать ключи для работы. Это бесплатно.

Настройки вкладки не рассматриваются в рамках данной инструкции, оставить всё как есть.

Общий смысл доступных настроек описан в стандартных битриховских хелпах. Вкладка полезная, но не в нашем примере.

Три варианта того, что произойдёт после отправки формы: показать сообщение или перенаправить на произвольный URL или заставить заполнять заново. Третий вариант вообще-то для менеджеров, которым битрикс24 не дали, а форму от него дали, но можно использовать для выявления самых терпеливых клиентов.

Чтобы открыть настройки нужно нажать на ссылку под выбранным вариантом (в нашем случае "Сообщение").

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

Не забывайте сохраняться после внесения изменений.

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

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

Механизм добавления полей идентичен процедуре, пройденной на вкладке "Поля"

Здесь мы будем добавлять стандартные поля, которые есть в Битрикс24 "с рождения" и пользовательские поля, которые нужно создать единожды и лучше заблаговременно. Алгоритм создания пользовательских полей в рамках этого алгоритма рассматриваться не будет.

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

Это стандартное поле Битрикс24, мы используем в нём переменную, которая хранит название формы.

Для этого после добавления поля нужно перейти к его редактированию и нажать три точки справа от поля "Значение поля" (простите за тавтологию) и выбрать интересуещее нас значение "Название формы". В результате значением поля станет переменная %crm_form_name%

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

Если вообще отказаться от использования этого скрытого поля, то лид получит название по умолчанию: Заполнение CRM-формы "Название формы".

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

Чтобы свернуть настройки поля нужно еще раз нажать на карандашик.

Назначение правильного источника принципиально важно для дальнейшей корректной автоматической обработки лида триггерами и роботами.

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

После выбора значения поля лучше нажать на кнопку "Сохранить", тогда будет видно, что подставленное по умолчанию значение "Звонок" сменилось на "accw.ru - CRM форма".

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

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

Пользовательское поле, которое примет и передаст в CRM доменное имя сайта, на котором была заполнена CRM-форма. В первую очередь, эта информация потребуется для формирования уведомления (в Телеграм) о заполнении формы.

В настройках поля, нажав на три точки, выберем одну из доступных стандартных переменных, - "Доменное имя". В результате значением поля станет переменная %from_domain%

Добавим пользовательское поле "URL формы" из вкладки "Лид" и назначим ему стандартную переменную "Адрес страницы", которая будет прописана в поле как %from_url%.

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

Это поле передаст значение HTML тэга title, которое является заголовком страницы заполнения формы. URL - хорошо, а человеческое название к странице - ещё лучше.

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

Впишем в поле переменную %page_title% и будем использовать именно её во всех создаваемых формах для данного поля.

Один нюанс: стандартные переменные, используемые в форме, подхватывают нужные значения "сами", а в пользовательские переменные нужно передавать значения с помощью специального скрипта.

В пользовательское поле "Имя кнопки" вписываем переменную %button_value%.

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

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

В пользовательское поле "id кнопки" кнопки впишем пользовательскую переменную %button_id%.

Представьте ситуацию, когда на странице перед вами таблица - перечень товаров, где в каждой строке наименование товара, цена и кнопка с надписью "Купить". Любая из кнопок вызывает одну и ту же форму, разумеется. Ну и как понять какой товар хотели купить?

У любой кнопки есть скрытый служебный атрибут, в который (при должном усердии) всегда можно впихнуть что-нибудь полезное: идентификатор товара в каталоге или непосредственно наименование товара. Тогда никакой путаницы не будет. Менеджер очень рад будет.

Данная вкладка предоставляет идентификаторы JavaScript-событий для создания целей в Яндекс.Метрике и Google Analytics.

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

В текущей инструкции не рассматривается.

Позволяет использовать форму в качестве формы обратного звонка.

В настоящей инструкции не рассматривается

На скриншоте представлены настройки по умолчанию для этой вкладки.

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

Нужно задать форме имя типа Имя_домена - Тип_формы, в нашем случае это "accw.ru - Форма связи".

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

Назначить ответсвенного сотрудника за обработку лида, созданного формой.

И лучше снять галочку с опции ниже, не позволяющей назначить ответственным ответственного, если он не готов.

Язык - на выбор, но всё же Русский.

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

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

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

В этом блоке настроек есть возможность поэкспериментировать с выбором четырёх предустановок:

• Тема
• Оформление
• Стиль полей
• Тень формы

Нет смысла расписывать какая настройка за что отвечает, - лучше посмотреть своими глазами.

В нашем примере оставим всё по умолчанию.

Здесь определяется цвет кнопки формы, рамки и может быть чего-то ещё.

Чтобы форма гармонично вписалась в сайт вполне логично использовать для её оформления цветовую гамму сайта. Кокретно для данной настройки возьмём основной яркий цвет сайта в шестнадцатиричном коде: #4c75a0. Это значение нужно вписать в соответствующее поле, выбирать цвета из палитры не нужно.

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

Это цвет текста на кнопке, лучше оставить как есть, белый - #ffffff

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

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

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

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

Шрифт для формы разумно выбирать такой же, что и основной шрифт сайта, в нашем случае это Roboto.

Настройка управляет включением и отключением визуальных рамок формы по четырём направлениям.

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

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

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

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

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

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

В примере выбран цвет фона #243d57, соответствующий цвету футера.

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

Сейчас мы рассмотрели вкладку блока настроек фона "Заливка", это о цвете. А еще есть возможность выбрать в качестве фона блока изображение, эти настройки доступны на вкладке "Картинка". Не вижу смысла разбирать эту вкладку детально в рамках данной инструкции, лучше поэкспериментировать при желании.

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

Пожалуй, стоит немного уменьшить верхний и нижний отступы, до 30px, например. Более точную подгонку имеет смысл производить после публикации (размещения кода) формы на сайте.

Если закрыть все окна-панели, находящиеся слева от формы, то мы увидим её в почти "чистом виде", не покидая при этом интерфейс конструктора форм.

Коротко рассмотрим что дают нам кнопочки, доступные в области блока формы (на тёмно-синем фоне в нашем примере):

• Дизайн - откроет окно дизайна формы (можно переключиться на дизайн блока).
• Редактировать - вернет нас к обильным настройкам формы (поля и прочая фигня).
• + Добавить блок - даёт возможность приладить к форме сверху или снизу любой блок, доступный в конструкторе сайтов Битрикс24.

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

Возможности формы (кнопка в верхнем правом углу) > Поделиться (кнопка в одноименном блоке фиолетового цвета).

Страница сайта (вкладка из списка слева в открывшемся окне) > Посмотреть код (нажмите на ссылку, чтобы увидеть код).

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

В рамках данной инструкции не будет детально рассматриваться размещение кода формы на сайте.

Чтобы закрыть конструктор форм и перейти к их списку, нужно нажать на символ домика в верхнем левом углу экрана или на графическую надпись "Битрикс24.Формы" (хорошо видно на большинстве предыдущих скриншотов).

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

Код разместить в том месте сайта или конкретной страницы, где должна отображаться CRM-форма.

Форма опубликована в футере (подвале, нижней части) одностраничного сайта.