Optimization of Contact Form 7 for better performance

The plugin Contact Form 7 is an excellent and one of the most popular plugins for creating forms on WordPress websites. It allows for creating various forms, offers customization of the form, works with Ajax, and also allows the use of CAPTCHA. The issue is that usually, users use the form they create on a single page only, which is the contact page.

By default, the Contact Form 7 plugin loads its CSS and Javascript files on every page of your website. Needless to say, it is unnecessary to load these files on pages where this plugin’s forms do not exist since loading these files slows down the loading time of those pages.

Let’s see how we can reduce the number of server calls and explain in this guide how to optimize Contact Form 7 and load the plugin only on specific pages to improve site speed, as both we and Google love that…

Disabling File Loading from All Pages

These files can be disabled altogether by adding these lines to the wp-config.php file:

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

This method does not allow us to control on which pages the plugin is loaded, thus not serving our purpose. Therefore (if you are using version 4.7 of the plugin), you can disable loading these files by adding these lines to the functions.php file:

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

Now we have successfully disabled the loading of CSS and Javascript files, but this action disabled the loading of these files from all pages on the site.

Loading Files Only on Desired Pages

Let’s assume we have a page named “Contact Us” and it is the only page containing a Contact Form 7 form. Let’s also assume that this page uses a page template called contact.php.

To load the files only on this page template, edit the contact.php file and add the following lines (note that these lines must appear before the call to the wp_head function in your template).

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

What if the Contact Page does not use its own page template?

In this case, go to the WordPress dashboard > Pages and hover over the page containing the form with your mouse. After a second, at the bottom of the browser, you will see a line containing the ID of the page – post=xxxx. Remember this number.

Now, add a condition to the previous function to load it only on this page. Change the above code to the following:

<?php
/**
 * Contact Form 7
 *
 * Prevent the javascript and styles from loading on every page
 * Load them only on the Contact page
 */
function load_cf7_on_contact_page() {
    if ( is_page(xxx) ) {

        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
     
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }

    }
}
add_action( 'wp_footer', 'load_cf7_on_contact_page' );

?>

Make sure you change xxx in line 9 to the page ID we discovered earlier.

Summary

Optimization can also be done in other ways, but this is the method I chose to demonstrate. I hope it’s helpful and that you can achieve even more positive points in Google Page Speed.