Remove Contact Form 7 CSS and JS When Not Needed

Contact Form 7 is one of the most popular plugins in WordPress. At the time of writing this article, the plugin has 5+ million active installations.

No doubt this plugin is great in every aspect. But there is one concern you may face while using it. When you activate the plugin, their JavaScript and CSS files are loaded on every page. This shouldn’t be a problem if you have a contact form on each page. But if you don’t then it’s adding extra assets to the pages unnecessarily.

As a good practice, you must load only those JavaScript and CSS files which are required for the current page. Loading unnecessary files increases the page size and slows down its speed.

In this article, I show you how to remove JavaScript and CSS files of the Contact Form 7 plugin when not needed. In other words, we are going to see how to load JavaScript and CSS files of the Contact Form 7 plugin on the required pages only.

How to Remove Contact Form 7 JS and CSS Files

As a site owner, you obviously know on which page you have included a contact form. Normally the site has a contact page where we keep the contact form to receive inquiries.

While writing a code, we’ll first remove the Contact Form 7 JavaScript and CSS files from all pages. After that, using the wp_enqueue_scripts() hook we’ll include assets only on the required page.

There are 2 ways to stop loading assets of the Contact Form 7 plugin. You can pick any of them.

The first option is using the below constants in the wp-config.php file.

define( 'WPCF7_LOAD_JS', false );
define( 'WPCF7_LOAD_CSS', false );

Another way is by adding the below filters to your active themes functions.php file.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Now if you view the source of your pages, you will not see any files loaded from the Contact Form 7 plugin(except reCAPTCHA which we’ll talk about in a moment).

Let’s now include the assets on the required pages. The plugin provides a way to include its assets as follows.

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
  wpcf7_enqueue_scripts();
}
 
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
  wpcf7_enqueue_styles();
}

To use it on a website, get a slug of your page having the contact form. Use this slug in the is_page() method and write the code below to the functions.php file.

function include_cf7_scripts_only_when_necessary() {
    if(is_page('contact-us')) { //pass your contact page slug here
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
      
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts', 'include_cf7_scripts_only_when_necessary', 20, 0 );

That’s it! It is simple and straightforward. Now you can check assets of the Contact Form 7 plugin are included only on the specified page.

Load Google reCAPTCHA Only On Page Having Contact Form

The Contact Form 7 plugin provides a feature to add Google reCAPTCHA v3 for your forms. It helps to protect your forms against bots. When we integrate reCAPTCHA with this plugin, it displays the reCAPTCHA icon at the bottom right of your website.

Sometimes you may want to hide this reCAPTCHA icon on the pages which don’t have a contact form. You can easily achieve it by adding the else condition in the code we wrote already.

function include_cf7_scripts_only_when_necessary() {
    if(is_page('contact-us')) { //pass your contact page slug here
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
      
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    } else { // remove Google recaptcha if page not having contact form
        wp_dequeue_script('wpcf7-recaptcha');
        wp_dequeue_script('google-recaptcha');
    }
}
add_action( 'wp_enqueue_scripts', 'include_cf7_scripts_only_when_necessary', 20, 0 );

Here, we are removing reCAPTCHA files from all other pages using the wp_dequeue_script() hook.

I hope you understand how to remove CSS and JS files of the Contact Form 7 plugin when not needed. Please share your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

9 thoughts on “Remove Contact Form 7 CSS and JS When Not Needed

  1. I am using ContactBuddy form, please guide me how to remove this css line with functions.php

    “/plugins/contactbuddy-by-pluginbuddycom/css/contactbuddy.css”

    I tried “add_filter( ‘contactbuddy_css’, ‘__return_false’ );” – this didn’t work for me.

  2. hi
    thx for your guide i have to 3 question pls guide me
    1-which section of functions.php file i have to put that 2 line codes?
    2-i dont undrestand this: { //pass your contact page slug here . what i have to put there?
    3-i need the contact form for 2 pages for ecample with these names(name i mena pages name): 1-contact-us and 2-employ
    so how can i use those codes in page.php

  3. Hey Sajid,

    I follow the same way u have provided on the blog thanks the method properly works for me for my company pesofts.com.

    1. Please share your code. Probably you are using the wrong slug. Your contact page slug is ‘contact’ which should use with is_page().

Leave a Reply

Your email address will not be published. Required fields are marked *