Форма заявки, которая не отпугивает: поля, шаги, валидация

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

Сколько полей оставить

Правило простое: каждое поле должно оправдать своё существование. Спросите по каждому — «что случится, если убрать?». Обычно оказывается, что отчество, город, «удобное время звонка» и «откуда вы о нас узнали» не нужны на первом контакте — их спросит менеджер.

• Для обратной связи хватает имени и одного контакта (телефон или email).
• Не просите то, что не будете использовать сегодня же.
• Длинную анкету оставьте на потом — сначала получите контакт.

Порядок полей и inline-валидация

Поля идут в логике человека, а не базы данных: сначала простое и понятное (имя), потом контакт, в конце — необязательное сообщение. Не начинайте с самого личного.

Валидируйте по ходу, а не только при отправке. Человек ввёл email — тут же подсказка, если формат неверный. И ошибка должна объяснять, что не так: не «ошибка», а «телефон должен содержать 11 цифр». Сообщение — рядом с полем, а не общим списком наверху.

Многошаговость для длинных форм

Если полей действительно много (расчёт, бриф, заказ), не показывайте простыню из пятнадцати строк — она пугает. Разбейте на 2-4 шага с индикатором прогресса «Шаг 2 из 3». Психологически три коротких экрана проходятся легче одного длинного, а вы ещё и успеваете сохранить контакт с первого шага, даже если человек бросит на третьем.

Мобильные мелочи: клавиатура и автоформат

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

<input type="tel" inputmode="numeric">
<input type="email" inputmode="email">

Для телефона открывается цифровая клавиатура, для email — раскладка с «@». Добавьте автоформат номера по мере ввода (+7 900 000-00-00) — человек видит, что всё правильно, и не бросает поле в сомнении.

Доступность

Форма должна работать не только у зрячего клиента с мышью.

• У каждого поля — настоящий <label>, а не только серый placeholder, который исчезает при вводе.
• Ошибку связывайте с полем через aria-describedby, чтобы скринридер её озвучил.
• Кнопка отправки при клике переходит в состояние «Отправляется…» и блокируется — иначе нетерпеливый клиент нажмёт трижды и создаст три заявки.
• Форму можно пройти с клавиатуры, порядок Tab логичен.

Чеклист

• Полей — минимум, каждое оправдано.
• Порядок по логике человека, личное — в конце.
• Inline-валидация с понятным текстом ошибки у поля.
• Длинная форма разбита на шаги с прогрессом.
• inputmode и автоформат для мобильных.
• label, aria-описания, состояние «Отправляется…».

Вывод

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