Styling checkboxes on CRED form

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

Problem: I would like to wrap the text in my CRED form checkbox input label with a span tag so I can apply some custom CSS.

Solution: There is no public API to modify the markup of a checkbox label in a CRED form, so you would have to use some JavaScript to do this on the front-end:

jQuery(window).bind("load", function() {
  jQuery('.wpt-form-checkbox-label').contents().last().wrap( "<span></span>" );
});

Relevant Documentation:
https://api.jquery.com/contents/
https://api.jquery.com/last/
https://api.jquery.com/wrap/

This support ticket is created 6 years, 8 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
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by peterJ-3 6 years, 8 months ago.

Assisted by: Christian Cox.

Author

Posts

March 10, 2018 at 10:17 pm #624017

peterJ-3

Tell us what you are trying to do?
I wan to add custom styling to the checkboxes in my CRED form, preferably using something similar to this method, although not identical:

Is there any documentation that you are following?
hidden link

However this requires a span element to be rendered around the taxonomy title within the label. The HTML output is currently this?

<label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_2018_1-checkbox-1-1520717029">
  <input type="checkbox" id="cred_form_2018_1-checkbox-1-1520717029" name="quiz-gender[]" data-wpt-type="checkbox" data-wpt-id="cred_form_2018_1_cred_form_2018_1-checkbox-1-1520717029" data-wpt-name="quiz-gender[]" value="603" data-parent="-1" data-value="Female" class="wpt-form-checkbox form-checkbox checkbox">
  Female
</label>

What I really need to acheive is this?

<label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_2018_1-checkbox-1-1520717029">
  <input type="checkbox" id="cred_form_2018_1-checkbox-1-1520717029" name="quiz-gender[]" data-wpt-type="checkbox" data-wpt-id="cred_form_2018_1_cred_form_2018_1-checkbox-1-1520717029" data-wpt-name="quiz-gender[]" value="603" data-parent="-1" data-value="Female" class="wpt-form-checkbox form-checkbox checkbox">
  <span>Female<span>
</label>

Please can you assist?

March 11, 2018 at 6:54 pm #624079

Christian Cox

There's not a built-in API to modify the contents of a filter's markup, but you could use jQuery to wrap all checkbox labels in a span tag. Add this code to your CRED form's JS panel:

jQuery(window).bind("load", function() {
  jQuery('.wpt-form-checkbox-label').contents().last().wrap( "<span></span>" );
});

March 12, 2018 at 7:08 pm #624371

peterJ-3

Wonderful. Thank you so much.