Adding captcha to Contact Form 7

To add Flexible Captcha to a form created with Contact Form 7 you will need to add a few functions to your themes functions file. The first function you need to create processes the shortcode created by Flexible Captcha. Below is the function you will need to add.

add_filter( 'wpcf7_form_elements', 'custom_wpcf7_form_elements' );

function custom_wpcf7_form_elements( $form ) {
	$form = do_shortcode( $form );
	return $form;
}

The next function you will need to create validates the captcha when it is submitted. Below is an example for versions of Contact Form 7 below 4.6.

add_filter('wpcf7_validate', 'custom_wpcf7_validate');

function custom_wpcf7_validate($result) {
	global $FlexibleCaptcha;
	if (!$FlexibleCaptcha->check_captcha_val()) {
		$result['valid'] = false;
		$result['reason']['FC_captcha_input'] = 'The entered text did not match the captcha image.';
	}
	return $result;
}

This is an example of the validation function for Contact Form 7 version 4.6 and above.

add_filter('wpcf7_validate', 'custom_wpcf7_validate');

function custom_wpcf7_validate($result) {
	global $FlexibleCaptcha;
	if (!$FlexibleCaptcha->check_captcha_val()) {
		$captchaTag = new WPCF7_FormTag(array('type'=>'text', 'basetype'=>'text', 'name'=>'FC_captcha_input'));
		$result->invalidate($captchaTag, 'The entered text did not match the captcha image.');
	}
	return $result;
}

The last function you will need to create adds a javascript function that regenerates the captcha when the submit button is pressed on your form. Below is an example.

add_filter('wp_head', 'custom_add_contact_captcha_regenerate');

function custom_add_contact_captcha_regenerate($result) {
	?>
	<script type="text/javascript" language="javascript">
		jQuery(function() {
			jQuery('.wpcf7-form').on('ajaxComplete', function() {
				jQuery('.wpcf7-form .FC_image_refresh').click();
			});

			jQuery('.wpcf7-form .FC_captcha_input_container').each(function() {
				var oldHtml = jQuery(this).html();
				jQuery(this).html('<span class="wpcf7-form-control-wrap FC_captcha_input">'+oldHtml+'</span>');
			});
		});
	</script>
	<?php
}

Then you just add the shortcode to your contact form and the captcha will appear. The shortcode to make a 200px x 30px captcha image would be [ FC_captcha_fields width=”200″ height=”30″ ]

The validation function can be modified to work with any form. You will just need to modify the filter to hook into the right place and modify the function to return the right data.