Loading WPForms Styling on Specific Pages

Would you like to control when WPForms CSS loads on your site? By default, WPForms applies the selected Include Form Styling option globally. However, you can use a simple PHP filter to conditionally load or disable form styling on specific pages.

In this tutorial, we’ll show you how to use the wpforms_setting filter to load WPForms Base and Form Theme Styling only on certain pages.

Creating the Form

First, create a form and publish it on one of your pages.
If you need help creating a form, please see our guide on creating your first form.

Once you’ve added your form to the desired page, make sure the Include Form Styling option is set to Base and form theme styling under WPForms » Settings » General.

Conditionally Loading Form Styling

By default, WPForms loads its CSS on all pages where a form is displayed.

If you prefer to load it only on specific pages, you can use the following code snippet.

add_filter( 'wpforms_setting', function( $value, $key, $default, $option ) {
    if ( $key === 'disable-css' ) {
        // Example: only load WPForms CSS on page ID 123.
        if ( is_page( 123 ) ) {
            return '1';
        } else {
            return '3';
        }
    }
    return $value;
}, 10, 4 );

How It Works

• The snippet uses the wpforms_setting filter to check whether the current page matches the given ID.
• If the condition is true, it sets the CSS option to '1', which loads the WPForms CSS.
• On all other pages, it returns '3', which disables WPForms CSS entirely.

You can replace 123 with the ID of any page where you want WPForms styling to load.

And that’s it! Now you know how to control when WPForms styling loads by using a simple filter.

Next, would you like to learn how to customize the submit button styling or add your own custom CSS for WPForms? These tutorials will help you take form styling even further.