Conditional Loading for Contact Form 7 Assets

Contact Form 7 is one of the most popular form plugins for WordPress, offering flexibility and ease of use. However, it loads its assets (JavaScript and CSS files) on every page, which can impact your website’s performance, especially when reCAPTCHA is enabled. In this blog post, I will show you how to optimize your website by conditionally loading Contact Form 7’s assets, including reCAPTCHA, only when a form is present on a page.

The Challenge with Global Asset Loading

While Contact Form 7’s ease of setup is a huge plus, its approach to loading assets on all pages can lead to unnecessary HTTP requests and increased page load times. This can adversely affect your site’s performance and SEO.

The Solution: Conditional Asset Loading

To tackle this issue, we can use a custom function that checks if a Contact Form 7 shortcode is present on the page. If the shortcode exists, the function loads the necessary assets. Otherwise, it prevents them from loading, thereby optimizing resource usage.

Here’s how you can implement this:

1. Create a Function to Check for Contact Form 7 Shortcode:

function 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;
}

1. This function checks the content of the current post or page for the Contact Form 7 shortcode.
2. Disable reCAPTCHA When Form is Not on Page:

add_action( 'wp_enqueue_scripts', function () {
    if ( ! cf7_shortcode_exists() ) {
        remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 20, 0 );
    }
}, 1, 0 );

1. This snippet removes reCAPTCHA scripts when the Contact Form 7 shortcode is not found.
2. Enable Contact Form 7 Assets When Form is On Page:

add_action( 'wp_enqueue_scripts', function () {
    if ( cf7_shortcode_exists() ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}, 20, 0);

1. This code enqueues Contact Form 7’s scripts and styles only if the form is present on the page.

Benefits of Conditional Asset Loading

• Improved Performance: Reduces unnecessary HTTP requests and decreases page load times.
• Enhanced User Experience: Faster loading times lead to a better user experience.
• SEO Advantages: Page speed is a ranking factor for search engines like Google.

Optimizing your WordPress site’s performance is crucial, and conditional loading of assets is an effective way to achieve this. By using the above approach for Contact Form 7, you ensure that its assets are loaded only when needed, which can contribute significantly to the overall speed and efficiency of your website.

Remember to test these changes in a staging environment before applying them to your live site to ensure everything works as expected.