Webflow maintenance

How do I add placeholder text to a Webflow form?

Add Webflow form placeholder text as a hint, keep the visible label, and style the hint without changing typed text.

THE SHORT ANSWER

Select the input or text area inside the form, open its settings, and type the hint in Placeholder. Keep the field label on the page. Placeholder text disappears as someone types, and screen readers do not treat it as the label. Set Text type to email, phone, or password. To color only the hint, style the Placeholder state. Publish, then check an empty field and a filled one.

Keep the label, then add the hint

Placeholder text is the gray hint inside an empty field. It disappears as the visitor types. Webflow says it is not a stand-in for a proper label: screen readers do not treat it as the label, and the hint is gone once typing starts. A form that only says 'Your email' inside the box leaves that box unlabeled the moment someone focuses it.

A new Form block already includes two inputs, each with a label: Name, and Email address. Leave those labels, or rewrite them so they still name the field. You can add another Input or a Text area from the Add panel, Forms section. Drop it inside the Form wrapper. A field outside that wrapper is not part of the form.

Example: the contact form keeps the label Email address. The placeholder says name@company.com. The label stays visible after the visitor types. The hint does not.

Type the hint in the field settings

Select the input on the canvas or in the Navigator. Open its settings by double-clicking it, by clicking the settings icon beside the element label, or by opening the Settings panel.

Placeholder is the setting for the hint. Type a short example or format, not a second copy of the label. 'Jane Lee' is a useful hint under a Name label. The word Name, repeated inside the box, disappears and teaches nothing.

Set Name as well, so the column in Site settings, Forms, is recognizable. The canvas label is what the visitor reads. The field name is what you read in the submission. Required is a separate checkbox. It blocks submit until the field is filled. It does not create the hint.

Give the form itself a name other than the default Email Form when the site has more than one form. That name is how you tell the submissions apart. It is not the placeholder.

Set the text type, and use autofocus rarely

Text type tells the browser what the field accepts. Webflow's examples are email, phone, and password. Phone shows a numeric keypad on mobile. Password hides the characters as they are typed. Leave the type on plain text for a name or a company.

Autofocus puts the cursor in the field when the page loads. Webflow says to use it sparingly. It can scroll the page on load, especially when the field is hidden or below the fold. If the live page jumps to the form, turn Autofocus off and publish again.

The hint, the type, and autofocus are all on the field. They do not change the success message or the error message. Those live on the Form block. The success message guide covers that text.

Style the hint on the Placeholder state

Typed text inherits the typography of the None state. The hint can look different. Webflow puts a Placeholder state in the States menu for form fields. It styles the placeholder text: typography, background, and shadows.

Select the input. In the Style panel, open the States menu in the Selector and choose Placeholder. A green label shows you are editing that state. Change the text color there if the hint should be quieter than real answers. Choose None when you finish, or press Esc.

If the typed email turned gray, the color was applied on None. Reset it on None, then set the quieter color on Placeholder only. The canvas keeps showing the state you have selected, so confirm None before you judge the resting field.

Example: Placeholder uses a muted color, and None keeps the normal body color. An empty email field shows name@company.com in the muted color. After someone types, the address uses the body color.

Publish and try an empty field and a filled one

Publish the site. Open the live form. The empty field should show the hint, and the label should still be beside or above it. Click the field and type. The hint should leave, and the typed text should keep the color you set on None.

Tab to the next field. If you also styled Focused (keyboard), that ring is a separate state from Placeholder. One shows the hint. The other shows which field has the keyboard.

Send one labeled test if you need to confirm the submission. The placeholder text should not appear as the answer. The value you typed should. If the row is missing, treat that as a submit problem: a hidden required field, a missing submit button, or a reCAPTCHA rule with no reCAPTCHA element on this form.

If you would rather send the hint and the label in writing, I can set them from that note. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.

Questions & answers

Can I delete the label and use only the placeholder?

No. Webflow says labels help people who use screen readers, and placeholder text disappears as soon as someone types. Keep the label.

Why did the phone field open a number keypad?

Text type is set to phone. Webflow says that type shows a numeric keypad on mobile. Use a plain text type if the field should accept letters.

The page jumps down as soon as it loads. What should I check?

Autofocus is probably on, including on a field that is hidden or below the fold. Turn Autofocus off unless that field should take the cursor on load.

I changed the placeholder color and the typed text changed too. Why?

The color was set on None, so the typed text inherited it. Choose the Placeholder state in the States menu and style the hint there.

Sources & further reading

Need a hand with your Webflow site?

View membership