How to Choose an “Include Form Styling” Setting

Would you like to add custom styles to your forms, or apply more theme styles to them? WPForms will, by default, include extensive styling to ensure your forms look great with any WordPress theme. However, this can make it harder to apply your own custom CSS or to allow theme styles to display.

In this tutorial, we’ll cover how to choose the level of theme styling included in your forms using the Include Form Styling setting in WPForms.


Adjusting the “Include Form Styling” Setting

To change the amount of CSS that WPForms includes, go to WPForms ยป Settings in your WordPress admin menu. Under the General section, you’ll find the Include Form Styling dropdown.

By default, this dropdown will be set to Base and form theme styling.

Accessing the form styling setting

Note: The result of each available styling option can vary significantly from theme to theme. For best results, we recommend keeping the default Base and form theme styling option in place.

If you decide to try any other styling option, be sure to click the Save Settings button to store your changes.

Saving your form styling setting

Enabling Base and Form Theme Styling

When using Base and form theme styling, two layers of CSS will be included: base styles and form theme styles.

The form theme includes the most aggressive styles and will generally override styles that your WordPress theme might try to apply. This is the best way to ensure your forms look great no matter which theme you choose to use.

For examples of this styling setting, let’s check out how a simple form appears on two common themes: Twenty Twenty and Astra.

Twenty Twenty

A form with base and form theme styling enabled with the Twenty Twenty theme

Astra

A form with base and form theme styling enabled with the Astra theme

As you can see in these images, the forms in both themes have a lot of the same styles. For example, they have the same submit button color, white backgrounds in the input fields, and the same font sizes. Each of these styles, and many more, are coming from the form theme styling.

However, these forms still have some different styles. For example, Twenty Twenty is making the submit button text bold and each form is inheriting the font used by the WordPress theme.

Enabling Base Styling Only

The Base styling only option will not include form theme styles. Instead, it will only include the base styles for WPForms.

In most cases, the most notable difference with this setting is button styles. WPForms base styles do not include any button styles, and so all button styling will come from your site’s theme.

However, many other styles will now be handled by your theme as well. With most themes, you will likely notice fairly significant style differences with this setting.

We’ll use the same themes from above as examples of this setting in the screenshots below. You’ll notice that some new differences now include the font size of the field labels, the font-weight of the sub-labels, the background color of the input fields, and button styles.

Twenty Twenty

A form with base styling only applied with the Twenty Twenty theme

Astra

A form with base styling only applied with the Astra theme

Common Base Styling Issues and How to Fix Them

When using the Base styling only setting, there are a few problems that may arise, depending on your forms’ layouts and other features you’ve enabled. Below, we’ve explained how to fix the most common issues that come up.

Note: Want to add custom styles to your form button, but avoid issues with the Base styling only setting? Check out our submit button styling tutorial so that you can use our Base and form theme styling setting instead.

Multi-Column Layouts

With the Base styling only setting in place, multi-column layouts will generally not function properly. To fix this, you’ll need to either switch back to the Base and form theme styling option or add the following CSS to your site:

.wpforms-field {
    clear: both !important;
}

Note: If you’re unsure how to use custom CSS snippets, please see WPBeginner’s tutorial on how to add custom CSS to your site.

Removing Form Styling (No Styling)

The No styling option will prevent all WPForms styles from loading for your embedded forms. This means that the only styles you’ll see in your forms will come from your WordPress theme.

Note: The No styling option is intended only for developers and will require extensive custom CSS.

Additionally, many form options will no longer function properly with this setting. For example, all form layouts will be removed, and the pages of multi-page forms will all be visible at once.

That’s it! Now you know all you need to determine the best form styling option for your site.

Next, would you like to find out how to customize your form’s submit button? Be sure to check out our submit button styling tutorial for details on customizing button colors, size, and more.