Contact Form 7 is a free contact form plugin for WordPress. It’s lightweight, easy to add custom CSS styles to and has good documentation.
However, the problem with Contact Form 7 is that by default it loads on all pages, even when you don’t have a contact form on the page.
Although these files are very small, so they won’t significantly slow down your website, it’s still a good idea to remove them along with any other superfluous files from other plugins. If you don’t do this sort of maintenance on your website you can end up with pages loading slowly when they don’t have to.
Fortunately, it’s very easy to only load Contact Form 7 when you need it. Here’s how you do it.
Step one: Stop Contact Form 7 loading on all pages
First, we need to go into functions.php and add this code. The code tells WordPress not to load the CSS and Javascript files that Contact Form 7 requires to run. You can find functions.php by going to Appearance > Editor in the WordPress Admin area.
add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' );
Step two: Load the files on specific pages that have forms
Now we’ve stopped the files from loading none of the contact forms will work so we need to identify the pages that need the plugin files and we’ll load them in. If you just have one form on a contact page this is the code you’ll need to add.
add_action('wp_enqueue_scripts', 'load_wpcf7_scripts');
function load_wpcf7_scripts() {
if ( is_page('contact') ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
If you have multiple contact forms on your site you can load the files on those pages by using an array with the is_page() function.
is_page( array( 'contact', 'about', 'request-a-quote') );
Check everything’s working
There’s not a lot that can go wrong here but it’s always good to check. Open up your pages with contact forms and make sure they’re showing up and functioning.
Having followed along with this tutorial your website is that little bit more streamlined. This method of only loading files and plugins when they’re needed is a great way of keeping you site loading fast and improving your SEO. Every now and then it’s a good idea to look through what you can do without on certain pages so for instance, don’t load a slider plugin on posts for a blog if you don’t use the slider for them.
If your form doesn’t look how you want you can check out my CSS style example for Contact Form 7.
