Preventing Contact Form 7 WordPress Plugin from Loading Js and CSS on All Pages

Contact form 7 is an amazing plugin that lets you add simple as well as complex contact forms to any post or page on your wordpress blog. The forms are super easy to create and work great. Having said that, if you are using this plugin, you would have noticed that the plugin adds Javascript and CSS references to all your posts and pages irrespective of if or not that post or page has a contact form in it. Wouldn't it be great if there was a way to stop this from happening and restricting the plugin's JS and CSS references to only those pages that have a contact form? Well, there is a simple way to achieving this. Here's what you need to do:

Step 1: Get Page IDs

The first step is to get the IDs of pages that have the Contact7 contact form. Let's say for example, you have the contact form on pages with IDs, 14 and 19.

Step 2: Add the Function

Once you have the IDs, open your theme's functions.php page and add the following code to it (towards the end of the page).

# Restrict Contact form 7 scripts and styles
function conditionally_load_contactform7(){
if(! is_page( array ( 14 , 19 ) ) ) { # Edit page IDs here
	wp_dequeue_script('contact-form-7'); # Dequeue scripts.
	wp_dequeue_style('contact-form-7'); # Dequeue css.		
add_action( 'wp_enqueue_scripts', 'conditionally_load_contactform7' ); 

This function will block the Contact form 7 plugin from loading JS and CSS on all pages except pages with the supplied IDs. So in this case pages with IDs 14 and 19.

All you need to do now after adding this function is edit the IDs with IDs of pages that use the contact form on. Make sure to separate the IDs with a comma. If you only have one page where you have added the contact form, you can remove the array and simply add the ID number. For example, if the page ID 4 then you can simply use is_page(4). Hopefully you got the idea.

Code Explanation:

The is_page() wordpress function can be used to check if a page is being displayed. This function can also be used to check for specific pages by supplying it with the page IDs.

For instance, if you want to check if the current page is a page with an ID of 7, you can use is_page(7), similarly if you want to check for multiple pages you can input IDs of these pages in an array. For example, if you want to check for pages with ID's 5 and 8, you can use is_page( array( 5 , 8 ) ).

The wp_dequeue_script() and wp_dequeue_style() functions can be used to dequeue specific scripts and styles from loading. All you need to do is supply these functions with the handle of the enqueued script and style. In-case of Contact form 7 plugin, the handle is contact-form-7.

So here's our custom function works: We first check to see if the current webpage is a page with the supplied ID(s). If that is the case, the function will not run and the scripts and styles will not be dequeued. For all other cases, the scripts and styles will be dequeued and hence will not load. For instance, if the ID of 7 and 8 is specified, then the scripts and styles will be blocked on all pages and posts except the ones with the ID of 7 and 8.

Note: If you are using the contact form on a single post page then you can use the is_single() function and supply it with the post IDs similar to the is_page() function discussed above.

Now you have effectively blocked the plugin from loading unnecessary JS and CSS files on all pages and instead load them only on pages that have a contact form. Have a question? Feel free to leave it in the comments section.

Find out how you can restrict any plugin from loading JS and CSS to only specific posts and/or pages.