Fixing "Incorrect use of <label for=FORM_ELEMENT>"

twerg
Excursionist
13 1 1

The complete error in Google inspect: "The label's for attribute refers to a form field by its name, not its id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, refer to form fields by their id attribute"

This is a common error on my Shopify website and as a newbie to code I have no ideal how to fix it. I've included a couple of screenshots for reference. Can someone help me out with this in layman's terms? Much appreciated! 

 

Screen Shot 2024-05-16 at 7.29.19 PM.png

Screen Shot 2024-05-16 at 7.29.31 PM.png

 

 

Replies 3 (3)

PageFly-Theodor
Shopify Partner
671 83 97

Hi @twerg ,
This is Theodore from PageFly - Shopify Page Builder App.

The Problem: Label isn't linked to the correct box in your form. This can mess with autofill and accessibility.

The Fix:

  1. Login to Shopify Admin.
  2. Go to Themes and edit the code of your theme (be careful!).
  3. Find the form section with the label error (contact-form.liquid).
  4. Locate the label code (e.g., <label for="customer_name_input">Name</label>)
  5. Find the form field it refers to (e.g., <input type="text" id="customer_name_input" name="customer_name">).
  6. Make sure the label's "for" attribute matches the form field's ID (e.g., both should be "customer_name_input").
  7. Save the code and test your form.


Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

twerg
Excursionist
13 1 1

Hi Theodor- Thank you for your reply. I've tried locating the label code you suggested under the "Contact.form.liquid" page but I can't seem to locate that "customer_name" code. In fact, I can't even locate the "contact [email]" code that's showing up in the error? I tried sending you a copy of the code from that page to inspect but the I get an error when I create a DM that says something about "incorrect HTML, please correct the highlighted areas". Unfortunately there are no "highlighted areas" to correct? Thoughts on next steps?

twerg
Excursionist
13 1 1

Hi Theodor- Thank you for your reply. I've tried locating the label code you suggested under the "Contact.form.liquid" page but I can't seem to locate that "customer_name" code. In fact, I can't even locate the "contact [email]" code that's showing up in the error? I tried sending you a copy of the code from that page to inspect but the I get an error when I create a DM that says something about "incorrect HTML, please correct the highlighted areas". Unfortunately there are no "highlighted areas" to correct? Thoughts on next steps?