Плейсхолдер: что это такое и когда он вредит форме

Плейсхолдер (от английского placeholder — «заполнитель») — текстовая подсказка внутри поля ввода, которая показывает, что и в каком формате нужно ввести, и исчезает, как только человек начинает печатать.

Термин встречается ещё в двух значениях: временный блок в макете вместо будущего контента и текст-заглушка в вёрстке. Ниже — про все три, но основное внимание первому: именно на нём чаще всего теряются заявки.

Три значения термина

1. Подсказка в поле ввода. Серый текст внутри поля: «+7 900 000-00-00», «Иван», «name@mail.ru». Задаётся атрибутом placeholder и пропадает при вводе.
2. Заглушка в макете. Прямоугольник вместо фотографии или блок «текст будет здесь» на этапе прототипа, когда содержимое ещё не готово.
3. Текст-рыба. Бессмысленный текст вроде Lorem ipsum, которым заполняют вёрстку, чтобы оценить объём и ритм блока до появления настоящего.

Плейсхолдер и подпись поля: главная ошибка

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

Что происходит на практике. Человек заполнил четыре поля из пяти, вернулся проверить — а подписей нет, только введённые значения. Приходится вспоминать, где имя, а где название компании. На форме из двух полей это мелочь, на форме из шести — причина закрыть вкладку.

Отдельная проблема — доступность. Плейсхолдер по умолчанию малоконтрастный, и людям со слабым зрением он читается плохо. Nielsen Norman Group разбирала это ещё в 2014 году в материале с недвусмысленным заголовком о вреде плейсхолдеров в полях форм — с тех пор рекомендация не изменилась: подпись поля обязательна, плейсхолдер — дополнение к ней.

Когда плейсхолдер полезен

Он хорош там, где нужно показать формат, а не назвать поле.

• Телефон: подпись «Телефон», плейсхолдер «+7 900 000-00-00» — видно, нужен ли код страны.
• Дата: подпись «Дата выезда», плейсхолдер «31.12.2026» — снимает вопрос о порядке цифр.
• Артикул, ИНН, номер заказа: пример строки экономит человеку попытку.
• Поиск: «Поиск по каталогу» — здесь поле одно и назначение очевидно, отдельная подпись избыточна.

И наоборот — плейсхолдер не должен содержать обязательную информацию: условия, ограничения по длине, требования к паролю. Всё, что человек обязан прочитать, обязано остаться на экране после начала ввода.

Как это связано с заявками

Форма — последний шаг воронки, и потери на ней стоят дороже всего: сюда человек дошёл уже оплаченным трафиком. Типичный набор проблем, который стоит проверить в своей форме:

1. Подписи заменены плейсхолдерами и исчезают при вводе.
2. Полей больше, чем нужно для первого контакта: отчество, должность, «откуда о нас узнали».
3. Ошибка показывается только после отправки, и введённое сбрасывается.
4. На телефоне поле уезжает под клавиатуру, и не видно, что набираешь.
5. Согласие на обработку данных не отмечено, а кнопка молча не работает.

Проверять это стоит на реальных данных: сколько человек начали заполнять форму и сколько отправили. Как настраивается такое измерение — через Google Tag Manager и цели в аналитике; общая картина — в статье про UX и UI.

Коротко

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

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