Формы
Форма — место, где теряется больше всего заявок. Разбираем правила, которые дают самый заметный прирост: меньше полей, правильные атрибуты, понятные ошибки.
Правило номер один: меньше полей
| Задача формы | Достаточно | Лишнее |
|---|---|---|
| Заявка на обратный звонок | Имя, телефон | Почта, город, комментарий, компания |
| Вопрос по товару | Вопрос, способ связи | ФИО полностью, должность |
| Оформление заказа | Имя, телефон, адрес доставки | Регистрация, отчество, дата рождения |
| Подписка | Почта | Имя, интересы, согласия галочками по одной |
Всё, что не нужно прямо сейчас, спрашивается в разговоре после заявки. Каждое лишнее поле — это доля людей, которые не дошли до конца.
Разметка поля
<div class="field">
<label for="tel">Телефон</label>
<input id="tel" name="tel"
type="tel" inputmode="tel" autocomplete="tel"
placeholder="+7 900 000-00-00"
aria-describedby="tel-hint">
<p id="tel-hint" class="hint">Перезвоним в течение 15 минут</p>
</div>labelсfor— видимая подпись, связанная с полем. Не placeholder.typeиinputmode— правильная клавиатура на телефоне.autocomplete— автозаполнение экономит десятки секунд.- Шрифт от 16 px — иначе iOS увеличивает страницу при фокусе.
- Подсказка о том, что будет дальше — снимает тревогу перед отправкой.
| Поле | type | inputmode | autocomplete |
|---|---|---|---|
| Телефон | tel | tel | tel |
| Почта | email | email | email |
| Имя | text | — | name |
| Адрес | text | — | street-address |
| Индекс | text | numeric | postal-code |
| Код из СМС | text | numeric | one-time-code |
Валидация и ошибки
- Проверяйте по ходу, а не только после отправки — но не ругайтесь, пока человек ещё печатает.
- Ошибка рядом с полем, а не общим списком сверху.
- Текст объясняет, что не так и как исправить: «Телефон должен содержать 10 цифр» вместо «Ошибка».
- Не сбрасывайте введённое при ошибке — самая раздражающая потеря.
- Не только цветом: рамка + значок + текст.
- Фокус на первое поле с ошибкой после неудачной отправки.
- Принимайте разные форматы: телефон с пробелами, скобками и без — нормализуйте сами.
После отправки
- Заблокируйте кнопку и покажите индикатор — иначе будет три одинаковых заявки.
- Явное подтверждение: что заявка принята и что произойдёт дальше.
- Номер обращения, если он есть.
- Не уводите на пустую страницу «Спасибо» без пути обратно.
- Ошибка отправки должна быть видна и предлагать альтернативу: позвонить, написать в мессенджер.
Мобильные детали
- Поля в одну колонку: два поля в ряд на узком экране неудобны.
- Высота поля от 44 px.
- Между полями достаточный отступ — иначе промахи.
- Кнопка во всю ширину — её трудно не заметить.
- Рядом с формой — альтернативный способ связи: звонок или мессенджер.
- Согласие на обработку данных — одной понятной строкой, а не тремя галочками.
Итог
Формы теряют заявки на мелочах: лишнее поле, неверная клавиатура, ошибка без объяснения, кнопка под клавиатурой. Сокращение формы до двух полей и правильные атрибуты дают самый заметный прирост из всей работы над удобством. Дальше — контент.
Частые вопросы
Сколько полей должно быть в форме заявки?
Столько, сколько нужно, чтобы связаться: обычно имя и телефон. Каждое дополнительное поле снижает долю отправивших, а уточнить детали можно в разговоре.
Почему на телефоне открывается не та клавиатура?
Не заданы type и inputmode. Для телефона нужен type="tel" и inputmode="tel", для почты — type="email". Иначе человек набирает цифры на буквенной клавиатуре.
Placeholder вместо подписи — можно?
Нет. Подсказка исчезает при вводе, и человек забывает, что за поле заполняет. Плюс placeholder бледный по определению и плохо читается. Нужен видимый label.
Как оформлять ошибки?
Рядом с полем, текстом, с объяснением что не так и как исправить. Не сбрасывая уже введённое. Красной рамки недостаточно: смысл нельзя передавать одним цветом.