Всплывающая клавиатура на телефоне закрывает кнопку отправки: как проверить и исправить

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

Что происходит на экране, когда появляется клавиатура

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

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

Почему кнопка уходит под экран и страница не прокручивается

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

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

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

Как выглядят симптомы в обращениях и отчётах

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

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

Обратите внимание и на жалобы из отзывов в Яндекс Картах и 2ГИС: фразы вроде «не смог оставить заявку», «никто не перезвонил», хотя человек был уверен, что отправил. Такие отзывы нередко результат сломанной формы, а не плохой работы менеджеров.

Как проверить на реальных устройствах

Начните с того, что у вас под рукой. Возьмите свой телефон и телефон кого-нибудь из коллег с другой системой. Желательно проверить хотя бы четыре сочетания: айфон с родным браузером, айфон с Яндекс Браузером, телефон на системе Андроид с Хромом и тот же телефон с Яндекс Браузером. Если у вас есть старое устройство с небольшим экраном, обязательно проверьте и на нём: на маленьких экранах проблема проявляется ярче всего.

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

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

Что менять в вёрстке: принципы без кода

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

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

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

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

Особенности популярных мобильных браузеров

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

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

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

Формы во всплывающих окнах и в виджетах

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

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

Как измерить потери и оценить эффект

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

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

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

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

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

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

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

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

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

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

Вывод

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

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