How to fix label on Webflow

Add a visible or programmatic label to every form input so assistive technologies can identify it for users.

Steps for Webflow

  1. Open your project in the Webflow Designer and select the Form Block or standalone input element.
  2. Click on the specific Input element. In the right panel under 'Label', ensure a Label element is present and connected to the input via its 'For' attribute matching the input's ID.
  3. To add a visually hidden label: add a `<label>` element in the form, set its text, then apply a custom 'visually-hidden' combo class with the CSS: `position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;`.
  4. For inputs where you only want `aria-label` (no visible label), select the input, go to Element Settings (gear icon) → Custom Attributes, and add `aria-label` with the descriptive value.
  5. Publish and test with axe DevTools.
Official Webflow documentation ↗

What is label?

Every form field on your site — search boxes, email sign-up fields, checkout inputs, contact forms — must have a label that describes what the field is for. A "label" in web terms is either a visible `<label>` element paired with the input, or a special accessibility attribute (like `aria-label`) that provides the same description invisibly. When a form field has no label at all, the browser and assistive technology have nothing to announce to the user about what that field is asking for. WCAG Success Criterion 4.1.2 requires all form controls to have a name that assistive technology can read out loud.

Screen-reader users — including customers with visual impairments — will hear something like "edit text, blank" when they reach an unlabelled field, with no clue what to type. This makes checkout, sign-up, and contact forms completely unusable for those customers, directly costing you sales and leads. From a legal standpoint, unlabelled form fields are one of the most frequently cited accessibility violations in ADA and WCAG-based lawsuits and demand letters targeting e-commerce stores. Google also uses accessible markup signals as a quality indicator, so fixing labelling issues supports your site's overall technical health. Fixing this is typically a quick code change that immediately improves usability for everyone, including mobile users who rely on tap-targets and auto-fill.

See the complete Label guide for every platform and the full background.

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find label and every other issue across your whole site.

Scan my site free

Fix label on another platform