[Resuelto] Styling clicked radio buttons in CRED form

[Autor]

Mensajes

[Edward Barker]

Hi There,

This seems like an old question that's never been fully covered.

I'd like to style the radio buttons and labels in a CRED form in their checked and unchecked states and do it dynamically before updating the form.

I got to the point where I could style a checked radio button/label upon loading a page but when I changed to a new selection the css didn't change.

Any thoughts?

[Mateus Getulio]

Hey there,

Welcome to the Toolset support forum!

I'm afraid that there's not an easy way to modify the output template generated by Forms. You have the ability to modify a few specific attributes using the CRED API, but the HTML markup structure isn't one of those attributes.

You might be able to use JavaScript to restructure the DOM after the Form loads, but I can't predict the effect this would have on the Form's functionality, including validation and submission of data. That type of customization isn't supported here in the forums.

At this point, since it is necessary to configure it with some code customization, I'm afraid it would be beyond the scope of this support forum, but we recommend that you check our contractors page, please take a look: https://toolset.com/contractors/

I hope that this explanation is clear and solves the question in our ticket. Thanks for your understanding.

If you need anything else don't hesitate to contact us.

Best,
Mateus.

[Edward Barker]

What would I use hook onto the labels using Javascript. Is there and examples on stack overflow etc on how to do it? Sorry I don't really want to go down the contractor route when I feel this should be a basic functionality, sorry.

[Mateus Getulio]

Hi there,

Thanks for your reply.

You've mentioned:

I got to the point where I could style a checked radio button/label upon loading a page but when I changed to a new selection the css didn't change

You can try to disable the default styling to be loaded by Forms. You can set this in the settings, just go to the Toolset → Settings page and click the Forms tab. There, select the 'Do not load Forms style sheets on front-end' option in the Styling section and check if the CSS will change now.

If still not solved, could you please show us the form you're talking about? Also, I would like to request temporary access (wp-admin and FTP) to your site to take better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Our Debugging Procedures

I will be checking various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to backup the site before providing us access. In the event that we do need to debug the site further, I will duplicate the site and work in a separate, local development environment to avoid affecting the live site.

Privacy and Security Policy

We have strict policies regarding privacy and access to your information. Please see:
https://toolset.com/privacy-policy-and-gdpr-compliance/#data-shared-with-our-support
**IMPORTANT**

- Please make a backup of site files and database before providing us access.
- If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box. The private box looks like this: enlace oculto

Please, let me know if you need any additional details. Have a nice day.

[Mateus Getulio]

Hi there,

Thank you for providing the website credentials.

Sorry, but we need to clarify what kind of customization you want to do in the radio buttons. When you say:

Changing the 'Do not load Forms style sheets on front-end' option allowed me to access the css of the radio button itself but alter the state of the label enough to allow me change it dynamically as a user changes selection.

I'd like to style the radio buttons and labels in a CRED form in their checked and unchecked states and do it dynamically before updating the form.

If I understood it correctly, you want to change the labels according to the user's choice, is that right? Please give us more information about this matter. And what exactly would you change, for example?

Looking forward to your reply. Thanks!

[Edward Barker]

I would like to implement similar style as shown here if possible ...

enlace oculto

So the labels change and not necessarily just the radio 'dot' itself.

Many thanks in advance

[Mateus Getulio]

Hey there,

Thank you for clarifying it.

I double-checked it and currently we don't have a specific hook for what you're trying to achieve: https://toolset.com/documentation/programmer-reference/

It would be necessary to configure it with some code customization. I'm afraid it would be beyond the scope of this support forum. As stated previously, we recommend that you check our contractors page: https://toolset.com/contractors/.

If you need anything else don't hesitate to contact us.

Best,
Mateus