8 красивых примеров контактных форм + как добавить их на свой сайт

Пять советов по созданию дизайна контактной формы

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

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

1. Четко объясните, для чего предназначена ваша форма.

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

• Форма запроса на продажу

• Форма поддержки клиентов

• Форма онлайн-заказа

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

• И т.п.

Есть два основных подхода к решению этой проблемы, и вы увидите оба в приведенных ниже примерах контактной формы из реальной жизни:

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

2. Раскрывающееся поле. Добавьте раскрывающееся поле в верхней части формы, в котором перечислены различные варианты использования и автоматически перенаправит вашу контактную форму в нужное место.

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

2. Ограничьте длину формы, чтобы получить больше конверсий (но не забывайте о качестве).

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

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

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

Источник

Если говорить более анекдотично, Marketo протестировал три формы с результатами, аналогичными HubSpot:

• 5 полей - конверсия 13,4%

• 7 полей - конверсия 12,0%

• 9 полей - конверсия 10,0%

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

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

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

3. Используйте интеллектуальную микрокопию для объяснения полей.

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

Например, если у вас есть поле «бюджет», может быть неясно, для чего этот бюджет. Это на весь проект? Это только для определенной части?

Чтобы избежать такой путаницы, вы можете добавить «микрокопию» в свою контактную форму.

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

4. Поэкспериментируйте с разными форматами.

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

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

5. Расскажите людям, что делать дальше, и определите ожидания.

Дизайн вашей контактной формы не готов, когда люди нажимают «Отправить»!

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

• Вы отвечаете на все запросы или только на некоторые?

• Как долго вы будете отвечать?

• Вы ответите по электронной почте или другим способом?

Если вы установите четкие ожидания, ваши посетители не будут интересоваться, что происходит, и работает ли ваша форма.

Восемь отличных примеров контактных форм с реальных сайтов

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

1. Полоса

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

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

Помимо этого, есть еще несколько хороших вариантов дизайна, в том числе:

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

• Микрокопия - термин «объем платежей» может немного сбивать с толку, поэтому Stripe добавляет полезную микрокопию, объясняющую, как заполнить поле.

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

2. Getsitecontrol

Здесь, в Getsitecontrol, мы немного по-другому обрабатываем нашу форму обратной связи.

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

Это действительно удобно для людей, потому что они могут…

• доступ к нашей контактной форме с любой страницы сайта,

• отправить сообщение, не отвлекаясь от того, чем они еще занимались (например, читая этот пост в блоге!).

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

3. Кинста

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

Kinsta перечисляет пять самых популярных запросов на контакт:

1. Цены или планы

2. Характеристики или техническая информация

3. Запросить перенос или любой другой связанный с этим вопрос

4. Гостевой пост, спонсируемый пост или запрос обратной ссылки

5. Что-нибудь еще

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

Это позволяет Kinsta собирать именно ту информацию, которая им нужна, не обременяя посетителей посторонними полями.

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

Kinsta также ставит четкие ожидания наверху: «Мы свяжемся с вами в течение одного рабочего дня».

4. Выборочный скрининг

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

Но давайте поговорим о том, почему иногда это нормально и почему это отличный пример контактной формы.

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

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

Можно сказать, что Choice Screening проверяет своих потенциальных клиентов с помощью этой контактной формы!

5. Джоэл Клеттке / Деловой повседневный копирайтинг

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

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

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

6. Нил Патель

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

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

Это просто, но иногда просто - это все, что вам нужно в дизайне контактной формы.

7. Focus Lab

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

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

8. CAMICB

CAMICB, сокращение от Международного совета по сертификации менеджеров ассоциаций сообществ, предлагает сертификацию ассоциаций сообществ в США.

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

Имея всего три поля, CAMICB сохраняет свою форму краткой и по существу. Затем всплывающий подход создает приятный интерфейс, не отвлекающий внимание, в котором все внимание сосредоточено на форме.

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

И чтобы упростить задачу , CAMICB также отображает выдвижную контактную форму, к которой пользователи могут получить доступ в ее нижнем колонтитуле:

Как создать свой собственный настраиваемый дизайн контактной формы

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

Если вы хотите начать, [Getsitecontrol] (/ feedback-popup / поможет вам в кратчайшие сроки начать работу.

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

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

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