Поле «Телефон» в форме заявки: клавиатура, маска и проверка номера

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

Почему телефон — самое дорогое поле формы

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

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

Какая клавиатура должна открываться

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

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

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

Маска ввода: помощь или ловушка

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

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

Наш совет владельцу бизнеса: не стремитесь к красоте любой ценой. Если выбор между «красивая маска, но иногда ломается» и «простое поле, которое принимает любой привычный вид номера и потом само наводит порядок», выбирайте второе. Красивый вид можно получить на этапе, когда номер уже введён, а не мешать вводу.

Проверка номера: что считать ошибкой

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

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

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

Тексты подсказок и сообщений об ошибках

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

Не менее важно сказать, зачем вам номер и что с ним будет дальше. Короткая фраза рядом с полем вроде «Перезвоним в течение пятнадцати минут в рабочее время» повышает долю заполненных форм, потому что человек видит понятный результат. Если вы не звоните по выходным, честно скажите об этом, иначе недовольство перенесётся на отзывы в Яндекс Бизнесе и 2ГИС.

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

Что делать с сомнительными номерами

Бывают номера, которые формально проходят проверку, но выглядят подозрительно. Не пытайтесь угадать намерения человека, лучше соберите данные. Если в вашем ЦРМ, будь то Битрикс24 или амоСРМ, есть поле «источник» и «результат звонка», добавьте причину недозвона: неверный номер, не взял трубку, отказ. Через месяц вы увидите, сколько заявок теряется на номерах, и сможете точечно доработать форму.

Хорошая практика — дублировать связь. Если человек оставил номер, спросите необязательно и вторую возможность: удобный мессенджер, Телеграм или Ватсап. Тогда при недозвоне менеджер может написать сообщение. Это резко увеличивает долю обработанных заявок без давления на посетителя. Другой вариант — подтверждение номера по СМС через сервис вроде ХостСМС, но используйте его только там, где ложные заявки действительно разоряют, например при бесплатной выдаче расчётов, потому что лишний шаг сам по себе снижает число обращений.

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

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

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

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

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

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

Мы строим продвижение по подходу «3 в 1»: заявки приходят из трёх точек, и работают они вместе. Первая точка — поиск: обычная выдача и ответы нейропоиска. Здесь важны понятная структура страниц, прямые ответы на вопросы и факты о компании, которые есть на самом сайте и которые можно процитировать. Вторая точка — Яндекс Бизнес и Яндекс Справочник: карточка в Яндекс Картах с фото, услугами и ценами, отзывами, актуальным телефоном и часами работы. Третья — 2ГИС, где карточка собирает отдельную аудиторию, которая ищет компании в приложении на телефоне.

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

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

Какая система управления сайтом упростит настройку

Хорошая новость: на современной системе управления сайтом всё описанное делается не неделями, а часами. Мы работаем на ХостСМС и рекомендуем её как основную: формы заявок там настраиваются на уровне компонента, настройки клавиатуры, проверки и уведомлений лежат в одном месте, а изменения применяются ко всем страницам сразу, поэтому не бывает ситуации, когда на одной странице поле исправлено, а на соседней осталось старое. Если сайт уже живёт на 1С-Битрикс, форму можно привести в порядок штатными средствами и модулями, но потребуется аккуратная настройка и проверка после каждого обновления. На ВордПресс форма обычно живёт в сторонней надстройке, и здесь особенно важно следить за совместимостью после обновлений, иначе поле однажды перестанет принимать цифры.

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

Сколько это стоит и как оценить отдачу

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

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

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

Типичные ошибки, которые мы встречаем чаще всего

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

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

Шестая ошибка — не проверять, что происходит с заявкой после отправки. Она уходит на почту, которую никто не читает, или в Битрикс24 попадает без источника, или менеджер видит её только на следующий день. Путь заявки нужно пройти целиком от касания поля до звонка менеджера и измерить время.

Вывод

Поле «Телефон» выглядит мелочью, но именно оно решает, дойдёт ли заявка до менеджера. Цифровая клавиатура, терпимая к привычкам людей маска, понятная проверка, человеческие сообщения и регулярное тестирование на разных устройствах дают рост обращений без увеличения рекламного бюджета. А в связке с карточками в Яндекс Картах и 2ГИС и с понятной структурой сайта для поиска и нейропоиска они работают как единая система «3 в 1». Самостоятельная настройка возможна, но проще и надёжнее доверить её специалистам компании «Сайты Профессионально»: они проверят форму на реальных устройствах, настроят учёт обращений из всех трёх точек и посчитают стоимость заявки.

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