[Resolved] "For" in label for radio button does not take correct value

[Author]

Posts

[Valeriia]

Hi,

The label for radio buttons does not take correct value (in the "new" way of creating forms, no bootstrap output).

Example:

<div class="form-group">
    <label>Qualified</label>
    [cred_field field='prospect-qualified' post='prospect' value='' urlparam='']		
  </div>

Result:

<ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-prospect-qualified">

<li class="wpt-form-item wpt-form-item-radio radio-qualified">

<input type="radio" id="form-337465542" name="wpcf-prospect-qualified" value="qualified" class="wpt-form-radio form-radio radio radio" data-wpt-type="radio" data-wpt-id="cred_form_3010_1_form-337465542" data-wpt-name="wpcf-prospect-qualified">

<label class="wpt-form-label wpt-form-radio-label" for="2d8f">Qualified</label>

</li>

<li class="wpt-form-item wpt-form-item-radio radio-not-qualified">

<input type="radio" id="form-1052960366" name="wpcf-prospect-qualified" value="not_qualified" class="wpt-form-radio form-radio radio radio" data-wpt-type="radio" data-wpt-id="cred_form_3010_1_form-1052960366" data-wpt-name="wpcf-prospect-qualified">

<label class="wpt-form-label wpt-form-radio-label" for="fb2e">Not qualified</label>

</li>
</ul>

I'm styling radio buttons in a way that the input itself is hidden and I need the label to be responsive to clicks. Without correct "for" attribute it's imposible to achieve.

Please fix that asap.

FYI: Some of the forms on the site are build in an "old" way and they work correctly.

Thank you.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Valeria,

Thank you for contacting our support forum.

Could you try adding the attribute output='bootstrap' to the cred shortcode and let me know if this helps.

Thanks,
Shane

[Valeriia]

It works with bootstrap but I need it to work without, otherwise I can't style the radio buttons the way I need as the layout is completely different.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Valeria,

Is there a way to provide an example of this ?

Thanks,
Shane

[Valeriia]

Hi Shane,

I was mistaken about the bootstrap output, the labels actually have different "for" than input id.

So here is the problem in details:

On the same site I've already built quite a few forms with radio buttons and styled them this way:

input[type=radio]~label {background-color: #eee;padding: 8px 12px;border-radius: 3px;cursor: pointer;text-align: center;}
input[type=radio] {display: none !important;}
input[type=radio]:checked~label {background-color: #27A7A4 !important;color: #fff;}

This gave me a look as I attached in the screenshot.

This was possible due to 1. the layout where the label goes after the input, and 2. the "for" attribute for the label was equal to input id, so clicking on the label made the radio button selected.

In the new layout the "for" attribute has a different value than the input id, so clicking it does nothing and I can not hide the input. This breaks completely the design that was already built on the site.

Can't you just make "for" take the same value? That would solve the problem quickly.
This is how it should work anyway, isn't it?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Valeria,

If I was to suggest the "for" to be added as an attribute it would not be implemented anytime soon and the normal process of requests would apply an would take some time.

You could attribute using Javascript on the frontend or you could try adding a class to the label that will give it the same class the generated input tag if i''m following correctly.

You need to have the Label and input tag having some common class or name correct?

Please let me know.
Thanks,
Shane

[Valeriia]

Well, what I need ideally is that the new forms I add to the site work the same way as the old ones without javascipt tricks.

The old forms have the same "for" and "id" in radio buttons. By what logic did you change it? You competely sabotaged my work. Very disappointing.

Please suggest this to your developers and I hope it won't take much time. There is already "for" attribute for the label (you can see it in the code of my first message), it just takes some random value for some reason. Maybe it's just a mistake.

In the meantime, I would really appreciate some solution from you that would help me to achieve the same look as in the screenshot I attached previously.

Thank you.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Valeria,

I took a more detailed look at this and tested a CRED form and it seems that the For attribute is still there and it is reflecting the same ID as the field.

Could you provide me with a link to the page so I can have a look at this new form you created because it works fine on my end.

Thanks,
Shane

[Valeriia]

Hi Shane,

Thanks for checking it out. The fact that it works for you made me do some tests on my side.

It looks like with

input[type=radio] {display: none !important;}

the form produces wrong "for" attributes for labels. When I remove this styling, the attributes are just right. Not sure how css affects it, but this is what it is. I guess I just have to give them 0 width and height instead of hiding them for the labels to be correct.

Sorry for being hard, but with your answer you made me think that you know about the wrong labels and consider it normal. Plus it was working before the update.

Closing the ticket.

Thanks.

[Jason Lorje]

Hi Valeria

I was having the same problem. What worked for me was to change:

input[type=radio] {display:none !important;}

to

input[type=radio] {visibilty:hidden;}

Hope it works for you too.

Cheers,
Jason