Protecting your WordPress forms with a reCaptcha

Anybody that ever had a website with a form must have been confronted with spam submissions, the internet seems to be full of bots sending requests, always about the same topics, quite often in Russian. reCAPTCHA is just a strange name for some mechanism that protects HTML forms from spam bots submitting. Some earlier techniques included answering a question a bot could not answer like “2 + 2 = ?”. A few years ago Google create their own version of the scrip which used to have a “I am not a robot” checkbox to click, then another versions with images where you had to click images with traffic lights or cars. The latest version v3 doesn’t require any of this, obviously it doesn’t work perfectly as you still get some spam, but it still rules out most of it.

reCaptcha integrated in WordPress’s Contact Form 7

Now in WordPress the most obvious plugin to handle contact forms is “Contact Form 7” (Why “7”? I never knew but I guess there was 6 previous attempts to this plugin). And guess what, that plugin now handles reCaptcha natively without having to install additional plugins.

In the integration page you can setup the integration with Google’s reCaptcha.

Check the tutorial below on how to register your website and get the site keys.

That’s it, the reCaptcha is now protecting all forms… except the lazy programmer at Contact Form 7 just adds it to every page of your website, when you most likely only have forms on a couple of them. It just bloats your website with unnecessary CSS and Javascript + a call to Google’s servers on every single page.

Loading assets only when necessary

Happily there’s always a solution to any problem, on this website what we have done is adding this piece of code in the functions.php file of our theme. The idea is to remove the CF7 scripts from all pages (“dequeue” them) and then adding them back only on the pages where they are needed.

function manage_cf7_js_styles_recaptcha() {
    // Dequeue cf7 and recaptcha scripts and styles, preventing them from loading everywhere
    wp_dequeue_script( 'contact-form-7' );
    wp_dequeue_script( 'google-recaptcha' );
    wp_dequeue_style( 'contact-form-7' );
    // If current post has cf7 shortcode, enqueue!
    global $post;
    $template = get_page_template_slug($post->ID);
    if( $template == 'page-contact-us.php' || $template == 'page-careers.php' || $template == 'page-current-job-openings.php' ){
        if ( function_exists( 'wpcf7_do_enqueue_scripts' ) ) {
            wpcf7_do_enqueue_scripts();
            wp_enqueue_script( 'google-recaptcha' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'manage_cf7_js_styles_recaptcha', 10, 0 );

Here we know when we need the reCaptcha by checking the page template of the current page displayed. We happen to have contact forms only on the “Contact Us”, “Careers” and “Current Job Openings” pages.
Other ways would be to check the pages by ID or to check if they are using a shortcode from Contact Form 7 :

if ( isset( $post->post_content ) AND has_shortcode( $post->post_content, 'contact-form-7' ) ) {

Hope this will be useful!