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

Основные виды форм на сайте

Расскажем о видах форм и их особенностях, которые могут встретится на сайте.

Форма для обратной связи

Встречается почти на всех коммерческих сайтах. Цель данной формы - получить данные клиента для дальнейшего звонка менеджера. Как правило форма открывается после нажатия кнопки вверху сайта:

Форма для обратной связи

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

Форма для подписки на рассылку

Еще один способ получить данные клиента и осуществлять продажи через email-маркетинг.

Форма для подписки на рассылку

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

Форма для заказа

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

Форма для заказа

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

Форма оформления покупки

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

Форма оформления покупки

Хорошим тоном считается разделение формы для новых и старых клиентов. Если пользователь постоянно пользуется продукцией интернет-магазина, поля с доставкой и другими персональными полями заполняются автоматически. Например, в интернет-магазине «Лабиринт» уже знают последний адрес доставки и предлагают использовать его снова:

Форма оформления покупки

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

Форма авторизации и регистрации

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

Форма авторизации и регистрации

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

Форма для заказа консультации

Для тех клиентов, которые хотят «только спросить» маркетологи придумали форму консультации - если у пользователя есть вопросы, они могут написать их в специальную форму и получить ответ по e-mail или телефону.

Форма для заказа консультации

Иногда такие решения заменяет встроенный онлайн-консультант, который оформлен в виде чата со специалистом:

Форма для заказа консультации

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

Совет 1. Разместите форму в заметном месте

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

Как лучше размещать формы на сайте?

1. Использовать шапку сайта

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

шапка сайта

2. Главный экран

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

Главный экран

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

3. В контенте

Чтобы «поймать» клиента, формы размещают в середине контента:

В контенте форма

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

4. Футер

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

Футер

Совет 2. Сократите количество полей

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

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

Также можно упростить ввод настройками - автоматическим определением города, выпадающими списками, маску ввода по телефонному номеру, подсказками и прочим:

поля регистрации

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

Совет 3. Продумайте названия полей

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

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

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

Надписи на кнопках также должны быть конкретными - не «Записаться» а «Записаться на консультацию». Так клиент понимает, какое действие совершает.

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

Продумайте названия полей

Названия полей обычно располагаются слева или сверху.

Совет 4. Учитывайте все состояния полей

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

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

Так мы обозначили ошибку пользователя, если он не поставил галочку в форме:

ошибка в поле

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

Совет 5. Оформите подтверждение после корректного заполнения формы

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

подтверждение формы

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

Совет 6. Позаботьтесь о безопасности

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

Позаботьтесь о безопасности

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

Совет 7. Добавьте мотивации

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

Люди заполняют формы ради результата. Какую еще мотивацию можно добавить для клиента?

1. Что-то материальное

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

мотивация клиента

2. Быстрые результаты

Укажите сроки, в которые клиент получит заказ. «Сделаем и доставим через 3 дня» лучше чем «Сроки и доставка рассчитываются индивидуально». Также работают такие формы как «Перезвоним через 40 секунд». Клиенту станет интересно проверить, так ли это на самом деле.

мотивация клиента

3. Персонализированное предложение

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

Персонализированное предложение

Совет 8. Я не робот!

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

Если есть потребность в использовании капчи, наилучший вариант - reCaptcha от Google. Это простая кнопка, которая не требует усилий при заполнении.

reCaptcha от Google

Совет 9. Подбирайте цвета

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

лица на сайте

Что касается полей и кнопок, лучше разделять их по цвету на главные и второстепенные. Например, использовать яркий цвет для кнопки «Регистрация» и приглушенные оттенки для «Пропустить».

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

Совет 10. Тестирование формы

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

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

адаптация сайта

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