Дизайн контактной формы: 19 советов для лучшей конверсии. Чек-лист

Дизайн контактной формы: 19 советов для лучшей конверсии. Чек-лист

Ия Пфанштиль16 Октября 2020читать 3 м.

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

Если вы тоже решили добавить контактную форму на сайт, убедитесь, что ее дизайн составлен грамотно. Только при этом условии вы получите высокую конверсию и предложите удобный опыт. Команда 123 Form Builder собрала в инфографике проверенные на практике рекомендации. Следуйте им, чтобы извлечь из инструмента максимум пользы. 

Дизайн контактной формы: чек-лист

Хотите увеличить конверсию контактной формы? Вот как это сделать

Проявите гостеприимство

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

Не бойтесь креативить

Почему бы не подойти к дизайну нестандартно? Заставьте пользователей улыбнуться.

Вызовите интерес

Мотивируйте посетителей связаться с вами (предложите скидку, купон и т.д.)

Все дело в UX

Создавая контактную форму, помните о путешествии клиента. Советы:

  1. Сделайте ее интуитивно понятной
  2. Логично группируйте поля
  3. Отдавайте предпочтение формам с одной колонкой

Оптимизируйте под мобайл

Создать комфортный мобильный опыт помогут:

  1. Меньше полей в форме
  2. Автоматический фокус на первом поле
  3. Названия над полями
  4. Возможность посмотреть пароль, чтобы избежать опечаток
  5. Замена выпадающих меню переключателями
  6. Достаточное расстояние между элементами

Персонализируйте автоматические ответы

Страница с благодарностью должна вызывать приятные эмоции. Добавьте:

  1. Среднее время ответа
  2. Следующие шаги
  3. Короткий запоминающийся текст
  4. Забавное изображение или GIF
  5. Ссылку на связанный раздел сайта
  6. Полезный материал для скачивания
  7. Приглашение в соцсети

Вдохните жизнь в CTA

Стандартные призывы к действию вроде “Отправить” уже надоели. Попробуйте варианты “Начать бесплатно”, “Давайте обсудим”, “Подписаться прямо сейчас”. 

Учитывайте навигацию

Убедитесь, что вашу контактную форму легко найти. Слишком много скроллов и кликов снизят конверсию.

Помните о цели

Креатив - это хорошо, но он должен быть уместным. Четко сформулируйте цель формы.

Проверяйте данные

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

Будьте кратки

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

* по данным HubSpot, самые эффективные формы содержат 5 полей. 

Страница “Контакты”: как подготовить посетителей к заполнению формы

Итак, вы создали контактную форму по всем правилам.Теперь ей нужно обеспечить достойное окружение - качественную страницу “Контакты”. Вот что важно учесть:

Сделайте ее запоминающейся

Создайте страницу, которая запомнится аудитории. Какие послания и образы им близки?  

Предложите подписаться

Добавьте информацию о вашей email-рассылке и попросите пользователей подписаться в обмен на бонус.

Укажите местоположение

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

Добавьте визуал

Это может быть анимация, иллюстрация или видео. Главное, чтобы медиафайл не отвлекал внимание от формы.

Укрепите доверие

Расскажите, сколько людей на вас подписаны, и перечислите крупных партнеров. 

Добавьте соцсети

Пригласите посетителей на платформы с сильным присутствием бренда. 

Предложите альтернативные варианты

Не все пользователи готовы делиться контактами. Какие есть альтернативы:

  1. Чат внизу страницы
  2. Номера телефонов отделов
  3. Контакты в мессенджерах
  4. Ссылка на форум
  5. Блок для комментариев

Добавьте ссылку на FAQ

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

На заметку

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

Смотри также: 12 лучших бесплатных инструментов для создания форм и опросов.

5 принципов, которые помогут справедливо оценить дизайн
STEM AgencySTEM Agencyчитать 5 м.

5 принципов, которые помогут справедливо оценить дизайн

Гид по сленгу дизайнеров: как ставить задачу на одном языке с повелителями Фотошопа и Иллюстратора
Роман ГорбачёвРоман Горбачёвчитать 8 м.

Гид по сленгу дизайнеров: как ставить задачу на одном языке с повелителями Фотошопа и Иллюстратора

Где скачать бесплатные иллюстрации: 20 проверенных сайтов
Ия ПфанштильИя Пфанштильчитать 8 м.

Где скачать бесплатные иллюстрации: 20 проверенных сайтов

Подписаться на новостную рассылку12 тысяч маркетологов уже подписались!

Главный редактор Русабилити, контент-маркетолог, автор. Шесть лет пишу о digital. Делюсь открытиями.

Следующий
Чего ожидать рынку недвижимости от поколения миллениалов?

Чего ожидать рынку недвижимости от поколения миллениалов?

читать минут
Рекомендуемые

9 способов сократить процент неоформленных заказов

читать минут

Комментарии (0)

  • Дизайн контактной формы: чек-лист
  • Проявите гостеприимство
  • Не бойтесь креативить
  • Вызовите интерес
  • Все дело в UX
  • Оптимизируйте под мобайл
  • Персонализируйте автоматические ответы
  • Вдохните жизнь в CTA
  • Учитывайте навигацию
  • Помните о цели
  • Проверяйте данные
  • Будьте кратки
  • Страница “Контакты”: как подготовить посетителей к заполнению формы
  • Сделайте ее запоминающейся
  • Предложите подписаться
  • Укажите местоположение
  • Добавьте визуал
  • Укрепите доверие
  • Добавьте соцсети
  • Предложите альтернативные варианты
  • Добавьте ссылку на FAQ
  • На заметку