Зачем проверять формы на мобильных
Форма обратной связи — конверсионная точка сайта. Пользователь прошёл весь путь: нашёл сайт в поиске, прочитал контент, принял решение обратиться. Осталось заполнить форму. И если форма на мобильном неудобна — поле мелкое, клавиатура неподходящая, кнопка за пределами экрана — пользователь уходит. Конверсия потеряна на последнем шаге.
По данным из проектов, которые я вёл, после оптимизации форм для мобильных конверсия вырастала на 15-30%. Это не SEO-фактор напрямую, но конверсия — конечная цель всей воронки. Яндекс косвенно учитывает удобство форм через поведенческие факторы: если пользователь долго мучается с формой и уходит — это негативный сигнал.
Мобильные формы имеют свою специфику: маленький экран, виртуальная клавиатура (которая закрывает половину экрана), отсутствие мыши для точного наведения, сенсорное управление вместо кликов. Всё это нужно учитывать при проектировании и тестировании.
Пошаговая инструкция
Шаг 1. Проверьте размер полей формы
Минимальная высота поля ввода (input, textarea) — 44px по рекомендациям Apple, 48px по рекомендациям Google. На практике я рекомендую 48-52px — это обеспечивает комфортное нажатие и достаточно места для текста.
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
min-height: 48px;
padding: 12px 16px;
font-size: 16px; /* важно! 16px предотвращает зум на iOS */
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
textarea {
min-height: 120px;
resize: vertical;
}Критически важно: размер шрифта в input не менее 16px. На iOS Safari при фокусе на input с font-size менее 16px браузер автоматически масштабирует (зумит) страницу к полю ввода. Это раздражающий побочный эффект: страница масштабируется, пользователь теряет контекст, после заполнения нужно вручную отзумить обратно. Решение простое — font-size: 16px для всех полей.
Шаг 2. Укажите правильные input types
Атрибут type определяет, какая клавиатура откроется на мобильном устройстве. Правильный type — это удобство ввода без переключения клавиатуры:
type="tel"— для номера телефона. Открывает цифровую клавиатуру с +, *, #. Пользователю не нужно переключаться с букв на цифры.type="email"— для email. Клавиатура содержит @ и . на видном месте. Автоматическая валидация формата email.type="number"— для числовых значений (количество, ИНН). Открывает цифровую клавиатуру.type="url"— для URL сайта. Клавиатура содержит /, .com, :.type="text"— для имени, комментария и всего остального. Стандартная клавиатура.
Пример формы с правильными типами:
<form action="/submit" method="post">
<label for="name">Ваше имя</label>
<input type="text" id="name" name="name"
autocomplete="name" required>
<label for="phone">Телефон</label>
<input type="tel" id="phone" name="phone"
autocomplete="tel" placeholder="+7 (___) ___-__-__" required>
<label for="email">Email</label>
<input type="email" id="email" name="email"
autocomplete="email">
<label for="message">Сообщение</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Отправить заявку</button>
</form>Шаг 3. Добавьте autocomplete
Атрибут autocomplete позволяет браузеру автоматически заполнять поля из сохранённых данных пользователя. На мобильных это экономит время и снижает вероятность ошибки:
autocomplete="name"— полное имя.autocomplete="given-name"— имя.autocomplete="family-name"— фамилия.autocomplete="tel"— телефон.autocomplete="email"��� email.autocomplete="organization"— название компании.autocomplete="street-address"— адрес.autocomplete="postal-code"— индекс.
Браузер предложит автозаполнение, если раньше пользователь вводил эти данные на других сайтах. Один тап — и все поля заполнены. Это значительно увеличивает completion rate формы.
Шаг 4. Добавьте label для каждого поля
Каждое поле формы должно иметь видимый <label>, связанный с полем через атрибут for. Это важно для:
- Доступности. Screen reader озвучивает label при фокусе на поле. Без label пользователь с нарушениями зрения не понимает, что вводить.
- Удобства. Тап по label фокусирует соответствующее поле. Увеличивает площадь touch target.
- Контекста. Placeholder исчезает при начале ввода. Если нет label — пользователь забывает, что нужно ввести в это поле.
Не используйте placeholder вместо label. Placeholder — это подсказка формата (+7 (___) ___-__-__), а не название поля. Label и placeholder — разные элементы с разными функ��иями.
Шаг 5. Оптимизируйте кнопку отправки
Кнопка отправки формы — последний барьер перед конверсией. На мобильных она должна быть:
- Достаточно большой. Минимум 48px высота, оптимально — 52-56px. Ширина — 100% контейнера формы (на мобильных кнопка на всю ширину удобнее узкой).
- Контрастной. Визуально выделена цветом, отличающимся от фона и полей. Стандарт: яркий акцентный цвет (синий, зелёный, оранжевый).
- С понятным текстом. Не «Отправить» (отправить что?), а «Отправить заявку», «Записаться на консультацию», «Получить расчёт». Конкретика повышает конверсию.
- Видимой без скролла. Если форма длинная — пользователь может не увидеть кнопку. Рассмотрите фиксированную кнопку внизу экрана для длинных форм.
button[type="submit"] {
display: block;
width: 100%;
min-height: 52px;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: #0066cc;
border: none;
border-radius: 6px;
cursor: pointer;
}
button[type="submit"]:active {
background: #0052a3; /* отклик на нажатие */
}Шаг 6. Минимизируйте количество полей
На мобильных каждое дополнительное поле — это дополнительный барьер. Правило: оставьте только те поля, без которых невозможно обработать заявку.
Для сайта услуг обычно достаточно:
- Имя — чтобы обратиться к клиенту.
- Телефон — для связи.
- Сообщение (опционально) — если пользователь хочет уточнить задачу.
Три поля — оптимум. Каждое дополнительное поле снижает конверсию на 5-10%. Email, название компании, адрес сайта, ИНН — всё это можно уточнить при звонке. Не превращайте форму заявки в анкету.
Шаг 7. Настройте валидацию и обратную связь
На мобильных валидация формы особенно важна — пользователь не видит всех полей одновременно (часть скрыта клавиатурой). Рекомендации:
- Валидация в реальном времени. Показывайте ошибку сразу после выхода из поля (blur), а не после нажатия «Отправить». Пользователь видит ошибку, пока поле ещё в контексте.
- Понятные сообщения об ошибках. Не «Ошибка валидации поля email», а «Введите корректный email, например: name@example.ru».
- Визуальная индикация. Красная рамка для поля с ошибкой, зелёная — для корректно заполненного. Текст ошибки под полем, а не в alert().
- Скролл к первой ошибке. Если при отправке обнаружены ошибки — автоматически скроллите страницу к первому полю с ошибкой и фокусируйте его.
- Подтверждение отправки. После успешной отправки — чёткое сообщение: «Заявка отправлена! Я перезвоню в течение 30 минут.» Не перенаправляйте на другую страницу — это сбивает мобильного пользователя.
Шаг 8. Протестируйте на реальных устройствах
Откройте форму на смартфоне и пройдите полный путь заполнения:
- Тап на первое поле — клавиатура открылась, поле видно над клавиатурой?
- Введите имя — переключение на следующее поле удобно (Tab, Next на клавиатуре)?
- Поле телефона — открылась цифровая клавиатура (type=»tel»)?
- Автозаполнение предложено (autocomplete)?
- При скролле вниз кнопка «Отправить» видна?
- Нажали «Отправить» — форма отправилась, подтверждение отобразилось?
- Если ошибка — сообщение понятное, поле с ошибкой выделено?
Тестируйте на Android (Chrome) и iPhone (Safari) — поведение клавиатуры и автозаполнения отличается.
Типичные ошибки
- Font-size менее 16px в input. На iOS Safari страница зумится при фокусе на поле с маленьким шрифтом. Пользователь теряет контекст, видит только увеличенное поле. Решение: font-size: 16px для всех полей ввода.
- Неправильный input type. Поле телефона с type=»text» — пользователь вынужден переключать клавиатуру на цифры. Поле email с type=»text» — нет @ на клавиатуре. Используйте правильные типы.
- Placeholder вместо label. Placeholder исчезает при вводе. Пользователь заполнил 3 поля, вернулся к первому — не помнит, что там должно быть. Всегда добавляйте видимый label.
- Слишком много полей. Форма из 8 полей на мобильном — это 8 открытий клавиатуры, 8 переключений между полями. Конверсия падает катастрофически. Минимизируйте до 2-3 обязательных полей.
- ��нопка «Отправить» за пределами видимой области. Форма длинная, кнопка внизу, клавиатура закрывает половину экрана. Пользователь не видит кнопку и не понимает, как отправить форму.
- Отсутствие подтверждения отправки. Пользователь нажал «Отправить» — ничего не произошло (или кажется, что ничего). Нет анимации загрузки, нет сообщения «Отправлено». Пользователь нажимает повторно — отправляет дубль.
- Валидация только через alert(). Всплывающее окно «Заполните обязательные поля» на мобильных выглядит архаично и не указывает, какое именно поле заполнено неверно.
Что проверить в ито��е
- Все поля формы имеют высоту не менее 48px и font-size не менее 16px.
- Указаны правильные input types: tel для телефона, email для email, text для имени.
- Добавлен атрибут autocomplete для всех полей (name, tel, email).
- Каждое поле имеет видимый label, связанный через for/id.
- Placeholder используется как подсказка формата, а не как замена label.
- Кнопка отправки достаточно большая (минимум 48px), контрастная, с понятным текстом.
- Количество полей минимизировано — только необходимые для обработки заявки.
- Валидация работает в реальном времени, сообщения об ошибках понятны.
- После отправки отображается подтверждение.
- Форма протестирована на реальных устройствах (Android, iPhone) — от фокуса до отправки.
- На iOS нет автоматического зума при фокусе на поле (font-size: 16px).
