Contact Form 7 is a great contact form plugin for WordPress, but it loads its Javascript and CSS on every page on your site, even when you don’t have a contact form there. Let’s fix that by loading the scripts and styles only on the pages that need them.
Add the following code to your theme or plugin to load the scripts and styles only on pages that have a contact form.
<?php
/**
* Contact Form 7
*
* Prevent the javascript and styles from loading on every page
* Load them only on the Contact page
*/
/* Removes the Contact Form 7 scripts and styles from all pages */
remove_action( 'wp_enqueue_scripts', 'wpcf7_enqueue_scripts' ); // Prevents the scripts from loading on all pages
remove_action( 'wp_enqueue_scripts', 'wpcf7_enqueue_styles' ); // Prevents the styles from loading on all pages
/* Adds the Contact Form 7 scripts and styles to the appropriate pages */
add_action( 'wp_enqueue_scripts', 'new_cf7_loader' ); // Loads the scripts and styles on the appropriate page(s)
/* Load the Contact Form 7 scripts and styles on the appropriate pages */
function new_cf7_loader() {
if ( is_page( array( 'contact', 'another page' ) ) ) { // Add all pages here that contain the contact form
wp_enqueue_style( 'contact-form-7', wpcf7_plugin_url( 'styles.css' ), array(), WPCF7_VERSION, 'all' );
wp_enqueue_script( 'cf7.jquery.form.js', wpcf7_plugin_url( 'jquery.form.js' ), array(), WPCF7_VERSION, true );
wp_enqueue_script( 'cf7.scripts.js', wpcf7_plugin_url( 'scripts.js' ), array(), WPCF7_VERSION, true );
}
}
?>
There is even a better way to obtain this, that prevents the script to be added and then removed.
Have a look here:
http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/
Hey Andrea, thanks for sharing this. I’m not sure if this way existed when I wrote this post. I don’t think it’s “better” necessarily, just different. In cases where you don’t have a template specifically for contact and where many pages share the same page template, the method I outline above keeps it loading only when necessary.
The next time I need to use CF7 I’ll take a closer look at this and improve upon it if necessary.
HI John, thanks for sharing this. However, the ‘contact’ in your example is page name or …something else?
‘contact’ is the page slug, which in this example would be domain.com/contact. `is_page` will accept the page ID, slug, or page title. See these examples: https://codex.wordpress.org/Function_Reference/is_page
Thanks for your clarification =)
Is it possible for it to smart load only when their shortcode is used. It’s seems crazy that it loads on all pages. Why doesn’t it jus tload on shortcode use.
I don’t want to use this function as I won’t always know which pages the form is used on
Hey Daniel, I haven’t looked at this in quite some time. I’m not sure if they’ve improved the script loading in the latest versions or not. Hopefully by now they have a better way. When I find some time I’ll look into it and update this post if necessary.