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

[twerg]

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! 

 

 

[PageFly-Theodor]

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

[twerg]

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]

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?