Автозаполнение форм в браузере: как оно ломает заявки

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

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

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

Как браузер понимает, что подставлять

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

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

Если разработчик назвал поля абстрактно — «поле 1», «поле 2», «поле 3» — браузеру не за что зацепиться. Подстановка не срабатывает, и пользователь заполняет всё руками.

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

Что именно нужно настроить

Разработчику это займёт немного времени, а эффект заметный.

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

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

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

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

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

Как форматирование номера ломает подстановку

Отдельная и очень частая история. На форму ставят маску ввода — заготовку вида «+7 (___) ___-__-__», чтобы номер получался красивым.

Задумка хорошая, реализация часто ломает всё.

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

Второй вариант поломки: маска не даёт вставить номер из буфера обмена. Человек скопировал свой номер, пытается вставить — ничего не происходит.

Третий: маска жёстко требует одиннадцать цифр российского формата, а у клиента номер другого формата. Отправить форму он не может вообще.

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

Проверка простая: скопируйте свой номер в разных вариантах записи и попробуйте вставить в форму. Если хоть один вариант ломается — маску надо чинить.

Другие мелочи, которые мешают заполнению

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

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

Непонятные сообщения об ошибках. «Ошибка валидации» вместо «Похоже, в номере не хватает цифры». Человек не понимает, что исправлять.

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

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

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

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

Как проверить свою форму

Тестировать надо руками и с телефона, а не по описанию.

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

Попробуйте вставить номер из буфера обмена в разных форматах.

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

Отправьте заявку и проверьте, дошла ли она. Заодно это проверка доставки писем — распространённая проблема, из-за которой заявки теряются молча.

Сделайте то же самое в другом браузере.

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

Как увидеть проблему в цифрах

Ощущения — плохой советчик, нужны данные.

В Яндекс.Метрике настройте цель на отправку формы и посмотрите, сколько людей доходит до формы и сколько отправляет. Разрыв между этими числами — ваш резерв.

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

Посмотрите карту кликов: если по кнопке отправки кликают многократно, значит, она не срабатывает или человек не получает подтверждения.

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

Отдельно проверьте, сколько заявок доходит до вас фактически, и сверьте с количеством достижений цели в Метрике. Расхождение означает техническую потерю: письма не доходят, скрипт падает, заявки теряются.

Сколько это стоит

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

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

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

Обратная сторона: когда подстановка вредит

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

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

Лечится не отключением подстановки, а подтверждением: после отправки показать человеку, какие данные ушли, и дать возможность исправить. Плюс письмо-подтверждение на почту, если она указана.

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

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

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

Общий вывод простой: подстановку выключать не надо, надо делать разметку аккуратно и показывать человеку, что именно он отправил.

Что показывать после отправки

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

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

В подтверждении полезно написать, что именно принято и когда ответят: «Заявка принята, перезвоним в течение рабочего дня до 19:00». Это удерживает человека от обзвона конкурентов в ближайший час.

Хорошо показать введённые данные — прежде всего номер телефона. Человек сразу заметит, если подставился не тот.

И стоит предложить второй канал связи: «Если удобнее — напишите нам в мессенджер». Часть людей после отправки формы всё равно хочет уточнить что-то немедленно.

Как это связано с продвижением 3 в 1

Удобство формы кажется вопросом, оторванным от каналов привлечения. На деле оно определяет, во что превращается весь приходящий поток.

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

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

2ГИС. Здесь аудитория мобильная целиком, и все проблемы с мобильной формой проявляются в полной мере. Человек перешёл из карточки на сайт, попал на форму с буквенной клавиатурой на поле телефона и ушёл. При этом сам переход из карточки на сайт вы увидите, а потерю — нет.

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

Что сделать прямо сегодня

Откройте свою форму на телефоне и пройдите её как клиент.

Проверьте типы полей и клавиатуры.

Проверьте, работает ли подстановка и не ломает ли её маска ввода.

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

Замените тяжёлую капчу на невидимую защиту, если она стоит.

Отправьте тестовую заявку и убедитесь, что она дошла.

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

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

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