Optimizing Contact Form 7 for Better Performance

Contact Form 7 is one of the most popular plugins for building forms in WordPress. It supports form customization, works with Ajax, and integrates with CAPTCHA.

However, most websites use it on a single page, typically the contact page. Despite that, the plugin loads its CSS and JavaScript on every page, which slows down performance unnecessarily.

Let’s see how to optimize Contact Form 7 and load the plugin only on specific pages to improve site speed.

In this tutorial, we demonstrate how to prevent Contact Form 7 from loading its assets globally and instead control exactly where and when they appear.

Disabling File Loading from All Pages

Contact Form 7 provides two ways to disable its assets globally. The first is by adding constants to your wp-config.php file:

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

This method disables the files on all pages, but does not allow you to control on which pages the plugin loads its assets.

A more flexible approach is to disable loading via filters in your theme’s functions.php file:

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

Both methods achieve the same result: CSS and JavaScript files are no longer loaded on any page. The filter approach is generally preferred because it keeps your wp-config.php clean and allows other plugins or child themes to override the behavior if needed.

Loading Files Only on Desired Pages

Now that we have disabled global loading, we need to re-enable the assets on pages that actually contain a form. There are two approaches depending on your setup.

Using a Page Template

If your contact page uses a dedicated page template (e.g., contact.php), you can call the enqueue functions directly in that template. These lines must appear before the call to wp_head:

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

    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

Using a Conditional Function (Recommended)

If the contact page does not use its own page template, or if you want a cleaner approach, use a conditional function hooked to wp_enqueue_scripts.

First, find the page ID. Go to WordPress Dashboard > Pages and hover over the page containing the form. At the bottom of the browser, you will see a URL containing post=xxxx. That number is the page ID.

Then add this to your theme’s functions.php:

<?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_enqueue_scripts', 'load_cf7_on_contact_page' );
?>

Replace xxx with the page ID you found earlier. You can also pass multiple IDs as an array: is_page( array( 10, 25, 98 ) ).

Automatic Detection Using Shortcode

If you use Contact Form 7 on multiple pages and don’t want to maintain a list of page IDs, you can detect the shortcode automatically:

function load_cf7_only_when_needed() {
    global $post;

    if ( is_singular() && has_shortcode( $post->post_content, 'contact-form-7' ) ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }

        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}
add_action( 'wp_enqueue_scripts', 'load_cf7_only_when_needed' );

This approach checks whether the current page contains a [[contact-form-7]] shortcode and only loads the assets when it does. It works across all pages and posts without hardcoding any IDs.

Don’t Forget About reCAPTCHA and Turnstile

If you use reCAPTCHA or Cloudflare Turnstile with Contact Form 7, keep in mind that these services also load their own JavaScript on every page by default.

Disabling CF7’s assets does not automatically disable the CAPTCHA scripts. You may still see external requests to google.com/recaptcha or challenges.cloudflare.com on pages without forms.

To address this, you can dequeue the reCAPTCHA script on pages that don’t need it:

function remove_recaptcha_from_non_form_pages() {
    if ( ! is_page( xxx ) ) {
        wp_dequeue_script( 'google-recaptcha' );
        wp_dequeue_script( 'wpcf7-recaptcha' );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_recaptcha_from_non_form_pages', 100 );

Replace xxx with the page ID(s) where your form lives. The priority of 100 ensures this runs after CF7 has enqueued its scripts.

FAQs

Common questions about optimizing Contact Form 7:

Summary

By preventing Contact Form 7 from loading on every page, you reduce unnecessary CSS and JavaScript requests, improving page speed and performance scores.

For sites with a single contact page, the conditional is_page() approach works well. For sites with forms on multiple pages, the shortcode detection method is more maintainable. Either way, remember to also handle reCAPTCHA or Turnstile scripts separately.

If you are looking for more ways to speed up your WordPress site, check out our full optimization guide.

If you have any questions or want to suggest a more efficient method, feel free to leave a comment below.