Streaming live at 10am (PST)

Form Label and For Attribute


#1

I’ve looked around the forum and have seen a few other threads on this, but nothing with an actual resolution to this issue. I have a form with hidden radio buttons that trigger styled labels for a custom radio button effect. In this case, the donation buttons on this page are the ones that are not working, specifically the £50 amount. When I inspect the element I see the label is missing the for attribute and all of the others have it. I’ve tried a ton of stuff, deleting the radio input and rebuilding from scratch, copying and pasting one of the other buttons that is still working. I have gone in and adjusted the IDs, the group name, choice value, data attribute, etc…over and over again and cannot get this to work.

I’m handing this off to a non-profit with no technical staff and having one field with a random embed code to solve this problem seems like it will cause issues and be confusing when they are trying to figure out why one is different than the other.

Any help or follow-up from the Webflow staff would be great, the last post in January that I was able to find on this issue had a post from a staff member saying they would follow up, that was over two months ago at this point so I’m guessing that is not going to happen. Any way to add the “for” attribute to labels?

Can someone address this issue or point me in the right direction?

Thank you,

Sam


Here is my site Read-Only: https://preview.webflow.com/preview/children-of-rwanda?preview=7d73e559468a73ea019c24fc497225e6


#2

Hi @sam-g

For the £50 donation button, it seems you are missing the “for” attribute, so it can’t work.

You can add an attribute using Javascript : https://www.w3schools.com/jsref/met_element_setattribute.asp

Have a look at this stackoverflow thread if set attribute doesnt work : https://stackoverflow.com/questions/710275/how-to-add-update-an-attribute-to-an-html-element-using-javascript

Hope this can help you a bit…

Best


#3

Hi @Blaise_Posmyouck

Blaise, thanks for the response! However, I’m looking for a solution to get the for attribute back on the label by default. I didn’t have to add a js workaround to add it to any of the other labels, and handing this off to a non-technical group makes me hesitant to add .js for one outlier that for some reason will not add the attribute on it’s own.

I think I may use it for the time being because I’m running low on time to get this live. However, it would be great if someone from the Webflow team could respond to this. It looks like an issue that has been going on for quite some time, and although it is minor it is irritating.


#4

Having the same issue. How do add in the “for” attribute to a label? It’s killing my accessibility rating.


#5

I just ended up using @Blaise_Posmyouck suggestion. Here is the code I used:

$('.donate__radio-label[data-value="5000"]').attr('for', '5000');

Obviously your code will need a different selector, I used a class with a data attribute. It works, but I’d much prefere just to have basic HTML in there by default that non-devs can work with.


#6

Thanks for this. The thing is, there’s supposed to be a workaround where you can drag the form label directly above the field you want to associate it with and it will apply the proper “for” attribute. I can’t get this to work though. I have no idea why.


#7

Been having the same issue here…

Been using Webflow for 3+ years and this is one of the biggest obstacles I’ve come across. Webflow help us out!