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.
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.
http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/
Find out how you can restrict any plugin from loading JS and CSS to only specific posts and/or pages.
Thank you for this post! The code worked wonderfully!
I have various contact forms on multiple pages and I wanted to find code that used the Array function using Page IDs, like you have in your example. This code worked perfectly for me, and the JS and CSS scripts are not being called from the other pages of my site, only on pages that I've set in my child theme's functions.php (as checked in GTMetrix and Pingdom).
Thank you Lorraine.
Here's a version that works based on whether the CF7 shortcode is present in the body of the page, rather than having to keep a list of post IDs up to date. I wish the plugin itself did this...
# Restrict Contact form 7 scripts and styles
function conditionally_load_contactform7() {
if (strpos(get_the_content(null, false, get_post()), "[contact-form-7") === false) {
wp_dequeue_script('contact-form-7'); # Dequeue scripts.
wp_dequeue_style('contact-form-7'); # Dequeue css.
}
}
add_action( 'wp_enqueue_scripts', 'conditionally_load_contactform7' );
Thanks for the code Tom. Seems to work great.
Question regarading cf7 shortcode vs. using ID's which is faster or is it even an issue?
I ask, only because it seems to me a (not page ID -> dequeue) seems faster than (does this page have cf7 shortcode) on every page loaded.
Hope that makes sense.