To integrate reCAPTCHA with WP Forms, you can use the wpcf7_recaptcha_sitekey and wpcf7_recaptcha_secret filters provided by WP Forms. These filters allow you to modify the reCAPTCHA site key and secret key used by WP Forms.
Here’s an example code snippet that demonstrates how to integrate reCAPTCHA with WP Forms:
function wpsnippets_wpforms_recaptcha_sitekey( $sitekey ) {
// Replace 'YOUR_RECAPTCHA_SITE_KEY' with your actual reCAPTCHA site key
$sitekey = 'YOUR_RECAPTCHA_SITE_KEY';
return $sitekey;
}
add_filter( 'wpcf7_recaptcha_sitekey', 'wpsnippets_wpforms_recaptcha_sitekey' );
function wpsnippets_wpforms_recaptcha_secret( $secret ) {
// Replace 'YOUR_RECAPTCHA_SECRET_KEY' with your actual reCAPTCHA secret key
$secret = 'YOUR_RECAPTCHA_SECRET_KEY';
return $secret;
}
add_filter( 'wpcf7_recaptcha_secret', 'wpsnippets_wpforms_recaptcha_secret' );
In the code snippet above, we define two custom functions wpsnippets_wpforms_recaptcha_sitekey and wpsnippets_wpforms_recaptcha_secret. These functions modify the reCAPTCHA site key and secret key respectively.
To integrate reCAPTCHA with WP Forms, you need to replace 'YOUR_RECAPTCHA_SITE_KEY' and 'YOUR_RECAPTCHA_SECRET_KEY' with your actual reCAPTCHA site key and secret key. Once you have replaced these values, you can add the code snippet to your theme’s functions.php file or a custom plugin.
By using this code snippet, you can easily integrate reCAPTCHA with WP Forms and enhance the security of your forms by preventing spam submissions.
Examples
Example 1: Adding reCAPTCHA to a WP Forms contact form
This example demonstrates how to integrate reCAPTCHA into a WP Forms contact form. The code adds the necessary reCAPTCHA site key and secret key to the WP Forms settings, and then displays the reCAPTCHA field on the contact form.
/**
* Add reCAPTCHA keys to WP Forms settings
*/
function wpsnippets_wpforms_recaptcha_keys( $fields ) {
$fields['recaptcha_site_key'] = array(
'label' => 'reCAPTCHA Site Key',
'type' => 'text',
);
$fields['recaptcha_secret_key'] = array(
'label' => 'reCAPTCHA Secret Key',
'type' => 'text',
);
return $fields;
}
add_filter( 'wpforms_settings_fields', 'wpsnippets_wpforms_recaptcha_keys' );
/**
* Display reCAPTCHA field on WP Forms contact form
*/
function wpsnippets_wpforms_display_recaptcha_field( $fields, $form_data ) {
$recaptcha_site_key = wpforms_get_setting( 'recaptcha_site_key' );
if ( ! empty( $recaptcha_site_key ) ) {
$fields['recaptcha'] = array(
'label' => 'reCAPTCHA',
'type' => 'recaptcha',
'recaptcha' => array(
'site_key' => $recaptcha_site_key,
),
'description' => 'Please complete the reCAPTCHA validation.',
);
}
return $fields;
}
add_filter( 'wpforms_frontend_fields', 'wpsnippets_wpforms_display_recaptcha_field', 10, 2 );
The first function wpsnippets_wpforms_recaptcha_keys adds the reCAPTCHA site key and secret key fields to the WP Forms settings. The second function wpsnippets_wpforms_display_recaptcha_field displays the reCAPTCHA field on the contact form, using the site key provided in the WP Forms settings.
Example 2: Customizing reCAPTCHA appearance on WP Forms
This example demonstrates how to customize the appearance of the reCAPTCHA field on a WP Forms contact form. The code modifies the size and theme of the reCAPTCHA field.
/**
* Customize reCAPTCHA appearance on WP Forms contact form
*/
function wpsnippets_wpforms_customize_recaptcha( $recaptcha_args ) {
$recaptcha_args['size'] = 'compact';
$recaptcha_args['theme'] = 'dark';
return $recaptcha_args;
}
add_filter( 'wpforms_recaptcha_args', 'wpsnippets_wpforms_customize_recaptcha' );
The wpsnippets_wpforms_customize_recaptcha function modifies the $recaptcha_args array to set the size to ‘compact’ and the theme to ‘dark’. This will change the appearance of the reCAPTCHA field on the WP Forms contact form.
Example 3: Validating reCAPTCHA on form submission
This example demonstrates how to validate the reCAPTCHA field on form submission. The code checks if the reCAPTCHA response is valid and displays an error message if it is not.
/**
* Validate reCAPTCHA on form submission
*/
function wpsnippets_wpforms_validate_recaptcha( $errors, $fields ) {
$recaptcha_response = isset( $_POST['g-recaptcha-response'] ) ? $_POST['g-recaptcha-response'] : '';
if ( empty( $recaptcha_response ) ) {
$errors['recaptcha'] = 'Please complete the reCAPTCHA validation.';
} else {
$recaptcha_secret_key = wpforms_get_setting( 'recaptcha_secret_key' );
$recaptcha_verify_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_verify_response = wp_remote_post( $recaptcha_verify_url, array(
'body' => array(
'secret' => $recaptcha_secret_key,
'response' => $recaptcha_response,
),
) );
$recaptcha_verify_body = wp_remote_retrieve_body( $recaptcha_verify_response );
$recaptcha_verify_data = json_decode( $recaptcha_verify_body );
if ( ! $recaptcha_verify_data->success ) {
$errors['recaptcha'] = 'reCAPTCHA validation failed. Please try again.';
}
}
return $errors;
}
add_filter( 'wpforms_frontend_errors', 'wpsnippets_wpforms_validate_recaptcha', 10, 2 );
The wpsnippets_wpforms_validate_recaptcha function checks if the reCAPTCHA response is empty. If it is, an error message is added to the $errors array. If the response is not empty, the function sends a verification request to the reCAPTCHA API using the secret key provided in the WP Forms settings. If the verification fails, an error message is added to the $errors array.