Подключение форм к отслеживанию

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

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

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


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


3. Не рекомендуется использовать формы, после отправки которых происходит перезагрузка страницы.
   В таком случае нет гарантии, что заявка попадет в Calltouch.


4. Динамические формы не могут быть подключены таким способом. Для этого способа используйте стандартное подключение с помощью API.


5. Важно! Прежде чем подключать формы, убедитесь, что включена передача данных по API.
   Для этого перейдите в раздел:  Интеграции /  Отправка данных во внешние системы / API и Webhooks / включите чекбокс:

Для подключения форм перейдите в меню Calltouch:  Настройки /  Сбор данных / Подключение форм к отслеживанию.

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

Название

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

Домен

Домен формы может выбран двумя способами:

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


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

Селектор кнопки отправки формы

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

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

Добавление полей

Добавление поля происходит по нажатию на кнопку «Добавить поле». Добавится новый блок, содержащий в себе две настройки: Тип поля и Селектор поля.

• Тип поля — это характеристика поля, которая может принимать значения Имя, Почта, Телефон, Комментарий. Значение, введенное в поле с указанным типом, попадет в соответствующее поле в заявке. Также есть тип поля "Проверить чек-бокс". Если чек-бокс в отправляемой с сайта заявке не нажат, то заявка в личном кабинете создаваться не будет. Например, если в заполняемой форме есть чек-бокс вида «Я принимаю правила оферты» или подобное.

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

1. Вы должны добавить хотя бы одно поле с типом «Имя», «Телефон» или «Почта»
2. Поле с  типом "почта" и "телефон" может быть использовано лишь единожды в рамках данной формы.
3. Полей с типом "Имя", "Комментарий" и "Проверить чек-бокс" может быть несколько в форме.
4.  У каждого типа поля есть чек-бокс «Обязательное поле». Например, если поле Телефон выбрано в личном кабинете обязательным, то заявка без номера телефона создаваться не будет.
   

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

Google Chrome

1. Нажмите правой кнопкой на интересующем вас элементе.
2. В появившемся окне кликните на «Посмотреть код»:



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



4. Наведите курсор на выделенную строку и нажмите правой кнопкой. В появившемся окне наведите на Copy и выберите Copy selector:



5. Готово! Скопированный текст вставьте в соответствующее поле в окне подключения формы.

Не пугайтесь — скопированный текст может иметь странный вид. Например, #myform > input:nth-child(4).

Mozilla Firefox

1. Выберите интересующий вас элемент на сайте и кликните по нему правой кнопкой.

2. В открывшемся окне выберите Inspect Element:



3. Откроется дополнительное окно, в котором выбранный наш элемент (кнопка или поле) будет подсвечен:



4. Нажмите на него правой кнопкой, наведите на Copy и кликните на CSS Selector:



5. Готово! Скопированный текст вставьте в соответствующее поле в окне подключения формы.

Не пугайтесь — скопированный текст может иметь странный вид. Например, #myform > input:nth-child(4).

Opera

1. Выберите интересующую вас кнопку и нажмите на нее правой кнопкой.

2. В появившемся окне выберите: "Посмотреть код элемента":



3. Откроется дополнительное окно, в которым нужный вам элемент будет выделен:



4. Кликните по нему правой кнопкой и в появившемся окне выберите Copy и кликните Copy Selector: