Зайти на свою страницу контакты: ВКонтакте: моя страница

страниц контактов — что происходит после того, как они нажимают «Отправить»?

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

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

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

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

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

УБЕДИТЕСЬ, ЧТО В ВАШЕЙ КОНТАКТНОЙ ФОРМЕ ЕСТЬ ЖУРНАЛ

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

Обычно я использую либо Formidable , либо Caldera для простых форм (у обоих есть хорошие бесплатные версии и их легко стилизовать), а Gravity Forms — для чего-то сложного. (И в ProPhoto, и в Showit есть хорошие встроенные контактные формы с журналами ввода, прежде чем вы спросите.)

Для тех из вас, кто работает с программным обеспечением для управления студией, таким как Lightblue , Pixifi или 17 Hats , конечно, вы можете вставлять их формы тоже. На самом деле, моя контактная форма связана с ActiveCampaign , мое программное обеспечение для управления электронной почтой, чтобы я мог отправлять автоматические ответы по электронной почте, которые мы рассмотрим позже в этом посте.

ВДОХНОВЛЯЕМЫЕ КОНТАКТНЫЕ ФОРМЫ

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

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

ПОСЛЕ НАЖИМАНИЯ ОТПРАВИТЬ

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

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

KEEP IT MOBILE

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

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

ПЕРЕНАПРАВЛЕНИЕ ПОСЕТИТЕЛЕЙ С ИСПОЛЬЗОВАНИЕМ ПИКСЕЛЕЙ FACEBOOK

По моему мнению, это наиболее игнорируемый аспект рекламы на Facebook. Где-то есть статистика, которая говорит, что потенциальным клиентам нужно 7 «прикосновений», прежде чем они рассмотрят возможность взаимодействия с вашим бизнесом. Мы говорили об отправке правильного сообщения об успехе, указании на дополнительный контент, последующей серии электронных писем, но разве вы не хотите, чтобы эти горячие лиды видели небольшие напоминания о вашем бренде, когда они просматривают Facebook и Instagram. Я получаю БОЛЬШИЕ результаты с этим. Прекратите беспорядочно продвигать посты и сделайте вот что.

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

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

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

 

14 современных примеров страниц контактов, которые делают это правильно

Дизайн, пользовательский интерфейс, UX, вдохновение

Последние страницы контактов в дикой природе

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

 

1. Вероятная история: Полная страница «Свяжитесь с нами» CTA

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

• Тема: Портфолио цифровой студии
• Достоинства дизайна: Прокрутка текстовых сообщений на странице контактов; большой заголовок CTA; перенаправляет на ваш основной почтовый клиент.
• Страна: Великобритания
• Дизайн: Вероятная история

Посетить сайт

 

2. Wildcatter: анимация обратного отсчета до контактной информации

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

• Тема: Творческая студия и производственная компания
• Достоинства дизайна: Забавная анимация обратного отсчета пользовательского интерфейса; памятное сообщение; микрофотокопия.
• Страна: Испания
• Дизайн: Mubien

Посетить сайт

 

3. Keep Garding: интерактивный дизайн страницы «Свяжитесь с нами»

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

• Тема: Студия постпродакшна цветокоррекции
• Преимущества дизайна: Имитирует живой чат; чистый и интерактивный; это не похоже на форму, которая делает ее более быстрой и удобной.
• Страна: Франция
• Дизайн: Франсуа-Ксавье Мансо

Посетить сайт

 

4. Aquerone: минималистичная контактная страница с отличной типографикой

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

• Тема: Магазин электронной коммерции CBD and Cannabis Lifestyle Concept
• Достоинства дизайна: Простота и удобство навигации; большой призыв к действию, красивая типографика.
• Страна: Нидерланды
• Дизайнер: Никколо Миранда

Посетить сайт

 

5. Lemkus: Clean Macro Contact Page

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

• Тема: Интернет-магазин розничной торговли кроссовками и одеждой в Южной Африке
• Достоинства дизайна: Удобная планировка; хорошо структурирована и легко мгновенно найти конкретную контактную информацию; большой призыв к действию; контраст.
• Страна: Южная Африка
• Дизайн: Dash Digital

Посетить сайт

 

6. Fuente Real: красивая чистая страница контактной формы с параллаксом

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

• Тема: Аренда бутик-квартир
• Дизайн Преимущества: большая хорошо структурированная контактная форма; чистый дизайн; нейтральные цвета с высокой контрастностью; хороший эффект параллакса
• Страна: Испания
• Дизайн: Mubien

Посетить сайт

 

7.

Мошенник: контактная страница с типографикой и цветовыми акцентами

Как мы уже установили, броские заголовки отлично помогают сделать бренд запоминающимся. Итак, добро пожаловать в Fakersphere. Этот дизайн страницы «Свяжитесь с нами» включает в себя теплое запоминающееся приветственное сообщение, микрокопию контактной информации, красивую градиентную кнопку CTA и красивую анимацию декоративной типографики.

• Тема: Агентство цифрового маркетинга брендов
• Достоинства дизайна: Броское название; анимация декоративной типографики; микрофотокопия; легко заметить красочную кнопку CTA.
• Страна: Нидерланды
• Дизайн: Faker

Посетить сайт

 

8. K72: Зацикливание страницы контактов

Большой текст с призывом к действию — это круто, но знаете, что круче? Циклический текст призыва к действию. В этом случае k72 позволяет бесконечно прокручивать страницу контактов, повторяя один и тот же раздел снова и снова с небольшими изменениями в тексте CTA. Это инновационно и определенно запоминается (как только вы заметите, что они сделали).

• Тема:
  Digital Agency
• Достоинства дизайна: Инновационная секция зацикливания с небольшими изменениями в тексте CTA; микрофотокопия.
• Страна: Канада
• Дизайнер: Локомотив

Посетить сайт

 

9. Казуки Нода: анимация контактной электронной почты и раздел контактного поля

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

• Тема: Дизайнер Арт-директор Сайт портфолио
• Преимущества дизайна: Коробчатая компоновка; анимация пользовательского интерфейса; чистый дизайн
• Страна: Япония
• Дизайн: Казуки Нода

Посетить сайт

 

10.

Lewa House: наложение слайдов с контактными формами

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

• Тема: Охрана дикой природы в Кении
• Достоинства дизайна: Наложение контактной страницы с физическим дизайном информационного бюллетеня и короткой контактной формой для запросов.
• Страна: Великобритания
• Дизайнер: Зеленый хамелеон

Посетить сайт

 

11. Деннис Снелленберг: Часто задаваемые вопросы Стиль Форма сообщения Контактная страница

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

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

• Тема: Портфолио внештатных дизайнеров и разработчиков
• Преимущества дизайна: Краткая контактная форма с примерами; хорошо структурированный
• Страна: Нидерланды
• Дизайн: Деннис Снелленберг

Посетить сайт

 

12. Sennep: страница контактов с буквально человеческим прикосновением

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

• Тема: Сайт портфолио студии цифровых продуктов
• Достоинства дизайна: Креативная концепция; визуализация каламбура; анимация пользовательского интерфейса; микрокопия
• Страна: Великобритания
• Дизайн: Sennep

Посетить сайт

 

13.

Goliath Entertainment: Interactive Contact Email Section

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

• Тема: Компания по организации многоцелевых вечеринок
• Достоинства дизайна: Весело, но чисто; микрокопия
• Страна: Франция
• Дизайнер: Ronin161

Посетить сайт

 

14. The Badass Project: контактная форма в альтернативном стиле макросов с анимацией пользовательского интерфейса

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

• Тема: Арт-студия событийной фотографии
• Преимущества дизайна: Креативный дизайн; контраст; микро анимации.
• Страна: Испания
• Дизайн: Кучилло

Посетить сайт

 

В заключение

Надеюсь, вам понравились 14 последних примеров страницы «Контакты» и вы вдохновились на разработку следующего дизайна. Теперь давайте суммируем, что эти страницы контактов делают правильно:

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