Формы на телефоне — тип клавиатуры, автокомплит, минимум полей

Открыли форму заявки на лендинге. На телефоне. Поле "Телефон" — выпала буквенная клавиатура, пользователь переключается на цифры (2 тапа). Поле "E-mail" — клавиатура без @ (надо тянуться через символы). Поле "Имя" не подсасывает из автозаполнения. Поле "Откуда узнали о нас" — обязательное. И в финале 8 полей вместо 2.

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

Тип клавиатуры — inputmode и type

HTML5 даёт два атрибута, которые подсказывают браузеру, какую клавиатуру открыть:

• type="tel" — цифровая клавиатура с символами (+ - ( )). Для телефонов.
• type="email" — буквенная клавиатура с @ и точкой видными сразу.
• type="url" — буквенная клавиатура с /, точкой, .com подсказками.
• type="number" — чистая числовая клавиатура без знаков. Для возраста, количества.
• type="search" — клавиатура с кнопкой "Поиск" вместо "Ввод".
• type="date", type="time", type="datetime-local" — нативный пикер.

inputmode — более тонкая настройка, поддерживается всеми мобильными браузерами с 2020:

• inputmode="numeric" — только цифры (PIN-код, индекс, ИНН без знаков).
• inputmode="decimal" — цифры с точкой (сумма, вес).
• inputmode="tel" — телефонная.
• inputmode="email" — буквы + @ + точка.
• inputmode="search" — клавиатура поиска.
• inputmode="none" — не открывать клавиатуру (для кастомного пикера).

Правило — type отвечает за валидацию и семантику, inputmode за раскладку. Часто их ставят вместе: <input type="text" inputmode="numeric"> — для поля "4 последние цифры карты", где не нужны автомата валидация type=number.

Что мы видим в реальных формах: ровно треть полей "Телефон" в РФ-сегменте до сих пор без type=tel. Цена ошибки — 2-3 лишних тапа на каждое заполнение. На большой выборке это до 8% отказов.

Autocomplete — подсос из системы

Браузеры хранят сохранённые имена, адреса, телефоны, карты. autocomplete подсказывает браузеру, что нужно подставить:

• autocomplete="name", given-name", family-name" — имя.
• autocomplete="email" — почта.
• autocomplete="tel", tel-national" — телефон.
• autocomplete="street-address", postal-code", address-level1/2" — адресные части.
• autocomplete="cc-number", cc-exp", cc-csc" — карта.
• autocomplete="one-time-code" — код из SMS подсасывается из уведомления (iOS/Android поддерживают с 2020).
• autocomplete="current-password", new-password" — пароли.
• autocomplete="off" — отключить (для чувствительных полей, типа OTP в банках).

На iPhone с настроенным Контактом форма с правильным autocomplete заполняется одним тапом ("Использовать данные контакта"). На Android аналогично.

Главный антипаттерн — autocomplete="off" ради "безопасности" на регулярных полях. Это вредит UX, не помогает безопасности. Браузер всё равно может подсосать через эвристику. Выключать autocomplete можно только если у вас реально чувствительные данные с особыми требованиями.

Один формат поля = один input

Разбить телефон на "Код", "Номер", "Расширение" — антипаттерн. Один <input type="tel"> с маской через JS на лету. Так и autocomplete сработает (он на одно поле), и валидация проще, и юзеру удобнее.

Дата рождения: тоже один input с placeholder "ДД.ММ.ГГГГ" или нативный type="date". Три селекта для дня/месяца/года на мобиле — три открытия системного пикера, три тапа "Готово". Юзер выдохся.

Адрес: использовать DaData/КЛАДР/Yandex Suggest API с одним полем "Введите адрес". Никаких отдельных полей "Город / Улица / Дом / Корпус". Suggest подсосёт всё за раз.

Минимум полей — правило 3

Длинная исследовательская традиция (Baymard Institute, Nielsen, Google UX): каждое дополнительное поле в форме снижает конверсию на 3-8%. Конкретные цифры:

• 1 поле (например, телефон) — конверсия 12-25%.
• 2 поля (телефон + имя) — 8-15%.
• 3 поля — 5-10%.
• 5+ полей — 2-4%.
• 10+ полей — 0.5-1%.

Цифры зависят от ниши, но тренд железный. Для лендинга услуги в 2026 правило простое: имя + телефон, всё остальное менеджер уточнит при звонке. E-mail, источник, бюджет, тип задачи — это поля для платной формы, а не для первого касания.

Если форма обязана быть длинной (например, ипотечная анкета) — разбейте на шаги по 3-4 поля, с прогресс-баром. Это multi-step form. Конверсия выше, чем у одной длинной формы, на 15-40%.

Дополнительные приёмы для мобильных форм

1. enterkeyhint. Атрибут enterkeyhint="next", "send", "done" меняет надпись на кнопке Enter в нативной клавиатуре. send для submit — финальный input в форме.

2. Скрыть лейбл, оставить placeholder? Нет, не скрывайте. Лейбл нужен для скринридеров и для понимания, какое поле заполняем. Используйте floating label (плавающий лейбл): пустое поле — лейбл внутри, начали печатать — лейбл уехал наверх в маленький.

3. Зум при фокусе. Если шрифт input меньше 16px, iOS зумит страницу при тапе на поле. Это бесит. Делайте font-size: 16px минимум, либо viewport meta с user-scalable=no (но это плохо для доступности).

4. Маска и формат. Маски на телефон, дату, ИНН — нужны. Но не блокирующие, а "подсказывающие". Пользователь может вставить из буфера +7 (905) 555-12-34 и +7-905-555-12-34 — маска должна нормализовать, а не отвергнуть.

5. Inline-валидация. Подсказывать ошибки сразу после blur (потери фокуса), не после submit. Зелёная галочка после правильного ввода = микро-награда, повышает завершаемость.

6. Submit с фидбеком. Клик "Отправить" → кнопка показывает "Отправляем..." с лоадером → "Спасибо! Перезвоним за 15 минут". Никаких пустых экранов и подвисов.

7. Безопасная отправка по Enter. enterkeyhint="send" + action на форме = после ввода последнего поля юзер жмёт "Отправить" с клавиатуры и форма уходит. Без визуального поиска кнопки.

Чек-лист перед сдачей формы

• Каждое поле имеет правильный type и inputmode.
• Поля имеют autocomplete с подходящим значением.
• Шрифт ≥ 16px чтобы не было зума.
• Floating label, не только placeholder.
• enterkeyhint на каждом input.
• Submit-кнопка в зелёной зоне (см. зона большого пальца).
• Максимум 3 поля для первого касания, остальное в multi-step.
• Inline-валидация с понятным сообщением.
• Visible loader при submit.
• Подтверждение успеха + следующий шаг.

Замер на проекте

Лендинг сантехнических услуг — было 6 полей (имя, телефон, e-mail, тип услуги, дата выезда, комментарий). Конверсия мобильной формы — 3.1%. Упростили до 2 полей (имя + телефон), с inputmode=tel, autocomplete=tel и floating label. Конверсия — 7.4%. Заявки за месяц выросли в 2.4 раза. Время доработки — 6 часов.

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