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

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

Четкие и лаконичные названия

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

Информативное описание

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

Никто не любит длинные формы

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

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

2 3

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

Размещайте текстовые метки слева над полями заполнения

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

Выравнивание по левому краю внутри поля

Выравнивание по левому краю внутри поля

Выравнивание по левому краю над полем

Выравнивание по левому краю над полем

Выравнивание по левому краю в соответствии с полем

Выравнивание по левому краю в соответствии с полем

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

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

Располагайте форму над линией сгиба

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

7

Помощь посетителям в заполнении формы

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

Например, в поле:  Адрес электронной почты можно написать – «example@domain.com».

8 9

Ясное указание на ошибку

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

10

Подсветка заполняемых полей

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

11

Размер, шрифт и цвет фона

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

Разграничьте обязательные и необязательные поля

Лучший и самый простой способ провести различие между обязательными и необязательными полями использовать знак звездочки (*). Это позволит улучшить пользовательский опыт и, следовательно, коэффициент конверсии.

Оптимизация форм под мобильную версию

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

Избегайте длинных выпадающих меню

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

12

Персонализация сообщения после отправки формы

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

Применение простой капчи

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

Например, используйте что-то вроде этого, нужно просто поставить флажок:

13

Заключение

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

Источник