Load Contact Form 7 Only For Pages with Form

Share this on:Copied!

Is Contact Form 7 (CF7) or Google Recaptcha implemented through CF7 hurting your website’s performance? Yeah, mine too! The Recaptcha script hosted on gstatic.com blocks the main-thread more than any other script on my page and more than doubles the blocking time. If left like this, this is really going to hurt the performance of all pages on my website.

Contact Form 7 published documentation for disabling their assets in 2009, however, it does not include preventing Google Recaptcha from loading on every single page.

And yes, I am fully aware that for version 3 of Google Recaptcha to work its best, it needs to be on every single page because the score is based on the user’s interaction with your site. However, I’m willing to risk that for performance, at least for today, until the development team behind Google Recaptcha optimizes their assets.

Isn’t it fun when one part of Google (the team behind the search engine ranking algorithm) creates standards and then the other parts of Google (the teams behind Tag Manager, Analytics, Recaptcha, etc.) don’t meet those standards? /sarcasm

How to Optionally Disable Contact Form 7 & Google Recaptcha for Pages Without Forms

First, you’ll want to add these two lines to your website’s wp-config.php file that is found in the root folder.

/** Contact Form 7: disable asset loading on frontend */
define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

The rest of the code snippets go in your active WordPress theme’s functions.php file.

This first snippet is just a simple function that checks the content of your single post, page, or custom post type for the

Error: Contact form not found.

shortcode and returns a boolean true or false if detected or not. You can also pass it a post ID to check when outside the loop. Otherwise, it relies on the global $post object.

/**
 * Check if Contact Form 7 Shortcode Exists
 * 
 * Only checks content for the `[contact-form-7]` shortcode in 
 * singular post types. Defaults to false for other templates.
 * 
 * @param int|null $post_id Optional. Post ID to check, otherwise 
 * it grabs it from the global `$post` object.
 * @return bool True if shortcode was found. False otherwise.
 */
function fc_cf7_shortcode_exists($post_id = null)
{
    if (!is_null($post_id) || (is_singular() && class_exists('WPCF7'))) {
        if (is_null($post_id)) {
            global $post;
            $post_id = $post->ID;
        }
        return strpos(get_post_field('post_content', $post_id), '[contact-form-7 ') !== false;
    }
    return false;
}

This second snippet utilizes the above function to optionally disable Google Recaptcha if implemented through Contact Form 7’s integration settings. This function is called in wp_enqueue_scripts with a high priority because Contact Form 7 adds the action right away in their plugin (found in /wp-content/plugins/contact-form-7/modules/recaptcha/recaptcha.php:17).

/**
 * Disable Contact Form 7's Google Recaptcha when form is not on page
 */
add_action('wp_enqueue_scripts', function () {
    if (!tw_cf7_shortcode_exists()) {
        remove_action('wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 20, 0);
    }
}, 1, 0);

This third and final snippet also uses our first function to optionally enable Contact Form 7’s stylesheets (CSS) and JavaScript (JS). It’s hooking into the same action as our previous snippet, but now with a later priority since Contact Form 7 registers their scripts at the default 10 (found in /wp-content/plugins/contact-form-7/includes/controller.php).

/**
 * Enable Contact Form 7's assets when form is on page
 */
add_action('wp_enqueue_scripts', function () {
    if (tw_cf7_shortcode_exists()) {
        if (function_exists('wpcf7_enqueue_scripts')) {
            wpcf7_enqueue_scripts();
        }
        if (function_exists('wpcf7_enqueue_styles')) {
            wpcf7_enqueue_styles();
        }
    }
}, 20, 0);

Putting All the Snippets Together

wp-config.php

/** Contact Form 7: disable asset loading on frontend */
define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

Active WordPress Theme’s functions.php

/**
 * Check if Contact Form 7 Shortcode Exists
 * 
 * Only checks content for the `[contact-form-7]` shortcode in 
 * singular post types. Defaults to false for other templates.
 * 
 * @param int|null $post_id Optional. Post ID to check, otherwise 
 * it grabs it from the global `$post` object.
 * @return bool True if shortcode was found. False otherwise.
 */
function tw_cf7_shortcode_exists($post_id = null)
{
    if (!is_null($post_id) || (is_singular() && class_exists('WPCF7'))) {
        if (is_null($post_id)) {
            global $post;
            $post_id = $post->ID;
        }
        return strpos(get_post_field('post_content', $post_id), '[contact-form-7 ') !== false;
    }
    return false;
}

/**
 * Disable Contact Form 7's Recaptcha when form is not on page
 */
add_action('wp_enqueue_scripts', function () {
    if (!tw_cf7_shortcode_exists()) {
        remove_action('wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 20, 0);
    }
}, 1, 0);

/**
 * Enable Contact Form 7's assets when form is on page
 */
add_action('wp_enqueue_scripts', function () {
    if (tw_cf7_shortcode_exists()) {
        if (function_exists('wpcf7_enqueue_scripts')) {
            wpcf7_enqueue_scripts();
        }
        if (function_exists('wpcf7_enqueue_styles')) {
            wpcf7_enqueue_styles();
        }
    }
}, 20, 0);