Contact Form 7 (CF7) is one of the most popular plugins for WordPress websites and has over 5 million installation at the time of print. One of the reasons for its popularity is the support it provides for advanced features such as flexible customisations, AJAX-powered form submission, reCaptcha, spam filtering and the ability to host multiple different contact forms.

Once you activate CF7, it will automatically inject the required JavaScript (JS) and StyleSheets (CSS) files into the HTML code on every webpage. This means, that anytime a page is viewed from your website, CF7 will load its required JS and CSS files unconditionally, even if there is no contact form on that page. However, unless you have a contact form on every page, which most websites don’t, most have a dedicated contact us page, loading the CF7 JS and CSS files on every page is unnecessary.

Furthermore, by loading these JS and CSS files on each page it will affect your overall website load times, particularly when they are embedded as this will block the page rending. This will not only result in lower scores when using testing services such as GTMetrix, Google Pagespeed but most importantly for your visitors where every second counts.

In this guide, we will show you how to disable CF7 JS and CSS files from loading on each WordPress page, except where you have a contact form installed. Also, if you use Google reCAPTCHA we will show how to load this on the page where your contact form is located. This will load the JS and CSS only when your WordPress website needs them, this is called conditional loading.

Conditionally Load CF7 JS & CSS

In order to use the code in your functions.php file, you will need to know the unique page ID for your contact form.

To exclude CF7 JS and CSS files on all pages except for your contact form page, simply copy and paste the following code into your functions.php file:

function vpsb_cf7_js_css_scripts() {
	if(!is_page(array(24)) ) { // Only load CSS and JS on needed Pages	
		wp_dequeue_script('contact-form-7'); // Restrict scripts.
		wp_dequeue_style('contact-form-7'); // Restrict css.
	}
}
add_action( 'wp_enqueue_scripts', 'vpsb_cf7_js_css_scripts' ); 

If you had a contact form on multiple pages, you would use this code in functions.php file to conditionally load the CF7 JS and CSS files:

function vpsb_cf7_js_css_scripts() {
	if(!is_page(array( 11, 22, 33, 44 )) ) { // Only load CSS and JS on needed Pages	
		wp_dequeue_script('contact-form-7'); // Restrict scripts.
		wp_dequeue_style('contact-form-7'); // Restrict css.
	}
}
add_action( 'wp_enqueue_scripts', 'vpsb_cf7_js_css_scripts' ); 

Conditionally Load CF7 JS & CSS and reCAPTCHA

Now, you maybe running Google reCAPTCHA as a form of spam presentation with your contact form and like CF7 it will load on every page when its only needed on your contact form page.

To exclude CF7 JS & CSS and reCAPTCHA files on all pages except for your contact form page, simply copy and paste the following code into your functions.php file:

function vpsb_cf7_js_css_scripts() {
	if(!is_page(array(24)) ) { // Only load CSS and JS on needed Pages	
		wp_dequeue_script('contact-form-7'); // Restrict scripts.
		wp_dequeue_style('contact-form-7'); // Restrict css.
		wp_dequeue_script('google-recaptcha'); // Restrict recaptcha.
	}
}
add_action( 'wp_enqueue_scripts', 'vpsb_cf7_js_css_scripts' ); 

If you had a contact form on multiple pages, you would use this code in functions.php file to conditionally load the CF7 JS and CSS files:

function vpsb_cf7_js_css_scripts() {
	if(!is_page(array( 11, 22, 33, 44 )) ) { // Only load CSS and JS on needed Pages	
		wp_dequeue_script('contact-form-7'); // Restrict scripts.
		wp_dequeue_style('contact-form-7'); // Restrict css.
		wp_dequeue_script('google-recaptcha'); // Restrict recaptcha.
	}
}
add_action( 'wp_enqueue_scripts', 'vpsb_cf7_js_css_scripts' ); 

That’s it. You have now successfully updated your functions.php file to conditionally load CF7 JS & CSS and reCAPTCHA files on your contact form page only.