Placeholder text is a prompt, not an example

Placeholder text appears in empty form fields before anyone types. You've seen it: light gray hints that vanish when you click in. Most sites use it to repeat the label ("Email" in a field labeled "Email") or show a fake example ("john.doe@example.com"). Both are lazy.

Good placeholder text does one thing: it shows the shape or format you expect without making people reverse-engineer your requirements.

What placeholder text actually does

It disappears the moment someone starts typing. That means it can't carry critical information. If the user needs to remember it while typing, it belongs in persistent help text or the label itself.

What it can do is reduce hesitation. People pause before filling fields when they're unsure what format you want. The right placeholder removes that pause.

Show format, not fictional content

Bad: "Enter your email address"

Better: "name@domain.com"

The second one tells you the structure without pretending to be your email. If your field accepts multiple formats, pick the most common one. A phone field might show "555-123-4567" even if you'll accept other patterns. You're showing preference, not limitation.

For date fields, use the actual format: "MM/DD/YYYY" instead of "Your birth date". For SKUs or product codes with a pattern, show that pattern: "ABC-12345" instead of "Product code".

When to skip it entirely

Some fields don't need placeholder text at all. If your label is clear and the format is obvious, an empty field is fine. "First name" doesn't need "Jane" hovering in it. "Message" doesn't need "Type your message here".

Mark your required fields before you worry about placeholder text. Asterisks and clear labels prevent more errors than helpful hints in empty fields.

Don't hide instructions in disappearing text

Character limits, special requirements, or formatting rules belong outside the field. Placeholder text that says "At least 8 characters, one number" is gone the instant someone types the first letter. Put requirements in persistent help text below the field or in the label itself.

The exception: when the format itself is the only instruction. A field that wants a hex color code can show "#FF5733" as placeholder text because that's both the format and the requirement.

Keep it short

Long placeholder text gets cut off in narrow fields or small screens. If you can't show the format in a few characters, you probably need help text instead.

"Enter the 16-digit number on the front of your card" is too much. "1234 5678 9012 3456" is plenty.

Test with realistic field widths

Your placeholder text looks fine in your design file with generous padding and a wide form. Shrink the browser window. Does it still fit? Does it still make sense when half of it is hidden?

Mobile fields are narrow. Placeholder text that works at desktop width might be useless at 320px.

The label still does the work

Placeholder text supports the label. It doesn't replace it. If you're using placeholder text because your label is unclear, fix the label. A field labeled "Code" with placeholder text "Enter your 6-digit verification code" means your label should have been "Verification code" from the start.

Some designers hide labels and rely only on placeholder text. This breaks the moment someone starts typing and forgets what the field was for. Don't do that.

Treat it like interface copy

Placeholder text is navigation and interface copy, not content. It should match your label terminology exactly. If your label says "Phone number" don't put "Mobile" in the placeholder. Consistency removes tiny moments of doubt that slow people down.

Most CMS form builders let you set placeholder text separately from labels and help text. Use that separation deliberately. Label: what the field is. Help text: rules or context that persist. Placeholder: format or shape, nothing more.