Отличные контактные страницы: 7 лучших практик и идей

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

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

Что такое контактная страница?

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

Зачем мне нужна страница контактов?

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

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

Что должна содержать страница контактов?

Вот несколько «предметов первой необходимости», которые нужны каждой странице контактов:

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

Советы по контактной странице

Вот несколько советов по созданию отличной страницы контактов.

• Ограничьте боковые панели . Исследования пользовательского опыта (UX) подтверждают мнение многих веб-пользователей: боковые панели действительно раздражают. Эти фиксированные элементы обычно содержат информацию, не относящуюся к странице, которую посещает пользователь. Сделайте содержимое своей контактной страницы простым.
• Тщательно выбирайте поля формы . Если вы просто используете «шаблон по умолчанию» для создания формы, скорее всего, у ваших клиентов его не будет. Это потому, что примерно половина каждой страницы контактов заполнена бесполезными полями. Например, предположим, что вы исключительно компания, занимающаяся цифровой электронной коммерцией, и кто-то спрашивает о продукте. Если вы используете форму, которая запрашивает домашний адрес, ваш сайт покажется обычному пользователю подозрительным.
• Сделайте эстетику приоритетом. Да, эстетика каждой страницы вашего сайта должна быть тщательно изучена. Тем не менее, многочисленные UX-исследования показали, что страница «Свяжитесь с нами», пожалуй, самая важная для дополнительной аэрографии. Из-за того, как работает SEO-рейтинг, многие посетители, ищущие продукты, попадут прямо на вашу страницу, что позволит пользователям связаться с вами. Как мы все знаем, первое впечатление значит все, поэтому убедитесь, что оно у вас положительное.
• Используйте описания полей . Посетители не всегда знают, что означают поля контактов. Даже такая простая вещь, как «Имя» без дополнительных объяснений, может сбивать с толку. Вы спрашиваете только имя или полное имя? Есть ли какая-то причина просить об этом, если это полное имя? Очень важно правильно подобрать словосочетание. Это та область, где плата новым пользователям за тестирование и честное мнение может действительно окупиться.
• Используйте профессиональные плагины . Создание профессиональных, лаконичных и красивых страниц «Свяжитесь с нами» не является тривиальной задачей. Если вы пытаетесь оставаться на переднем крае технологии WordPress, вы можете рассмотреть эффективную и настраиваемую тему, такую ​​​​как тема Kadence. Кроме того, пакет расширений, такой как Kadence Blocks, позволяет вам редактировать материалы WordPress изначально в новейшей версии редактора Gutenberg, включая страницы контактов!

Спам на странице контактов и безопасность

Прежде чем мы продолжим, есть несколько моментов, касающихся спама на странице контактов и безопасности, которые мы считаем особенно важными!

1. Одной из ведущих угроз веб-безопасности являются «несанированные» формы. Это формы с полями, которые считываются вашим сервером перед удалением потенциально вредоносного кода, введенного пользователями. Хотя ни один продукт безопасности не может остановить каждую угрозу, разумный выбор качественного плагина безопасности WordPress, такого как iThemes Security, может помочь смягчить потенциальные угрозы.
2. Одним из компромиссов, который следует учитывать, является уровень безопасности капчи, который вы хотите использовать в своих формах. Если вы выберете самую «агрессивную» капчу, ожидайте, что посетители будут разочарованы вашей страницей и уйдут. С другой стороны, оставление вашей страницы с минимальной защитой с помощью капчи или без нее — это приглашение для спамеров, поэтому выбирайте мудро. Использование плагина для добавления reCAPTCHA в WordPress за несколько простых шагов.
3. Спам на контактной странице может быть настоящей болью. Обязательно используйте настройки в плагине формы, чтобы ограничить ввод спама. Спам WordPress легко остановить, выполнив несколько шагов.

Как должна выглядеть страница «Контакты»?

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

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

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

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

Как создать страницу «Контакты»?

Помните, что использование пакета расширений, который подключается к новому редактору Gutenberg, например Kadence Blocks, — отличный способ. Хотя вам все равно придется использовать плагины форм WordPress для управления фактическим содержимым ваших форм. Тем не менее, использование графического редактора может предоставить ценную информацию, позволяющую сэкономить время.

Мы рассмотрим, как создать базовую версию страницы «Свяжитесь с нами» для обычного сайта WordPress. Это не пример отличного и изысканного произведения искусства! Это просто для того, чтобы вы начали в правильном направлении.

1. Выберите свой плагин!

Да, вы можете создать свою собственную форму, используя нативные элементы Gutenberg без каких-либо расширений. Прежде чем вы пойдете за этой идеей, подумайте о сложности этого типа формы. Эстетика довольно проста. Однако помимо этого вы должны убедиться, что форма отправлена ​​безопасным способом. Затем вам нужно маршрутизировать и сортировать то, что в него помещено. Большинство контактных форм требуют определенного типа капчи. Список можно продолжать, но вы поняли: нет необходимости изобретать велосипед.

2. Установите свой плагин

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

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

Вы также можете просто установить блоки Kadence, используя ссылку выше.

3. Выберите шаблон

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

Блок Form от Kadence WP позволяет вам не только создавать собственные формы, но и стилизовать их по своему усмотрению. С блоком формы у вас есть возможность добавлять неограниченное количество настраиваемых полей, а также включает поддержку Google ReCaptcha.

Добавьте новый блок на свою страницу и выберите блок формы, чтобы начать.

4. Настройки и стиль

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

Настройте параметры поля, включая цвет фона ввода, настройки границ, стили шрифта, настройки кнопок, интервал между строками и многое другое!

5. Настройте переадресацию электронной почты

Вы можете настроить параметры «Действия после отправки» в настройках блока формы. Выберите, хотите ли вы получать электронное письмо после, хотите ли вы, чтобы пользователь перенаправлялся после отправки, хотите ли вы включить электронное письмо с автоматическим ответом, и выберите, хотите ли вы настроить запись в базе данных. Проверьте Kadence Blocks Pro, если вы хотите интеграцию MailChimp и SendInBlue, вызовы WebHooks и новые записи в базе данных при отправке формы.

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

6. Перетащите контактную форму на свою страницу

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

Хотя вам, скорее всего, нужно будет иметь его только в одном месте, это поможет сделать ваш сайт WordPress более модульным.

Как мне оптимизировать страницу «Свяжитесь с нами»?

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

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

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

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

7 лучших практик контактной страницы

Мы выделили семь наиболее важных «лучших практик» при создании новой формы «Свяжитесь с нами». Хотя они находятся в упорядоченном списке, порядок не указывает на важность или приоритет; это случайно.

1. Будьте проще

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

2. Назовите причину

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

3. Иметь более одного пути

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

4. Сделайте это проще

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

5. Автоматизируйте, когда это возможно

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

6. Максимально используйте лидерство

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

7. Сделайте это человеком

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

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

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

3 успешных примера страницы контактов

Давайте взглянем на три особенно мощные контактные формы и на то, почему они потрясающие!

1. Собственно СМИ

Media Proper предлагает жемчужину страницы «Свяжитесь с нами». Как видите, они довольно хорошо придерживаются своего бренда. Страница начинается с довольно большого заявления о том, что посетители могут звонить им, если они того пожелают, предлагая им альтернативные варианты связи. Понятно, какие поля являются обязательными, а какие просто предпочтительными; есть также мгновенная проверка перед отправкой формы. Каждое поле очень четко определено, но для более искусных пользователей оставлено пространство для творческой интерпретации.

2. ЛюдиМетрики

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

3. Группа Вейфилда

Контактная страница Weifield Group — самая полноценная форма в нашем списке. Сначала он включает всю необходимую информацию о вторичных методах связи, чтобы исключить ненужные отправки контактных форм. Это особенно важно для предприятий с несколькими площадками. В нем даже есть отказ от ответственности после прокрутки вниз, указывающий, что те, кто ищет работу, не должны заполнять форму; Подобные неформальные фильтры сократят количество ненужных материалов. Сайт использует асинхронную загрузку, поэтому браузер не может видеть элементы, которые даже не отображаются, что экономит максимальную пропускную способность и пространство. Наконец, доверие строится взаимно, показывая клиенту, где именно находится бизнес.

Вдохновение и идеи для дизайна страницы контактов

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

SleekNote

BrightLocal

РедБулл Энерджи

Рестораны Чипотле

Подия

Бренды в жизнь

Кик-пойнт-маркетинг

Подведение итогов

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

Загрузите тему Kadence и блоки Kadence для создания эффективных веб-сайтов

Если вы любите создавать привлекательный контент с красивым дизайном, Kadence Blocks предоставляет инструменты для творчества прямо в родном редакторе WordPress. Кроме того, наслаждайтесь тоннами предварительно созданного контента, который вы можете легко добавить на свой сайт, включая библиотеку каркасных блоков, чтобы начать работу над своим следующим веб-дизайном. Отлично подходит для вдохновения и быстрого развития!

Скачать сейчас

Кристен Райт

Кристен пишет учебные пособия, чтобы помочь пользователям WordPress с 2011 года. Как директор по маркетингу здесь, в iThemes, она стремится помочь вам найти лучшие способы создания, управления и поддержки эффективных веб-сайтов WordPress. Кристен также любит вести дневник (ознакомьтесь с ее побочным проектом «Год трансформации !»), походы и кемпинги, степ-аэробику, кулинарию и ежедневные приключения со своей семьей, надеясь жить более настоящей жизнью.