How to Load Contact Form 7 JS : CSS Files on Contact Page Only in WordPress

How to Load Contact Form 7 JS / CSS Files on Contact Page Only in WordPress

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.

IMPORTANT In this tutorial, we'll be directly editing WordPress theme files and we recommend that you create a child theme of your existing parent theme. By using a child theme you will be able to apply modifications without altering the parent theme files and ensuring any changes you make are kept following any parent theme updates.
TIP If you don't feel comfortable with editing the functions.php file directly, we would recommend you use the Code Snippets plugin. This plugin will enable you to easily add, manage and delete WordPress code snippets from your dashboard. To find out more about adding custom code snippets using a plugin see our tutorial How to Add Custom Code Snippets to WordPress with the Code Snippets Plugin for more information.

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' ); 
TIP Don’t forget to replace the line (!is_page(array(24) with the page ID of your contact page, for example, if the contact page ID was 5, you would change the code to if(!is_page(array(5)) ) { .

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' ); 
TIP Don’t forget to replace the line if(!is_page(array( 11, 22, 33, 44 )) ) { with the page IDs of your contact pages, for example, if the contact page IDs were 5, 10, 15, 20, you would change the code to f(!is_page(array( 5, 10, 15, 20 )) ) {.

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' ); 
TIP Don’t forget to replace the line (!is_page(array(24) with the page ID of your contact page, for example, if the contact page ID was 5, you would change the code to if(!is_page(array(5)) ) { .

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' ); 
TIP Don’t forget to replace the line if(!is_page(array( 11, 22, 33, 44 )) ) { with the page IDs of your contact pages, for example, if the contact page IDs were 5, 10, 15, 20, you would change the code to f(!is_page(array( 5, 10, 15, 20 )) ) {.

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.

VPSBasics

VPSBasics

This guide was written by the VPS Basics editorial team, led by Gilberto Van Roosen. They are a unique blend of people who are dedicated to providing highly detailed, comprehensive and easy to follow tutorials, written in plain English. They specialise in tutorials for managing Linux servers, its software and WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.