Skip Navigation

Styling Front-End Forms in WordPress

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.

How to style front-end forms

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

Where to add your custom CSS

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.

Opening the CSS editor when editing a Toolset form

Alternatively, you can add your custom CSS using the WordPress Customizer or directly to your (child) theme’s stylesheet.

Add custom CSS for form elements

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:

  1. Visit the page that holds your form on the front-end.
  2. Open your browser’s Developer Console. In most browsers, the easiest way is to click the F12 key on the keyboard.
  3. 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.
  4. 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.

Add custom CSS classes to form elements

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.

Do not load Forms stylesheet on the front-end

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.

November 18, 2020