Only Load Contact Form 7 When It Is Needed

Contact Form 7 is one of the most popular contact form plugins on the WordPress market and that is for good reason. It is an incredibly simple plugin to install and setup! However Contact Form 7 has its own issues, especially when it comes to performance. For example, the plugin loads its CSS, JavaScript, and Ajax requests on every page by default. This is a hindrance to your website performance. Additionally, it can cause issues if your server has a really slow response time. These issues can be seen on the waterfall when you test your on a performance software such as GTmetrix. The refill requests in the waterfall will be quite long if the server response time is slow. My philosophy when performing optimization on websites is to only load CSS, JavaScript, plugins, etc when they are needed. For example, only load Buddypress styles and scripts on Buddypress pages. Or in this case only load Contact Form 7 when it is needed.

Why Don't Plugin Developers Do This by Default?

You may be wondering why plugin developers don't build this functionality into their plugins by default. The reason is finding out where their plugin is actually being used is difficult. Everyone has a different implementation of the same plugin and it would be impossible to account for every use. You could only load Contact Form 7 assets in the shortcode, but some themes might have it loaded by a php function, or they might be loading it by Ajax. Therefore detecting all of these use case is difficult. That being said, if you only use Contact Form 7 on your contact page, it is fairly easy to only load those resources on that page. One way of doing this is by checking for the shortcode.

function contactform_dequeue_scripts() {

    $load_scripts = false;

    if( is_singular() ) {
    	$post = get_post();

    	if( has_shortcode($post->post_content, 'contact-form-7') ) {
        	$load_scripts = true;
    	}

    }

    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }

}

add_action( 'wp_enqueue_scripts', 'contactform_dequeue_scripts', 99 );

You can add this code to the following places:

• functions.php file
• child theme
• site-specific plugin.

However, an alternative method would be to just load it on the page that you're using it on with the following code snippet. The above code can be added to the same places as above.

• functions.php file
• child theme
• site-specific plugin

Change the "contact-us" to whatever your contact page URL is. You can also get away with changing the deregister to dequeue, but either way, it will have the same effect.