Connect with us


Optimizing Contact Form 7 for Better Performance



contact form 7 obtimize

Contact form 7 is one of the most used free WordPress contact form plugins to send online emails directly from a website.

Many WordPress themes made it mandatory to install this contact form plugin for their contact page templates.

For a time being it is good to use this contact form until and unless it is not affecting your site load time but when you notice it’s JavaScript and CSS files are generating some extra HTTP requests negatively slowing down your site performance, you can consider optimizing contact form 7 plugin.

Why is page speed important?

Because Google has indicated site speed is one of the signals used by Google algorithm updates to rank high on Google.

It is also important for a better user experience.

Minify CSS, JavaScript and HTML Codes

By optimizing your web pages code (including removing commas, spaces, and other unnecessary characters), you can dramatically increase your page speed.

Google recommends using the YUI Compressor for JavaScript and CSS.

Well, here in this tutorial I’m not going into detail about Google page speed guide so back to the main topic on how to optimize contact form 7 for better performance.

The fact is Contact form 7 includes its JavaScript and CSS files on each and every page on your site.

So probably you want to deregister these files from every web page and want contact form 7 to load these CSS & JavaScript files only on the pages where you’re using the contact form 7 plugin.

It will save a bit of bandwidth and will also save your site from loading extra files on every page.

Instead, these files will be loaded on the pages with only having contact forms.

Optimize Contact Form 7 WordPress Plugin – DeRegister CSS & JavaScript files

There are two different methods available on the web to remove contact form 7 CSS and JavaScript files.

The first method is officially introduced by the author of CF7 plugin – Takayuki Miyoshi and the second one is WordPress functions PHP script made by any PHP scriptwriter.

Rather, I don’t know who is that great person but here I am introducing with both of the ways of optimizing contact form 7.

Method 1: Define Constants Values in WP-Config.PHP

Control CF7 behavior by defining some constant values in the wp-config.php file.

Following are the steps to locate the wp-config.php file.

  1. Launch FTP file manager from your web host cPanel.
  2. Locate the directory where you have installed your WordPress site (most likely it is /public_html).
  3. Look for wp-config.php file => select it and click on edit from the top menu.
  4. Go to the end of the page => copy below code and paste it right above the /* That’s all, stop editing! Happy blogging. */
define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

Now just save the file and it’s done.

The code should be placed correctly or else your site may be broken.

Look at the below screenshot.

Optimize Contact Form 7

This is how it looks like after adding the above constant values.

If you’re not able to perform this method, don’t panic.

Just contact your web hosting service provider to do this for you.

Method 2: Optimize CF7 By Adding a PHP Script in Functions.PHP

This may be an easy way for you for optimizing contact form 7.

For this, first, you will need to find the slug of the web pages on your site with the contact form.

To do so go log into your WordPress back-end area and go to Pages.

Click the Quick Edit on the pages having form and copy the slug.

Suppose you have a page titled “Contact Us” which has a URL slug “contact-us”.

Go to Appearance => Editor and edit your theme’s functions.php file.

Deregistering Contact Form 7 CSS files

Copy below PHP function script and add it at the end of your theme’s function.php

// deregister Contact Form 7 styles from every page having no contact form
add_action( 'wp_print_styles', 'contact_form_7_deregister_styles', 100 );
function contact_form_7_deregister_styles() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_style( 'contact-form-7' );

Make sure you’ve replaced contact-us slug with your page’s URL slug in the fourth line of the code.

Deregistering Contact Form 7 JavaScript Files

Similarly, replace contact-us slug with your page’s URL slug in the below code (4th line) and add this to the end of the functions.php file.

// deregister Contact Form 7 JavaScript files from every page having no contact form
add_action( 'wp_print_scripts', 'contact_form_7_deregister_javascript', 100 );
function contact_form_7_deregister_javascript() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_script( 'contact-form-7' );

That’s all, you have removed unnecessary HTTP requests from your site.

Both of the above code will check that if the web page is not contact-us then it will automatically deregister the styles and JavaScript files from all other pages on your site.

Have Multiple Forms on Multiple Pages?

In this condition, you can use the is_page() function in your code snippet.

Referencing by WordPress Codex: is_page(). It can get parameter values as Page ID, Page Slug or Page Title.

You can add an array of pages.

 * is_page( array( ID, 'slug', 'Title' ) );
 * Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 
is_page( array( 42, 'about-me', 'Contact' ) );

These were the ways to optimize contact form 7 plugin by deregistering CSS and JavaScript files from the web pages without a contact form.

Continue Reading