Remove Contact Form 7 CSS and JS When Not Needed

Contact Form 7 is one of the most popular plugins in WordPress. At the time of writing this article, the plugins have 5+ millions active installations.

No doubt this plugin is great in every aspect. But there is one concern you may face while using it. When you activate the plugin, their JavaScript and CSS files are loaded on every page.

As a good practice, you must load only those JavaScript and CSS which are required for the current pages. Loading unnecessary files increase the page size and slow down the page speed.

In this article, I show you how to remove JavaScript and CSS files of the Contact Form 7 plugin when not needed. In other words, we are going to see how to load JavaScript and CSS files of Contact Form 7 on the required pages only.

How to Remove Contact Form 7 JS and CSS Files

As a site owner, you obviously know that on which page you have included a contact form. Normally the site has a contact page where we keep the contact form to receiving Enquiries.

For getting started, we will first remove the Contact Form 7 JavaScript and CSS files from all pages. After that, using template file or is_page() condition we would include it only on the required page.

There are 2 ways to stop loading JS and CSS files on all pages. You can pick any of them.

Add the below constants in the wp-config.php file.

define( 'WPCF7_LOAD_JS', false );
define( 'WPCF7_LOAD_CSS', false );

Another way is by adding the below filters in your active themes functions.php file.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Now if you view the source of your pages, you will not see any files loaded from the Contact Form 7 plugin.

Let’s now include the files on the required pages. If you are using a template for your contact page then add the below code in your template file before the get_header().

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
  wpcf7_enqueue_scripts();
}
 
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
  wpcf7_enqueue_styles();
}

get_header();
...

In case you are not using a template, then all your pages should be rendered from a page.php. Get a slug of your page where you need to place the contact form. We will use this slug in is_page() method and include the files as follows.

page.php

<?php
if(is_page('YOUR_PAGE_SLUG')) { //pass your contact page slug here
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }
 
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
}

get_header();
....

That’s it! It is that much simple and straight-forward. I hope you understand how to remove Contact Form 7 plugins CSS and JS files when not needed. Please share your thoughts and suggestions in a comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

7 thoughts on “Remove Contact Form 7 CSS and JS When Not Needed

  1. I am using ContactBuddy form, please guide me how to remove this css line with functions.php

    “/plugins/contactbuddy-by-pluginbuddycom/css/contactbuddy.css”

    I tried “add_filter( ‘contactbuddy_css’, ‘__return_false’ );” – this didn’t work for me.

  2. hi
    thx for your guide i have to 3 question pls guide me
    1-which section of functions.php file i have to put that 2 line codes?
    2-i dont undrestand this: { //pass your contact page slug here . what i have to put there?
    3-i need the contact form for 2 pages for ecample with these names(name i mena pages name): 1-contact-us and 2-employ
    so how can i use those codes in page.php

  3. Hey Sajid,

    I follow the same way u have provided on the blog thanks the method properly works for me for my company pesofts.com.

    1. Please share your code. Probably you are using the wrong slug. Your contact page slug is ‘contact’ which should use with is_page().

Leave a Reply

Your email address will not be published.