Toolset forms look good out-of-the-box, regardless of the theme you are using. You can adjust them to suit your site’s original style and make them consistent with the rest of the design.
You can style forms by adding CSS to them.
There are two ways to do this:
- Add styling rules for existing form elements
- Edit the form in Expert mode and add custom CSS to both form elements and the entire form
When editing any Toolset form, click the CSS Editor link below the editor. A text box slides open and you can put any custom CSS into it.
Alternatively, you can add your custom CSS using the WordPress Customizer or directly to your (child) theme’s stylesheet.
Watch a quick video that explains how to add custom CSS for existing form elements.
To add custom CSS rules for form elements, you don’t need to switch to the Expert mode.
First, you have to find out the names of the form elements you want to adjust:
- Visit the page that holds your form on the front-end.
- Open your browser’s Developer Console. In most browsers, the easiest way is to click the F12 key on the keyboard.
- In the Developer Console, click to use the “inspector” tool. Use it to hover over the page elements and select the one you want to inspect.
- Once you select the form element you can see it’s HTML tag highlighted in the Developer Console. Note down the name of the element and any CSS classes, if necessary.
Once you know the name of the element, add custom CSS for it.
Adding custom classes to form elements allows you to create custom CSS rules and target those exact elements.
Watch a quick video that explains how to add custom CSS classes to form elements:
To add custom classes to form elements, use the Expert mode toggle to switch to the markup editor.
In this mode, you can see and edit the markup of all elements that are already part of the form. Of course, you can also add any custom HTML markup.
For example, you can:
Important: the changes you make in the HTML editor will be lost if you switch back to the Visual editor.
If you want to disable the default styling to be loaded by Forms, you can set this in the settings. 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.
- Enabling Additional WooCommerce Fields in Product Forms
- Selecting Parent Posts when Using Forms to Create Child Items
- Displaying Form Data
- Allow users to manage their items
- Charge users for submitting content
- Extending Form Functionality with Hooks
- Setting up Automatic Post Expiration
- Controlling Access to Front-End Forms
- Adding Generic Fields to Forms
- Send Notifications when Someone Submits the Form
- Deleting Content from The Front-End
- Front-end Forms for Editing Content
- Front-end Forms for Adding Content
- Using the Native Media Manager in Front-End Forms
- Protecting Forms from Spam
- Front-end Forms For Repeatable Field Groups
- Selecting allowed tags in front-end forms
- Letting Forms Edit Post and User Fields Created by Other Plugins
- Conditional Display for Form Inputs