Checkbox labels not clickable on cred form

This thread is resolved. Here is a description of the problem and solution.

Problem:
Checkbox labels not clickable on cred form
Solution:
The issue is that the checkbox field should be wrapped with the div having class name form-group.

You can find proposed solution, in this case with the following reply:
=> https://toolset.com/forums/topic/checkbox-labels-not-clickable-on-cred-form/#post-2245899

Relevant Documentation:

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 8 replies, has 2 voices.

Last updated by jamesR-13 3 years, 10 months ago.

Assisted by: Minesh.

Author

Posts

December 14, 2021 at 10:36 pm #2244681

jamesR-13

I have a form where the labels are not clickable for checkboxes. I have verified the names match. The label on a radio button on the same form are working as expected. Please advise.

December 15, 2021 at 8:45 am #2244965

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where you added the form?

December 15, 2021 at 3:23 pm #2245303

jamesR-13

hidden link

December 16, 2021 at 9:28 am #2245899

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I checked on install and I found that the checkbox field should be reside within the div having class form-group.

So, for instance, you will have to wrap your checkbox field with the div with class name "form-group5" as given under:

<div class="form-group">
	<div class="col-md-5">[cred_field field="residential-standing-guard" force_type="field" class="form-check-input" output="bootstrap"]</div>
	<div class="col-md-7">       </div>
</div>

Once you made that change and save your form and then you should check on the frontend that if should work and checkbox will be checked when you click on the checkbox label.

December 16, 2021 at 3:29 pm #2246225

jamesR-13

OK, that did get the labels working, but unfortunately it seems to have broken my javascript that was rewriting the label text.

The form name is "Select Services" and the script is in the JS editor. It is supposed to rewrite each of the "I agree to the terms - XXXXXX" labels to be just "I agree to the terms"

December 16, 2021 at 3:31 pm #2246233

jamesR-13

It also seems to have made the WYSIWYG fields editable again, overriding the readonly="true" attribute.

December 16, 2021 at 3:34 pm #2246237

jamesR-13

OK, so after more testing the javascript label rewrite is working again, but the WYSIWYG fields are still editable.

I can hide the text/visual tabs with CSS, but that can be edited by the user and then they can change the text of the agreement term fields.

December 16, 2021 at 4:14 pm #2246255

jamesR-13

OK, nevermind. Not sure why but everything seems to be working as expected again now....

December 16, 2021 at 4:14 pm #2246257

jamesR-13

My issue is resolved now. Thank you!