Optimize and style Contact Form 7 for WordPress

One of my favorite WordPress plugins is Contact Form 7 which I use on several of my WordPress based sites. Even though it's highly customizable and configurable I have a few gripes with some hardcoded functions in it. You can always edit the plugin file, which I did at first, but then you have to reapply your edits every time the plugin gets updated, which can be cumbersome as this plugin gets updated quite often. So instead of keep editing the plugin file on every update I created some overrides instead.

The Issues

• The URL to the Ajax loader symbol is hardcoded into the plugin, so if you don't use a white background in your theme the loading symbol looks quite ugly. If you replace the default icon with your own it gets overwritten on each plugin update.
• The JavaScript for the plugin gets loaded on every single page of the site no matter if the plugin is used or not on that page, which adds unnecessary loading time where it's not needed.
• The path to the style sheet for the validation and submit messages is also hardcoded into the plugin, and if you edit the style sheet to fit your theme, the edits gets lost on each update, and you have to upload your custom style sheet for the plugin again.

The Solutions

To not have to edit the plugin file, I added a few overrides in my theme's functions.php file instead to change the behavior of the plugin where needed.

Let's start by taking care of the Ajax loading symbol. To change the path to the GIF file I use a regular expression to update the URL.

// Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
    if ( is_page('contact') ) {
        $string = $content;
        $pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
        $replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
        $content =  preg_replace($pattern, $replacement, $string);
    }
    return $content;
}
add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );[/php]

This function filters the content, tracks down the Ajax loader tag and replaces the URL with a path to the current {theme folder}/images/ajax-loader.gif. So you can have your own custom Ajax loader stored in your theme folder instead, untouched on each plugin update. I added the if( is_page(contact) ) {} to the function to make sure the filter only runs on pages where needed, to not waste CPU cycles on pages where the plugin is not used. Contact is the name of the page where I use the form, change it to the name, or names of pages where you use the plugin.

Okay, now let's see take care of the script loading on each page of the site.

// Add the Contact Form 7 scripts on selected pages
function add_wpcf7_scripts() {
    if ( is_page('contact') )
        wpcf7_enqueue_scripts();
}
if ( ! is_admin() && WPCF7_LOAD_JS )
    remove_action( 'init', 'wpcf7_enqueue_scripts' );
add_action( 'wp', 'add_wpcf7_scripts' );

This function removes the call to add the Contact Form 7 scripts on every page, and then adds back the call where needed, in my case I add them back at the page called contact, but change that to whatever works for you.

And finally, let's deal with the style sheet.

function remove_wpcf7_stylesheet() {
    remove_action( 'wp_head', 'wpcf7_wp_head' );
}
add_action( 'init' , 'remove_wpcf7_stylesheet' );

Here I actually remove the call to the style sheet completely. As I have made my own style that fits my theme, I don't use the default style. If you use the default style but just want it to load where needed, you could use an is_page condition like on the loading of the scripts. I could have put the Contact Form 7 Style sheet in the theme folder using the same technique as on the Ajax loader to leave it untouched on a plugin update, but as I like to keep the calls to external files to a minimum to have the site load as fast as possible, I just put the WPCF7 CSS styles directly in my default style.css of my theme instead and got rid of the plugin style sheet loading.

The Final Code

And here is what the final code looks like, ready to get pasted into the functions.php file in the theme you are using.

/**
 * Functions:   Optimize and style Contact Form 7 - WPCF7
 */
// Remove the default Contact Form 7 Stylesheet
function remove_wpcf7_stylesheet() {
    remove_action( 'wp_head', 'wpcf7_wp_head' );
}

// Add the Contact Form 7 scripts on selected pages
function add_wpcf7_scripts() {
    if ( is_page('contact') )
        wpcf7_enqueue_scripts();
}

// Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
    if ( is_page('contact') ) {
        $string = $content;
        $pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
        $replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
        $content =  preg_replace($pattern, $replacement, $string);
    }
    return $content;
}

// If the Contact Form 7 Exists, do the tweaks
if ( function_exists('wpcf7_contact_form') ) {
    if ( ! is_admin() && WPCF7_LOAD_JS )
        remove_action( 'init', 'wpcf7_enqueue_scripts' );

    add_action( 'wp', 'add_wpcf7_scripts' );
    add_action( 'init' , 'remove_wpcf7_stylesheet' );
    add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );
}

This tweak was published when Contact Form 7 was at version 1.10, and should continue to work just fine as long as no major changes is made to the inner workings of the plugin.