Speed Up Contact Form 7

Did you know that the Contact Form 7 plugin, created by Takayuki Miyoshi, is used on over 5 million WordPress websites? It’s been the top choice for contact forms on WordPress for years. It’s packed with features and super easy to use. But there’s a big problem when it comes to speed. Contact Form 7 adds its CSS and JavaScript files to every single page of your website, even if there’s no contact form there. And while these files aren’t huge, they still slow down your site. That’s a big deal, especially when everyone’s trying to speed up their websites.

Alright, we’ve identified the issue. Now, let’s talk solutions. Here are two options to remove those files from pages without contact forms:

Option 1: Custom PHP Code

You can write some custom PHP code and add it to your theme’s functions.php file. This code will tell WordPress not to load the Contact Form 7 files on pages where there are no contact forms.

To do this, you add some special code to your theme’s functions.php file. But hold up! If you’re making changes to a theme that might get updated later, it’s best to use a child theme. That way, your changes won’t disappear when the main theme gets updated.

Now, there are two ways to do this:

Option 1 – A. Use exact page info

If you know the ID of the page with the contact form, you can use this code. It tells WordPress not to load the Contact Form 7 files on the page with specified ID.

Copied!if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}
if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

In case you have contact forms in multiple pages which have ids as 65 and 99:

Copied!if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}
if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

In case you want to use the slug of the page instead of id.

Copied!if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}
if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}

Option 1 – B. Scanning a page’s content for the contact form’s shortcode:

This code checks if a page’s content contains the shortcode for Contact Form 7. If it doesn’t find the shortcode, it stops the CSS and JavaScript files from loading on that page.

Copied!function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }
function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }

Option 2: Rufo WordPress Plugin

Alternatively, you can use the Rufo WordPress plugin. This handy tool automatically detects pages without contact forms and removes the unnecessary CSS and JavaScript files. It’s a simpler and more user-friendly solution compared to writing custom code.

Don’t want to mess with code? No problem! You can use the Rufo plugin instead. It does the same thing as the second method above. It automatically removes CSS and JavaScript files from pages without contact forms.

Why did we make a plugin for this instead of just using code? Well, some folks out there might suggest editing the Contact Form 7 plugin directly, but that’s not a good idea in the WordPress world.

Plus, we checked online and found that other solutions also suggest adding code. So, we made this plugin to make things easier for everyone, especially those who aren’t tech-savvy.

And hey, if you’re interested in making your own WordPress plugins using a fancy architecture called MVC, we’ve got another plugin called ATA that can help with that. But that’s a story for another day!