Loading Contact Form 7 quickly and efficiently on WordPress

Tutorial on loading contact form 7 quickly and efficiently on wordpress. Recently when i was busy optimizing my site, i found out that most of the page load was being taken by Contact form css and javascripts.

I was not aware that the Contact form 7 plugin was loading its stylesheet and scripts on each and every page of my site. I had implemented contact forms on only 3 of my pages, so i wanted it to load only on those 3 pages and not on all of them.

Fortunately Paul had already written a post about doing just that. I merely had to copy paste the code on my site for it to work. It was really that easy.

Loading Contact form 7 efficiently on WordPress

Here is the code which i used (to be pasted in your functions.php):

/** Remove contact form 7 */
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
  if ( !is_page(array('Contact', 'Hire Us', 'Write for us') ) ) {
    wp_deregister_script( 'contact-form-7' );
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
  if ( !is_page(array('Contact', 'Hire Us', 'Write for us') ) ) {
    wp_deregister_style( 'contact-form-7' );
  }
}

In the ispage array line, please remove and add the appropriate page names on which you want to enable contact form 7. After you have made the changes, just click on Update file and Voila, you are done!

To check if it is working, just open a page and right click and then select View page source. If you are not seeing any contact form 7 variables, then its confirmed you have implemented the code correctly.

Note: Also make sure to check your contact page and other pages on which you are using contact forms, that cf7 css and scripts are loading properly, otherwise your users won’t be able to send mails to you.

The above method was about loading contact form 7 efficiently on WordPress. Now here is how you can load it more quickly.

Loading Contact form 7 quickly on WordPress

I am sure you already are using the WordPress Total Cache plugin. If you are not, then i suggest you to give it a try, you can find the official repo here.

After enabling it, go to the minify tab and add the contact form 7 stylesheet and javascripts. By doing this you are combining and minifying the cf7 files and fetching it as one file. This means there are fewer requests and less data to be downloaded.

Also note, a cache plugin like the one discussed above also makes sure that your js files have to be downloaded only once i.e. the first time a visitor visits your site.

The next time he opens another page on your site, your js files will already have been cached in the browser. This method will speeden up your site considerably.

Did you like this tutorial about loading contact form 7 quickly and efficiently on wordpress? If you did, then do consider subscribing to our newsletter for further such updates!

Credit: Technically easy

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.