Styling checkboxes on CRED form

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 6 années et 8 mois. 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.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

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)

Marqué : Content-submission forms, Toolset Forms

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par peterJ-3 Il y a 6 années et 8 mois.

Assisté par: Christian Cox.

Auteur

Publications

mars 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?
lien caché

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?

mars 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>" );
});

mars 12, 2018 at 7:08 pm #624371

peterJ-3

Wonderful. Thank you so much.