Prevent Contact Form 7 from loading on every page

This one is all about performance. If you’re anything like me, you’re probably a little obsessed with site-speed; Not only does a performant site greatly help your chances of a successful SEO strategy, but it also brings a much more satisfying User Experience for your users.

I like to use a popular plugin called Contact Form 7 (CF7) to create and handle the logic for contact forms on a WordPress website. When you install the plugin, the plugin will load all of the necessary javascript and css files it requires to validate and render a form on the page. The problem is, the more files you load, the more requests you’re making to the server, the longer your page will take to load (usually).

Only load Contact Form 7 when absolutely necessary

By default Contact Form 7 loads its files on every page on your website, after all, it doesn’t know where you might want to insert a form. Let’s change it so that Contact Form 7 just doesn’t load at all, until we tell it to.

First, we’ll stop CF7 from loading by adding the following filters to our functions.php file.

// Prevent CF7 from loading on every page.
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Then, what I like to do is create a dedicated page-template or a template-part that will render the contact form. For me, this might look something like this…

<?php /* Template Name: Contact Us */

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
	wpcf7_enqueue_scripts();
}

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

get_header(); ?>
    <div class="contactUs">
	<header class="contactUsHeader">
	    <h1><?php the_title(); ?></h1>
	</header>

	<div class="contactUsForm">
	    <?php echo do_shortcode('[contact-form-shortcode]'); ?>
	    <?php 
            // I'm directly calling the form shortcode here since I know it's not going to change, 
            // but if you need to be able to accept different form shortcodes, 
            // you could use a custom field or the Advanced Custom Fields (ACF) plugin to accept the 
            // form shortcode within the page admin and then echo that out here. 
            ?>
        </div>
    </div>

<?php
get_footer();