Создаем веб-форму, которую хочется заполнить

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

Что такой веб-форма и для чего она нужна

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

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

Не все пользователи, заполняя форму, доходят до конца и отправляют заявку. Форма может быть непонятная, длинная, неудобная. Чтобы повышалась конверсия и ваши клиенты доходили до заветной кнопки «Отправить», мы собрали для вас несколько советов.

Советы по созданию веб-формы

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

Общие правила

Используйте только те поля, которые действительно вам нужны. Мы не будем говорить, что лучше длинная или короткая форма, а скажем, что лучше та форма, в которой только самое нужное. Чаще всего для разных целей нужно не более 5 полей. Маркетолог может сказать, что веб-форма может помочь больше узнать о клиенте и попросит добавить лишний пункт для заполнения, но здесь на стражу пользователей встает закон. Вы обязаны собирать только ту информацию, которая необходима для проведения операции (152-ФЗ "О персональных данных" Статья 5). Например, для подписки на рассылку вам не нужен номер телефона, а для регистрации на сайте в основном не требуются паспортные данные.

«Эй, капча. Будь проще». Было ли у вас такое? Появляется капча с картинками. Вас просят найти все картинки с мотоциклами. Но ни на одной картинке нет мотоцикла. Или вот. Нужно ввести набор символов, изображенных на картинке. Но буквы и цифры так перепутаны, что даже задумываешься, не робот ли ты. Обращайте внимание на сложность капчи или ставьте скрытую капчу, которую видят только роботы.

Правила для дизайна

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

Как создать форму обратной связи для сайта

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

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

Группируйте поля. Если уж вы задумали длинную анкету, например на 10 вопросов, облегчите восприятие, сгруппировав поля. Или разделите заполнение формы на несколько шагов, чтобы в одном шаге было не более 5 полей для заполнения.

Дополнительные настройки

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

Добавьте маску для заполнения. Номер телефона можно написать так 89876543210, а можно так 8 (987) 654-32-10. Второй вариант читается легче, следовательно, ошибок при вводе будет меньше, но пользователи ленятся вписывать дополнительные символы. Добавьте маску, которая поможет ввести данные в правильном формате.

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

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

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

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

Добавьте авторизацию через социальные сети. А что если для регистрации или подписки вообще не нужно вводить никакие пароли и почты. Сейчас у многих есть электронные почтовые ящики и соцсети, которые открыты на ПК или смартфоне 24/7. Добавьте в вашу форму возможность авторизоваться через них. Всего пару кликов и пользователь зарегистрировался на вашем сайте. Это очень удобно и быстро. Кроме того, вы будете уверены, что пользователь указал реальные данные, а не аккаунт, где скапливается вся реклама.

Где расположить веб-форму и как привлечь к заполнению

Как сделать форму заявки на сайте эффективнее? Размещайте форму на видном месте. Чем выше, тем лучше. У вас есть пара секунд, чтобы заинтересовать потенциального клиента контентом. Если материал его не заинтересует, он может даже не дойти до формы заявки.

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

А что дальше?

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

• просто поблагодарить пользователя за обращение или подписку и поделиться социальными сетями (вдруг они его заинтересуют),

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

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