Styling Front-End Forms en WordPress

Design guidelines for front-end forms

Your theme can affect the design of your form elements. For example, if in the Customizer you have a style set for the appearance of a button, then your form will use that style. 

To change the appearance of your form, you must use CSS. 

Follow these design tips to make your forms look professional.

Style your form consistently

Keep your design consistent across your site. This means making sure that your form’s buttons, shapes, colors, fields, styling, padding, and margins align with the rest of your site design. 

This color palette is blue and white, with orange as the accent color

This form’s color palette is white, blue and uses orange as an accent on the button

Color coordinating your form

Your settings in the Customizer for your theme should automatically style your form color to match your website’s color palette. 

If you add custom designs to your form, keep it simple by adding nice touches such as only incorporating your palette colors or only using your accent color for any icons, borders, or fields. Don’t overdo this option because your design could quickly become messy. 

Improving text visibility

Use a background overlay if your form has an image set for the background. This is important because your text might not be visible enough, which does not look professional or trustworthy to clients. 

A form whose text is hard to read, and the picture takes over

A form whose text is hard to read, and the picture takes over

To create your background overlay, follow the process below:

1. In block navigation, select the Container block.
2. On the right sidebar, expand the Background panel.
3. Next to Overlay Color, click on the circle to begin adjusting the color you want.

Toolset makes it very easy to make simple adjustments like this, so you don’t need to know how to code.

Controlling the width of your form

If the width of your form does not fit the way you want it to on your screen, use a Container block to control it. Select the Container block from block navigation and expand the Inner Content panel on the right sidebar. 

In the example below, setting the Max-Width of the Container to 800 px prevents the form from being too wide.

The form in this example very wide

The form in this example is compact

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 its 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:

1. change the labels for the inputs
2. add custom CSS classes to the elements
3. customize the HTML structure of the form
4. insert generic fields
5. display certain sections conditionally

Please note that 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.