# Мобильная форма заявки: что мешает человеку отправить данные

Источник: https://quicklanding.ru/knowledge/mobile-contact-form/

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

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

> Проверка формы заканчивается получением сохранённого обращения. Красивое сообщение в браузере ещё не подтверждает, что данные дошли.

![Пользователь проверяет смартфон рядом с ноутбуком](/assets/images/knowledge/mobile-contact-form.webp)

## Оставьте понятные подписи полей

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

Не называйте поле «Контакт», если требуется именно телефон. Если принимаете телефон или email, объясните это и проверьте оба варианта. Не стоит показывать сообщение «неверные данные» без указания поля и способа исправления.

## Проверьте клавиатуру и вставку

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

Попробуйте вставить номер из контактов. Проверьте пробелы, скобки и международный формат, если вы его принимаете. Маска не должна удалять уже введённые символы при перемещении курсора. Слишком жёсткая проверка иногда отклоняет нормальный номер только из-за оформления.

## Ошибка должна помогать продолжить

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

Проверка в браузере нужна для удобства, но сервер тоже должен проверять входные данные. Наличие обязательного поля в HTML не защищает обработчик от прямого запроса. Разработчик должен согласовать правила обеих сторон, ограничения длины и допустимые значения.

| Ситуация | Удобное поведение |
| --- | --- |
| Незаполненное обязательное поле | Подсказка рядом с нужным полем |
| Неверный формат контакта | Объяснение допустимого формата |
| Ожидание ответа сервера | Видимый статус и защита от повторного клика |
| Ошибка отправки | Сохранённые значения и понятный повтор |
| Данные приняты | Подтверждение с описанием следующего шага |

## Посмотрите, что происходит вокруг формы

Откройте мобильную клавиатуру и проверьте прокрутку. Плавающая кнопка мессенджеров, cookie-баннер и нижняя панель могут перекрывать отправку. В модальном окне должно быть видно закрытие, а после закрытия человек должен вернуться к своему месту на странице.

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

## Как принять работу у разработчика

1. Отправьте корректное обращение и найдите его у получателя.
2. Проверьте пустые и ошибочные значения.
3. Вставьте контакт из буфера обмена.
4. Попробуйте повторный клик во время отправки.
5. Проверьте форму с открытой клавиатурой.
6. Убедитесь, что цель аналитики соответствует успешному действию.

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

## Документация и проверка сведений

Технические сведения сверены с документацией на 7 октября 2026 года. При настройке конкретного сервиса проверьте его текущую версию и действующие инструкции.

- [MDN: создание формы](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form)
- [MDN: проверка данных формы](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)

## Материалы по соседним задачам

- [Поиск потерянных заявок](/knowledge/website-no-leads/)
- [Уведомления в Telegram](/knowledge/telegram-leads-delivery/)
- [Разработка приложений и интеграций](/services/development/)

## Частые вопросы

### Нужно ли делать обязательными все поля?

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

### Достаточно ли проверки телефона в браузере?

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

### Можно ли считать нажатие кнопки заявкой?

Это отдельное событие. Успешную отправку лучше фиксировать после подтверждения сервером, а получение и обработку обращения проверять дополнительно.

Автор: Владимир Николаев