Лучшие практики для контактной формы, которая действительно конвертирует

Большинство контактных форм проектируются задом наперёд: поля добавляются, потому что кто-то на совещании решил, что это «неплохо бы иметь», а не потому что человеку на другом конце сообщения это нужно, чтобы что-то с ним сделать. Формы, которые действительно конвертируют, строятся наоборот - урезаны до необходимого минимума, а затем протестированы на реальных устройствах реальными людьми, которые пытаются их сломать.

Ничего экзотического дальше не будет. В основном это вещи, которые поймал бы обычный чек-лист, если бы кто-нибудь по нему прошёлся.

Спрашивайте меньше, чем вам кажется нужным

Каждое поле формы - это точка принятия решения, а точка принятия решения - это шанс остановиться. Посетитель, который уже три предложения печатает настоящий запрос, всё равно скорее закроет вкладку, чем пойдёт искать номер телефона или прямо сейчас объяснять, «откуда он о вас узнал». Для большинства контактных форм имени, email и сообщения вполне достаточно. Всё остальное в лучшем случае необязательно, а в худшем - можно отложить: номер телефона - это то, что вы спрашиваете в ответе, а не условие для отправки запроса.

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

Подписи и валидация, которые не наказывают

Текст-плейсхолдер - это не подпись. Он исчезает в тот момент, когда кто-то кликает в поле, поэтому любой, кого отвлекли - а это большинство людей большую часть времени, - теряет единственную подсказку о том, что он вообще заполнял. Это также ломает автозаполнение во многих браузерах, а скринридеры нередко пропускают его целиком. Используйте настоящий элемент <label> для каждого поля, видимый над полем или рядом с ним, - всегда. Текст-плейсхолдер, если вы всё же его используете, нужен для примера формата («jane@company.com»), а не как инструкция.

Валидируйте по событию blur - когда человек покидает поле, - а не при каждом нажатии клавиши. Если помечать email как невалидный, пока человек ввёл всего три символа, это просто приучает людей игнорировать ваши сообщения об ошибках. Ошибки также должны быть конкретными и привязанными к тому полю, которое они описывают, а не собраны в один общий баннер «проверьте форму», из-за которого посетителю приходится искать проблему самому.

Не подведите на мобильных устройствах - это основная часть вашего трафика

Контактная форма на телефоне должна вызывать нужную клавиатуру без лишних напоминаний. Для этого и существуют type и inputmode: type="email" выводит клавишу @, а inputmode="tel" - цифровую клавиатуру для номера телефона. Свяжите каждое поле с соответствующим значением autocomplete (autocomplete="email", autocomplete="name"), чтобы браузер мог предложить заполнить его данными, которые у него уже есть - особенно на мобильных устройствах автозаполнение часто становится решающим фактором между заполненной формой и брошенной.

Размер зоны нажатия важен не меньше клавиатуры. Поле, которое удобно нажать курсором мыши, может быть по-настоящему трудно попасть пальцем - поэтому делайте интерактивные элементы достаточно крупными и с запасом расстояния между ними.

Поле honeypot, сделанное без вреда для настоящих посетителей

Honeypot - это поле формы, невидимое для человека и неотразимое для бота: поле с правдоподобным названием («website» или «company»), которое заполняет автоматическая отправка и которое настоящий посетитель никогда не видит. Сделанный небрежно, honeypot наказывает как раз тех, кого должен защищать - display: none и type="hidden" оба отфильтровываются «воспитанными» ботами, которые читают вычисленный CSS, тогда как некоторые скринридеры и расширения браузера, наоборот, показывают скрытые поля - в результате настоящий посетитель, использующий вспомогательные технологии, может заполнить такое поле и быть молча отклонённым как спам.

Скрывайте его правильно: расположите его за пределами экрана с помощью CSS, а не через display:none, пометьте его tabindex="-1", чтобы навигация с клавиатуры его пропускала, и aria-hidden="true", чтобы скринридеры никогда его не озвучивали. Такое поле невидимо для любого настоящего посетителя - будь то с клавиатуры, мыши или скринридера, - и при этом всё равно ловит неискушённых ботов, на которых приходится основная масса спама. Собственная защита от спама в Formhook - honeypot плюс ограничение частоты запросов, с Turnstile в качестве опции, если нужно больше, - включена по умолчанию на каждой форме, но этот шаблон разметки стоит использовать независимо от бэкенда.

Не оставляйте форму молчать после успешной отправки

Кнопка нажата, запрос ушёл - и что видит посетитель дальше? Форма, которая ничего не показывает, или страница «Спасибо», пустая и без контекста, выглядит сломанной, даже если всё сработало - не один посетитель отправлял форму трижды подряд просто потому, что ничто не сообщило ему об успехе первой попытки. Покажите встроенное подтверждение на месте формы или отправьте человека на настоящую страницу благодарности, которая объясняет, что будет дальше («мы ответим в течение одного рабочего дня»). Это подтверждение - ещё и последний шанс продолжить разговор: ссылка на ваши работы или страницу для записи ничего не стоит, а кто-то из посетителей ею воспользуется.

Ничего из этого не требует фреймворка или редизайна - в основном это разметка и пятнадцать минут внимания. Если вы не хотите сами собирать бэкенд-часть - доставку, фильтрацию спама, панель управления, хранение данных, - именно для этого существует Formhook; загляните на страницу тарифов, чтобы узнать, что доступно на бесплатном уровне. О том, что проверить перед запуском, рассказывает чек-лист перед запуском, а если вы выбираете между формой и обычной ссылкой mailto:, mailto против контактной формы разбирает обе стороны.