Without plugins！Contact Form 7 How to load js and css only on specified pages.｜WordPress

Learn how to make ContactForm7 js and css load only on specified pages in WordPress without using a plugin.

Normally, when ContactForm7 is installed, js and css are loaded on every page, which slows down the display speed, but this can be prevented by using this method.

Edit functions.php.

If a child theme is available, use the child theme’s functions.php.

※Always make a backup before editing.

If only one page is to be loaded.

function deregister_cf7_files() {
    if ( ! is_page(page ID) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'deregister_cf7_files' );

Easier code.

If you only want to load pages with the page slug ‘contact’, do the following

Enter any slug in the ‘contact’ part of the second line.

add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});

If there is more than one page to be loaded.

function deregister_cf7_files() {
    if ( ! is_page(array('page ID1','page ID2')) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'deregister_cf7_files' );

Conclusion.

I have used the above code for “multiple pages to load” from the beginning, in case there will be more contact pages later on.

The work itself does not take long and can be implemented quickly, so please refer to this if you like.

Thank you for watching until the end.