Поля и формы захвата в воронках

Рассмотрим, как добавить форму захвата на страницу воронки продаж.

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

Типы форм захвата

Чтобы добавить форму захвата, нужно на странице создания воронки продаж нажать “Добавить блок” и выбрать “Формы захвата”  (рис. 1):

Рисунок 1.

В этом разделе есть несколько готовых вариантов форм захвата. Рассмотрим каждый из них:

• Обычная форма  (рис. 2):

Рисунок 2.

Форма содержит следующие параметры для ввода: имя клиента, его телефон, почта.

• Форма подписки (рис. 3):

Рисунок 3.

В данной форме содержатся только e-mail для ввода.

• Форма с картинкой справа (рис. 4):

Рисунок 4.

Форма содержит те же параметры,  что и обычная форма (рис. 2), плюс добавлена картинка справа и поля для ввода располагаются вертикально.

• Форма с картинкой слева ( рис. 5):

Рисунок 5.

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

• Форма с текстом справа (рис. 6):

Рисунок 6.

Аналогичный вариант формы, только вместо картинки размещен текст.

• Форма с текстом слева (см. рис. 7):

Рисунок 7.

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

• Текст с кнопкой (см. рис. 8):

Рисунок 8.

В этой форме поля для ввода данных открываются после нажатия на кнопку.

• Текст с заголовком и кнопкой (см. рис. 9):

Рисунок 9.

Эта форма аналогична предыдущей (рис. 8) за исключением размещенного слева заголовка.

• Форма по центру (рис. 10):

Рисунок 10.

Данная форма аналогична первой (рис. 2), различие заключается в вертикальном расположении элементов, центрированных на странице.

• Форма с двумя кнопками (рис. 11).

Рисунок 11.

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

• Форма с кнопкой во всю ширину (рис. 12).

Рисунок 12.

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

• Форма с кнопкой и ссылкой (рис. 13).

Рисунок 13.

Данная форма содержит кнопку, которая вызовет форму захвата и ссылка отказа, как на рис. 11.

• Форма с видео (см рис. 14):

Рисунок 14.

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

Типы элементов форм

Ниже приведем сравнительную таблицу по типам форм захвата и наличию элементов:

Тип формы \ Элемент	Форма	Картинка	Текст	Заголовок	Кнопка вызова формы	Кнопка действия	Видео	Форма подписки на новости
Форма	+			+				+
Форма подписки	+			+				+
Форма с картинкой справа	+	+		+				+
Форма с картинкой слева	+	+		+				+
Форма с текстом справа	+		+	+				+
Форма с текстом слева	+		+	+				+
Текст с кнопкой	+		+	+	+			+
Текст с заголовком и кнопкой	+		+	+	+			+
Форма по центру	+			+				+
Две кнопки	+			+	+	+		+
Кнопка во всю ширину	+			+	+			+
Кнопка и ссылка внизу	+			+	+	+		+
Форма с видео	+			+			+	+

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

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

Общие настройки

Для того, чтобы перейти в настройки кнопки, наведите курсор на блок и нажмите на значок шестеренки или слово "Настройки" (рис 15):

Рисунок 15.

В открывшемся окне вы увидите две вкладки с настройками (рис. 16):

Рисунок 16.

1. Внешний вид;

2. Форма.

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

Рассмотрим подробнее настройку вкладки “Форма” - ”Поля формы” (рис. 17):

Рисунок 17.

1. Заголовок - это заголовок блока, он выделяет название блока в воронке;

2. Подзаголовок находится под заголовком, имеет меньший шрифт и в нем описана суть данной формы захвата;

3. Текст кнопки - это текст, который отображается на кнопке;

4. Название полей, которые отображаются в форме;

5. Добавить новый элемент - позволяет добавить новое поле на форме. 

Рассмотрим его более подробно (рис. 18):

Рисунок 18.

1. Область - это пункт, который позволяет перетаскивать поле вверх или в них путем зажатия на нем левой кнопки мыши для изменения порядка отображения элементов формы;

2. Название поля для ввода - Данное название будет выводиться напротив формы;

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

4. Активировав данную галочку, Вы укажите, должно ли данное поле ввода быть обязательном для заполнения или нет;

5. Удаление поля - удаление поля из данной формы захвата.

Далее мы возвращаемся к описанию пунктов рис. 17:

1. Показывать соглашение - данная опция отображает согласие клиента на обработку персональных данных в рамках ФЗ 152;

2. Текст пользовательского соглашения - как правило здесь размещают ссылку на пользовательское соглашение и условие, что клиент дает согласие на указанное соглашение;

3. Сохранить - при нажатии кнопки внесенные Вами изменения сохранятся;

4. Отмена - окно с редактирование формы закроется без сохранения настроек.

Взаимосвязь настроек формы захвата и их представление в воронке продаж можете посмотреть на рис. 19.

Рисунок 19.

Вставка картинки

Вставка картинки доступна в формах захвата:

• Форма с картинкой справа; 
• Форма с картинкой слева.

После размещения данных форм захвата для того, чтобы отредактировать картинку, наведите на неё курсор мыши и нажмите на значок "Карандаша" (редактирование) (рис.20):

Рисунок 20.

Есть три возможности возможности обновления изображения (рис.21):

Рисунок 21.

1. Загрузить изображение с компьютера - в данном случае вы можете загрузить ранее подготовленный и отредактированный файл графического расширения;

2. Загрузить по ссылке - загрузить картинку по ее URL адресу;

3. Загрузить изображение из галереи - можно загрузить изображение из фотобанка https://www.pexels.com/ru-ru/, с которым мы интегрировались. 

Текст

Вставка текста доступна в формах захвата:

• Форма с текстом справа;

• Форма с текстом слева;

• Текст с кнопкой;

• Текст с заголовком и кнопкой.

Для редактирования текста наведите курсор на текст и нажмите на значок “Карандаш” (рис. 22):

Рисунок 22.

Кнопка вызова формы

Данный способ вызова формы захвата описан в статье "Кнопки и скроллы".

Кнопка действия

Данный способ вызова формы захвата описан в статье "Кнопки и скроллы".

Видео

Вставка видео используется в форме с видео. Для вставки в настройках формы сделайте следующее (рис. 20):

Рисунок 23.

1. Перейдите во вкладку "Настройка видео";

2. Вставьте ссылку на видео.

3. Нажмите "Сохранить".

Подписка на новости

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

Все готово!