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

• Redirect to Thank You Page after Contact Form 7 Submission
• How to Save Contact Form 7 Submissions to WordPress Database
• How to Add Country List in Contact Form 7 Plugin

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