Skip Navigation

Styling Front-End Forms

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

Use the Expert mode toggle to switch to the markup editor. It allows you to make changes to form’s automatically generated HTML code. For example, you can:

Expert mode

Please keep in mind that the changes you make in the HTML editor will be lost if you switch back to the Visual editor.

If you need to add custom CSS styling or JavaScript to your form, click to expand the sections at the bottom of the Content 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.

Originally written
May 13, 2020
Updated
July 8, 2020