How To Load the Contact Form 7 Script for a Contact Page Only

How To Load the Contact Form 7 Script for a Contact Page Only

You can stop the Contact Form 7 plugin’s script and stylesheet from loading on every page of your WordPress blog. While the plugin is a great one to install, since it makes creating contact forms easy, you probably don’t want to load the script and stylesheet on every page. For those that one to get every ounce of performance out of their blog, you definitely don’t want those two resources to load each time.

The good news is that it is easy to only load the plugin’s resources on a specific page of your WordPress blog. By simply creating a few lines of code in the functions.php file of your current theme, you can control when scripts and stylesheets are loaded for many plugins that you have installed. Let’s look at how to do this for the Contact Form 7 plugin.

Deregistering Scripts and Stylesheets

Wordpress Logo

Many plugins use the wp_enqueue_script WordPress function to load supporting Javascript files. The wp_enqueue_style function may be used to load any stylesheets used by the plugin. Now, not all plugins use these two functions as they may use PHP’s “echo” command instead. If a plugin does use the WordPress functions, you can then use two other WordPress functions to unregister the resources when they aren’t needed. The two WordPress functions are: wp_deregister_script and wp_deregister_style.

To unregister either a stylesheet or script you will need their handle, which was created when the wp_enqueue_script or wp_enqueue_style was called. You can easily find this by searching through the plugin’s files until you find where the stylesheet or script is registered.

For the Contact Form 7 plugin, the following lines of code are used to register the script and stylesheet:

wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'scripts.js' ), array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer );
wp_enqueue_style( 'contact-form-7', wpcf7_plugin_url( 'styles.css' ), array(), WPCF7_VERSION, 'all' );

The code highlighted in green shows the two handles that will be used to deregister the resources. Next we must add the code needed to prevent the script and stylesheet from loading for each page.

Deregister the Contact Form 7 Script and Stylesheet

To only load the Contact Form 7 Javascript and stylesheet on one page, add the following PHP code to your functions.php file:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
  if ( !is_page('Contact') ) {
    wp_deregister_script( 'contact-form-7' );
  }
}

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
  if ( !is_page('Contact') ) {
    wp_deregister_style( 'contact-form-7' );
  }
}

The above code will check to see if the page loaded isn’t the “Contact” page, and if it isn’t, then the script and stylesheet used by the Contact Form 7 plugin are deregistered. Simply replace the page name that I have in the above code with the page that has your contact form. Of course, you can extend the if statement to include multiple pages as well.

I have used similar code to prevent other unnecessary scripts and stylesheets from load on every page from other plugins. You may not be able to disable some of the scripts or stylesheets, but if you can get most of them, your blog should load up quicker.

34 Responses to “How To Load the Contact Form 7 Script for a Contact Page Only”

  1. Carol Ann says:

    I also tried using (array(‘slug’))

  2. Carol Ann says:

    This is a great post! Only problem is it is not working for me πŸ™ I’ve done everything you have said and still no luck. Below is a copy of the code i’m using. Any chance you could take a look?

    /** Prevent Contact Form 7 from loading on every page */
    add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
    function my_deregister_javascript() {
    if ( !is_page(‘gift-advertising’,’Gift-Idea-Banners’,’sponsor-a-giveaway’,’gift-idea-review’,’gift-of-the-month-sponsor’,’sponsored-gift-post’) ) {
    wp_deregister_script( ‘contact-form-7’ );
    }
    }
    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
    function my_deregister_styles() {
    if ( !is_page(‘gift-advertising’,’Gift-Idea-Banners’,’sponsor-a-giveaway’,’gift-idea-review’,’gift-of-the-month-sponsor’,’sponsored-gift-post’) ) {
    wp_deregister_style( ‘contact-form-7’ );
    }
    }

    • Johnny Guest says:

      Great tip! Unfortunately, I am having the same problem. I entered the code just as Carol Ann did, but to no avail. I only want the Contact Form 7 code to appear on the “Contact Us” page, so I have the following for deregistering both javascript and styles:

      if ( !is_page(‘contact-us’) ) {

      But the Contact Form 7 stuff still appears under every post where we want comments; in particular:

      http://aspecialspace.org/the-special-needs-of-special-needs-parents/

      I am using the Super-Skeleton theme and Akismet. If anyone could help, it would be greatly appreciated. I’ve scoured the Interwebs for solutions, and nothing seems to work. I’m pulling my hair out. Thanks in advance!

  3. lisa says:

    Thanks for introducing a little rationality into this dabete.
    http://www.discountsguide.com

  4. Chong Davel says:

    This is exactly what I need Paul, this is such a helpful one. I use to have contact page only so that I can identify frequently those person who wants to contact me.

  5. kristeen says:

    Lovely fix, I’ve been searching for this fix for a quite while now.

  6. Peter says:

    Thanks for sharing this great piece of code. I always wondered on how to this with contact form 7. Thanks.

  7. Andrew Walker says:

    Interesting. Thanks a lot for sharing this. It’s a very informative post.

  8. Wuss says:

    Exactly what I was desperately looking for!

    It works great, thank you for this little hack which speeds up pages.

  9. torejx says:

    Ok, I need to cancel the jquery dependence also from wp_register_script( ‘jquery-form’…
    Ciao!

  10. torejx says:

    Sorry, I just realized that one script is jquery.form and not jquery, so I suppose I need it. The problem is only the jquery file from wp-includes.

  11. torejx says:

    I used your code and it’s work, but I want to optimize my page: on the contact page, contact-form load his script (script.js), jquery and jquery again from wp-includes. My theme already include jquery, so I would to load only script.js.
    If I use wp_deregister_script( ‘jquery’ ); it deregister all three scripts, and if I edit wp_enqueue_script( ‘contact-form-7’, wpcf7_plugin_url( ‘scripts.js’ ),
    array( ‘jquery’, ‘jquery-form’ ), WPCF7_VERSION, $in_footer ); removing ‘jquery’ it doesn’t change anything.
    Any ideas?

    ps: sorry for my english πŸ™‚

  12. Kimi says:

    Thanks for the tip!

    I used Contact Form 7 in my client’s site, will definitely try this tut.

    I reckon the js of contact form 7 is separated if we use pagespeed to measure how fast our sites load.

  13. Chip says:

    1. I didn’t know Contact Form was loading on every page.
    2. Thanks for this little rundown
    3. Pages are loading even quicker now!

  14. Jarret says:

    This is a great looking theme BTW. What are you using? I tried to check your .css file, but you’ve removed comments and compressed it.

    From following the comment thread, does this hack work? I want to confirm before I give this a try. Loading java for contact form 7 on every page is pretty annoying.

    Thanks,

    Jarret

    • Paul says:

      I designed the theme myself, and the compressed CSS file is done by the W3 Total Cache plugin – the best cache plugin I have used.

      I haven’t had any issues with the hack. It does load the scripts on the contact page without a problem, but prevents it from loading on the remaining pages.

  15. Thanks for this tip Paul. But I want to restrict the page numbers plugin too like this, to make that load on the index of my blog what’s the name that I should insert ? plain index.php ? or something else ?

    • Paul says:

      Here are two options that enable a script for the home page only, or disable the script for the home page only:


      // Removes script from all but the home page of your blog
      if ( !is_front_page() ) {
        wp_deregister_script( '[script handle]' );
      }

      or


      // Removes script from the home page of your blog
      if ( is_front_page() ) {
        wp_deregister_script( '[script handle]' );
      }

  16. Nice hack. Will definitely help reduce the page load time of other pages that ain’t the contact page.

    I’ll be looking at applying this to some plug-ins on my site that are supposed to be loaded only on posts and not site wide πŸ˜‰

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.