Use clear, visible form field labels and help text

Updated

Use form field labels to describe the purpose of form fields and support accessibility of your forms.

Form field labels are used to describe the function or purpose of a form field and are crucial for accessible navigation of your form. Form elements with in-field placeholder text that disappears when site visitors start typing in the field make it difficult for people with (and without) cognitive disabilities to remember what information belongs in the field. A simple solution is to always use form labels and help text that stays visible. 

In Webflow, creating fully accessible forms currently requires a custom solution. You can use the Label element with IDs and custom attributes to ensure that labels are properly grouped and associated with their related form fields. 

To create accessible form labels: 

  1. Select your form field (e.g., Input, Text area, Select, etc.)
  2. Open Element settings (D)
  3. Give your form field an ID
  4. Select your Label and open Element settings > Custom attributes
  5. Click the “plus” icon
  6. Give your Label a custom attribute with the name “for” and value that matches the ID you gave the form field
  7. Click Save 

Important

Make sure your form IDs are unique (i.e., not used on more than one element).

You can also group your related labels and fields together to reuse your form elements. 

To group your label and field together in Webflow:

  1. Open the Add panel (press A on the keyboard)
  2. Drag a Div block into your form element
  3. Drag your related label and field into the Div block (making sure to place the label above the field element)

Now you can copy the Div block (Command + C on Mac or Control + C on Windows) and paste it (Command + V on Mac or Control + V on Windows) in your form. Make sure to give the form field a new ID and update the label’s custom attribute to reuse them. 

A clear label outside the input field not only helps site visitors recall the purpose of the field, but also better meets color contrast settings for visually disabled site visitors (since placeholder text is usually a light color). It also gives screen readers access to a proper label to announce.

‍WCAG Reference: Success Criterion 2.4.6: Headings and Labels

Related articles