+7 (343) 204-78-80 Екатеринбург
Как оформлять формы на сайте?

Как оформлять формы на сайте?

Дата публикации: 17.02.2020

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

Лаконичность

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

Форма заказа обратного звонка

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

  • персональные данные,
  • сведения о работе,
  • контакты.

Если в форме используются короткие поля, их лучше разместить в несколько столбцов. Это поможет сократить длину. Для упрощения ввода рекомендуем использовать выпадающие списки с готовыми ответами или check-box.

Отображение прогресса

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

Наличие подзаголовков

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

Подсказки

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

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

Валидация

Корректность вводимой информации должна проверяться. Если посетитель допустил ошибку, ее стоит подсветить и расшифровать. Например, «Укажите номер телефона через +7». Желательно, чтобы валидация осуществлялась после заполнения. Подсвечиваемые буквы и сообщения об ошибке, появляющиеся в момент ввода, заставляют людей перепроверять указанные ими символы и заново читать описание поля.

Хотите увеличить конверсию сайта? Обращайтесь в компанию Артена!

Сохранение данных

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

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

Сокращение цепочки конверсии

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

Невидимая защита от спама

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

Защита персональных данных

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

Форма заказа товара

Статичность

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

Итог

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

  1. Структура должна содержать минимум полей.
  2. Если вопросы приходится разбивать на этапы, визуализируйте прогресс заполнения.
  3. У форм должны быть заголовки.
  4. Оставляйте подсказки внутри полей для заполнения.
  5. Отправляемые данные должны проходить проверку.
  6. Сохраняйте информацию внутри форм, чтобы в случае ошибки клиенту не пришлось все заполнять сначала.
  7. По возможности откажитесь от регистрации на сайте или упростите ее с помощью соцсетей.
  8. Используйте для защиты от ботов технологии, которые не требуют ввода CAPTCHA.
  9. Предоставляйте ссылку на политику защиты персональных данных.
  10. Формы не должны мигать и двигаться по экрану.
Соблюдая эти нехитрые рекомендации, вы сделаете взаимодействие с сайтом более удобным и понятным.


Выберите услугу прямо сейчас!
Укажите ваш номер телефона
Мы быстро перезвоним и подробнее расскажем о наших услугах
Нажимая кнопку, вы принимаете условия передачи данных