SEO
SEO блиц
1150

Правильное оформление форм на сайте

Правильно составленная форма оформления заказа поможет не спугнуть посетителя на завершающем этапе конверсии.

В закладки

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

Создавайте простые формы

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

Обеспечьте правильный ввод данных

Во-первых, используйте подсказки. Банальное «Иванов Иван Иванович» в поле для ввода ФИО подсказывает пользователю о том, что необходимо прописывать инициалы полностью, избегая формулировок вроде «Иванов И.И.». Поля ввода номера телефона обязательно должны иметь маску.

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

Сохраняйте введённые данные

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

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

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

Наглядность хода оформления

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

Например, первый этап — общая информация о заказчике (ФИО, номер телефона и так далее), второй — адрес доставки, третий — выбор способа оплаты и четвёртый — проверка информации и подтверждение сделки.

Отсутствие регистрации

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

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

Реализация защиты от спама

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

Защита персональных данных

Ссылки на Пользовательское соглашение и Правила обработки персональных данных на данный момент необходимы в соответствии с 152-ФЗ, а их отсутствие карается наложением штрафа на владельцев сайта.

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

Правила оформления форм обратной связи

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

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

Вывод

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

Весь справочник в статьях на vc.ru или на сайте.

Навигатор по первым ста заметкам.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "SEO блиц", "author_type": "self", "tags": ["\u0444\u043e\u0440\u043c\u044b\u043d\u0430\u0441\u0430\u0439\u0442\u0435"], "comments": 3, "likes": 10, "favorites": 87, "is_advertisement": false, "subsite_label": "seo", "id": 79735, "is_wide": false, "is_ugc": true, "date": "Mon, 19 Aug 2019 14:35:40 +0300", "is_special": false }
0
{ "id": 79735, "author_id": 166702, "diff_limit": 1000, "urls": {"diff":"\/comments\/79735\/get","add":"\/comments\/79735\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/79735"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199127, "last_count_and_date": null }
3 комментария
Популярные
По порядку
4

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

Ответить
1

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

Ответить
0

всё это выглядит убого, формы еле видны, поверх них текст, хотя можно красиво использовать placeholder

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }