Optimize Contact Form 7 WordPress Plugin By Removing jQuery From Head

There are two optimizations that we can do in order to avoid the heavy jQuery library load on the web page if the Contact Form 7 wordpress plugin is activated on the blog.

==>The jQuery library, jQuery-form.js, contact-form-7.js as well as the Contact form 7 stylesheets should be included only when we want a contact form on that page. For all other pages, there is no need to include these libraries or files for Contact Form 7

==>Remove the load of jQuery.js, jQuery-form.js and/or contact-form-7.js from the head section of the blog post/page

Follow the below steps in order to optimize Contact Form 7:-

1. Add the below code in the functions.php that you could find in Appearance => Editor, on the right hand side of your wp-admin panel. Put the code at the end of the file before the closing php tag ?>

remove_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
remove_action( 'wp_print_styles', 'wpcf7_enqueue_styles' );
if ( $_SERVER['REQUEST_URI'] == "/contact/" ) {
   add_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
   add_action('wp_print_styles', 'wpcf7_enqueue_styles' );
}

The $_SERVER[‘REQUEST_URI’] == “/contact” indicates that you have to include the script and styles only for the contact page with URI http://www.examplesite.com/contact. If I had to include it for home page also then my code for function.php would be as follows:-

remove_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
remove_action( 'wp_print_styles', 'wpcf7_enqueue_styles' );
if ( $_SERVER['REQUEST_URI'] == "/" 
or   $_SERVER['REQUEST_URI'] == "/contact") {
   add_action( 'wp_print_scripts', 'wpcf7_enqueue_scripts' );
   add_action('wp_print_styles', 'wpcf7_enqueue_styles' );
}

“/” indicates “http://www.examplesite.com/”

Remember that you need to specify the condition depending on the URI (URL) of the page and not the page name in wordpress.

2. You need not to worry about the footer load of the scripts in the new version of Contact Form 7 (7.2.4.4). So skip this point!

On the wp-admin panel, in the Plugins editor, select the editor for the Contact Form 7 plugin. Find the below code, it would be either in wp-contact-form-7.php or settings.php or in includes => controller.php depending on your contact-form 7 version.

function wpcf7_enqueue_scripts() {
  $in_footer = true;
  if ( 'header' === WPCF7_LOAD_JS )
	$in_footer = false;

  wp_enqueue_script( 'contact-form-7', 
  wpcf7_plugin_url( 'contact-form-7.js' ),
  array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );
}

Replace the above code with the following code:-

function wpcf7_enqueue_scripts() {
  $in_footer = true;
  if ( 'header' === WPCF7_LOAD_JS )
     $in_footer = false;

  wp_register_script('jquery', false, false, false, $in_footer);
  wp_enqueue_script( 'contact-form-7', 
     wpcf7_plugin_url( 'contact-form-7.js' ),
     array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer ); 
}

Thus, by adding the above code to optimize Contact Form 7 wordpress plugin, we would get the necessary scripts for Contact form 7 on only required pages and not all pages/posts. This is because, most of us want our post posts to be light weighted with small size, so that they load fast for those visitors who come from search engines searching something! And also, we do not want the scripts and styles loaded for that application which we are not using on that particular post.

  • Udi

    Forgive me for not understanding, but what is wrong with Contact Form 7? I’m using it on several sites and it seems ok. Is it really that much of a database performance drain? I mean, it’s not like this is a plugin that is used often (I get emails using it maybe once every two weeks).

  • @Udi There is nothing as such wrong with contact form 7, in fact it is a very good and flexible contact form generator. The only thing is as it loads some heavy scripts and a stylesheet in the head section of every post or page on the blog, the page load time increases. So if someone comes to your site from search engine, and if your post takes a bit longer to open, chances are the visitor may read some other webpage open in another tab and do not land on yours, increasing your bounce rate. There are many bloggers who hesitate to use the plugins causing unnecessary load on their post pages. It does not cause any database drain, just it affects your page performance if not optimized. You can continue using the plugin, but if you make the above changes, your page would perform better in load time.

  • I used to use contact form 7 plugin but recently I moved to Extended contact form by Joost.. Have you tried it?? Is that also a memory hogging plugin?

  • I was using Contact Form 7 in my blog, after which I started getting, the following error message upon, deleting images from media library, WordPress Auto upgrade and on 3 of my dashboard widgets.

    Fatal error: Out of memory (allocated 21233664) (tried to allocate 168557 bytes) in /home2/virtualp/public_html/wp-includes/wp-db.php on line 529

    I tried many solutions which did not work. One day I stumbled upon Wufoo forms and started using an HTML form designed using the service (and removed contact form 7). The error vanished miraculously.

    I wish I spotted your blog entry earlier. However the Wufoo form meet my needs and I am happy with it.

    By the way I think “XML Sitemap Generator for WordPress 3.2.2” (http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/) will need your kind of treatment mentioned here too. It swallows memory by huge piles when asked to rebuild the sitemap.

    Thanks for the valuable information…

  • I may be doing something badly wrong here but I can’t find

    function wpcf7_enqueue_scripts()

    in either wp-contact-form-7.php or settings.php

    I’m using Contact Form 7 version 2.2

  • rudolf

    very nice tip, but i think it must be adapted
    the plugin’s author recommends inserting this two lines in config.php
    define(‘WPCF7_LOAD_JS’, false);
    define(‘WPCF7_LOAD_CSS’, false);

    and then he says we shall make custom templates with custom headers for the pages where we want the scripts… and insert this lines in the header
    if ( function_exists( ‘wpcf7_enqueue_scripts’ ) ) {
    wpcf7_enqueue_scripts();
    wpcf7_enqueue_styles();
    }

    but, then….. if we use a bit of your technique there’s no need of custom pages, it´s a matter of putting this on the header.php:
    if ( $_SERVER[‘REQUEST_URI’] == “/contact/” ) {
    if ( function_exists( ‘wpcf7_enqueue_scripts’ ) ) {
    wpcf7_enqueue_scripts();
    wpcf7_enqueue_styles();
    }
    }

    no need of editing core files, pretty clean, and it’s working ok for me

  • Thanks Rudolf for sharing this info.