Add CSS to Toolset Forms

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

Problem:
How can we style Toolset Forms with Custom CSS?

Solution:
CSS can be added to every single Form, like JS can be added too.
For this, you need to edit the form, scroll below the Forms DnD editor, and find the CSS Editor section.

Open it and insert your CSS there.
Or, you can as well put it in Toolset > Layouts CSS and JS if you use Layouts, or even to your theme's CSS file.

To find the classes and ID's to address your best use the Browser Console and look after the HTML you want to alter.
Then use those classes or ID's to add your CSS.

Note, there is also a DOC that helps to find the right classes and ID's, linked below.

Relevant Documentation:
https://toolset.com/documentation/user-guides/styling-cred-forms/

This support ticket is created 5 years, 5 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	-	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00
-	-	-	-	-	-	-

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: Toolset Forms

This topic contains 4 replies, has 2 voices.

Last updated by indianplayschools 5 years, 5 months ago.

Assisted by: Beda.

Author

Posts

July 5, 2019 at 6:20 am #1284529

indianplayschools

I am trying to edit the user form that I created using CRED for registration on the website.
hidden link
Please let me know how to add css to change the size of the labels and center the label Submit.
Any documentation related to this would be helpful.

July 5, 2019 at 11:50 am #1284879

Beda

CSS can be added to every single Form, like JS can be added too.
For this, you need to edit the form, scroll below the Forms DnD editor, and find the CSS Editor section.

Open it and insert your CSS there.
Or, you can as well put it in Toolset > Layouts CSS and JS if you use Layouts, or even to your theme's CSS file.

To find the classes and ID's to address your best use the Browser Console and look after the HTML you want to alter.
Then use those classes or ID's to add your CSS.

Note, there is also a DOC that helps to find the right classes and ID's:
https://toolset.com/documentation/user-guides/styling-cred-forms/
https://toolset.com/documentation/user-guides/styling-cred-forms/#submit

Please let me know if this helps adding your Custom CSS

July 5, 2019 at 11:50 am #1284881

indianplayschools

I observed just now, that the above page which has a form is visible only when I am logged in. This form disappears when I am logged out. Did I set any parameters without my knowledge?
Also, how can remove nickname column?

July 5, 2019 at 11:54 am #1284891

Beda

Please open one ticket for each issue (see https://toolset.com/toolset-support-policy/)

1. The Toolset Forms show for all users (even guests) if not controlled by Toolset Access, see:
https://toolset.com/documentation/user-guides/access-control-for-cred-forms/
2. If this is a User form that Edits Users then you cannot see it as a Guest, as you are no registered user (when guest) and should not edit users as a Guest, however, you can further control this as well with Toolset Access
3. You can edit the Form with the DnD Editor which has limited capability over required fields - if you cannot remove a Field in the DnD editor of the Form by pressing its "Trash" button, you can always switch to Expert Mode and delete the HTML of it, if you are sure you do not need that field.

Thanks!

July 5, 2019 at 12:09 pm #1284903

indianplayschools

My issue is resolved now. Thank you!