Идеальная форма на сайт. 13 правил

«Как генерировать лиды?» — нужно разместить форму заявки в правильном месте, в правильном дизайне и написать правильный призыв.

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

Чек-лист

  1. При открытии страницы с формой, курсор перемещается в первое поле автоматически. 
  2. Поле, в котором находится фокус, визуально выделено цветом.
  3. Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (на случай, если пользователь случайно ушел со страницы).
  4. Обработка формы запускается не только по нажатию на результирующую кнопку, но и по нажатию клавиши [Enter].
  5. Клавиша [Tab] перемещает курсор по полям в правильной последовательности (сверху вниз, слева направо).
  6. Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, номера телефонов).
  7. Обязательные поля явно отличаются от необязательных.
  8. Подписи полей соответствуют смыслу полей. Наиболее вероятные значения некоторых полей формы по умолчанию заполнены (например, номер телефона с 8 или +7).
  9. Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия).
  10. При переходе со страницы на страницу заполненная форма остается, при повторном открытии введенные данные остаются.
  11. Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных (автоматически).
  12. Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”).
  13. Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка (поле выделено цветом, курсор автоматически переносится в это поле).

В подробностях

Количество полей

Чем меньше, тем лучше.

Заголовок

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

Брайан Кларк, основатель Copyblogger, как-то сказал, что 8 из 10 человек непременно прочитают ваш заголовок, а плохой заголовок сделает контент бесполезным.

Подзаголовок

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

Фокус на первом поле

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

https://skillbox.ru/aic/

https://skillbox.ru/aic/

Подсветка

Поле, в которое пользователь вводит данные, «подсвечено» — визуально выделено цветом.

Маски

Поля, заполнение которых может вызвать вопросы, снабжены «масками» — подсказками (например, номера телефонов). При этом наиболее вероятные значения некоторых полей формы по умолчанию заполнены (например, номер телефона с 8 или +7).

Обязательность

Обязательные поля явно отличаются от необязательных.

Перемещение

Клавиша [Tab] перемещает курсор по полям в правильной последовательности (сверху вниз, слева направо).

Двоеточие

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

Сохранность

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

Конфиденциальность

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

Проверка корректности написания

Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных (автоматически).

Призыв к действию

Сильный CTA побуждает людей нажимать на кнопку отправки.

Читайте по теме 22 эффективных призыва к действию на сложных рынках.

Кнопка

Должна отражать то действие, которое произойдёт после нажатия на кнопку.

Что можно написать:

  • Получить [выгода] бесплатно
  • Зарегистрироваться на [Вебинар/Событие] сейчас
  • Загрузить [Предложение]
roistat KISSmetrics
CloudApp

Создание ажиотажа

Отправка данных

Обработка формы запускается не только по нажатию на результирующую кнопку, но и по нажатию клавиши [Enter].

После отправки

Сообщение об ошибке

Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”).

Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка (поле выделено цветом, курсор автоматически переносится в это поле).

ozon

 

Где расположить форму лидогенерации?

Как показывает практика, вовлечённость пользователей тем выше, чем они выше на странице.

 scroll

Пользователи всегда обрабатывают информацию выше красной линии лучше, чем ниже неё. Разница составляет 84%, если верить исследованию Nielsen Group. Особо любопытные, смотрите 2-минутное видео с Amy Schade из Nielsen Group:

Читайте также:

 

30 заголовков от Будды Интернета

 

13 главных формул для продающих текстов (PmPHS, AIDA, ACCA, 4U, 4 почему)