Дизайн контактной формы: 15 лучших примеров контактных страниц 2019 года

1. # 1: многошаговый подход
2. № 2: классический, но минимальный подход
3. № 3: Hootsuite
4. № 4: Scribd
5. Как получить в 4 раза больше потенциальных клиентов
6. № 5: Zendesk
7. # 6: WP Engine
8. # 7: Infusionsoft
9. # 8: TopTal
10. # 9: Pixpa
11. # 10: Вкуснятина
12. # 11: полноэкранный дизайн Мэри Лу
13. № 12: Активная кампания
14. № 13: Envato
15. # 14: Форма нижнего колонтитула
16. № 15: неформальный подход
17. Завершение

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

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

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

# 1: многошаговый подход

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

Что ж, в этих случаях вам лучше использовать многошаговую форму:

Анимация, приведенная выше, является просто примером многоэтапного дизайна контактной формы (любезно предоставлено Мэри Лу в Codrops ) чтобы показать, как они могут работать. Вместо предоставления пользователям шести полей многоэтапные формы создают иллюзию необходимости заполнять только одно поле, в результате чего первоначальные усилия кажутся менее сложными.

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

№ 2: классический, но минимальный подход

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

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

№ 3: Hootsuite

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

Вопрос в том, как создать единую контактную страницу для всего этого? Ну, Hootsuite начинается с разделения его на две отдельные части:

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

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

Таким образом, контактной формы по-прежнему нет, но как только вы нажмете кнопку « Связаться с отделом продаж» , ожидание окончательно закончится. А сама форма контакта? Ну, вот оно:

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

№ 4: Scribd

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

Нажмите, мне нужна помощь! и это удобное окно появляется, предоставляя доступ к общей информации поддержки и кнопку контакта.

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

Как получить в 4 раза больше потенциальных клиентов

Посетите это бесплатное онлайн-обучение с Маркусом Тейлором

Посетите этот вебинар

№ 5: Zendesk

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

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

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

# 6: WP Engine

В качестве одной из наших главных рекомендаций для хостинга WordPress мы рады видеть WP Engine предоставьте контактную форму, достойную этого списка.

Еще раз, это случай простоты, выходящей на первое место в этом дизайне. Реальная особенность этой контактной страницы - это жирная панель поддержки 24/7, которая так важна для любого хостинг-провайдера. Здесь WP Engine имеет свои приоритеты в идеальном порядке, предоставляя своим клиентам максимально быстрый доступ к технической поддержке по любым вопросам, с которыми они могут столкнуться. Урок здесь состоит в том, чтобы узнать, что является наиболее важным для людей, попадающих на вашу страницу контактов.

# 7: Infusionsoft

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

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

# 8: TopTal

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

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

# 9: Pixpa

Pixpa идет для незапугивающей формы контакта с тремя полями, и, кроме использования кнопки « Отправить» по умолчанию, в этом нет особого недостатка. Что действительно отличает эту страницу контактов, так это использование призывов к действию над и под самой формой.

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

В конце концов, кому нужны электронные письма, когда вы могли бы получать продажи вместо этого?

# 10: Вкуснятина

Голландская студия дизайна Yummygum выбирает двухэтапный процесс для своей контактной формы, которая появляется, как только пользователи нажимают кнопку « Контакт» , расположенную в заголовке сайта.

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

Если вы выберете « Собрание для кофе» , появится короткая и удобная общая форма запроса, в то время как выбор « Отличный проект» вернет вам более детальную форму.

Мы не скажем вам, что предлагает вариант « Птицы и пчелы» .

# 11: полноэкранный дизайн Мэри Лу

Наш первый пример сегодня был многошаговой концепцией дизайнера Мэри Лу и мы вернулись с другой работой талантливой женщины. На этот раз мы смотрим на полноэкранный Многоэтапное предложение, которое станет прекрасной альтернативой традиционной странице контактов.

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

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

№ 12: Активная кампания

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

Каждый вариант совершенно понятен пользователям, и Active Campaign может предоставить соответствующую форму (или другой ресурс) в зависимости от их ответа. Немногие из примеров, которые мы рассмотрели сегодня, предоставляют посетителям шесть различных вариантов в такой сжатой форме.

№ 13: Envato

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

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

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

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

# 14: Форма нижнего колонтитула

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

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

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

№ 15: неформальный подход

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

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

Завершение

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

Похожие

Комментарии