Add reCAPTCHA to WordPress Contact Form for Spam Protection
Explanation
To add reCAPTCHA to your WordPress contact form, you'll need to follow a few simple steps. This will help protect your form from spam and bots.
Step 1: Load the reCAPTCHA Script
First, ensure the reCAPTCHA script is loaded on your contact page. The code checks if the current page is your contact page and then loads the necessary script from Google. Adjust the condition to match your specific contact page.
Step 2: Display reCAPTCHA in Contact Form 7
To show the reCAPTCHA widget in your form, the code adds a filter that inserts a reCAPTCHA element. Remember to replace 'your-site-key' with your actual site key from Google reCAPTCHA.
Step 3: Verify reCAPTCHA Response
When someone submits the form, the code verifies the reCAPTCHA response using your secret key. If the verification fails, it will invalidate the form submission and prompt the user to try again. Make sure to replace 'your-secret-key' with your actual secret key.
Step 4: Add reCAPTCHA Field to the Form
Finally, the code adds a placeholder for the reCAPTCHA field in your Contact Form 7 setup. This is done by adding a simple shortcode [your-recaptcha] to your form.
By following these steps, you'll integrate reCAPTCHA into your WordPress contact form, providing an extra layer of security against spam submissions.
Code
// Function to enqueue reCAPTCHA script
function wp_dudecom_enqueue_recaptcha_script() {
if (is_page('contact')) { // Adjust the condition to match your contact form page
wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_recaptcha_script');
// Function to display reCAPTCHA in Contact Form 7
function wp_dudecom_add_recaptcha_to_cf7($tag) {
if ($tag['name'] == 'your-recaptcha') {
return '<div class="g-recaptcha" data-sitekey="your-site-key"></div>'; // Replace 'your-site-key' with your actual site key
}
return $tag;
}
add_filter('wpcf7_form_elements', 'wp_dudecom_add_recaptcha_to_cf7');
// Function to verify reCAPTCHA response
function wp_dudecom_verify_recaptcha($result, $tags) {
$recaptcha_secret = 'your-secret-key'; // Replace 'your-secret-key' with your actual secret key
$recaptcha_response = $_POST['g-recaptcha-response'];
$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha_response}");
$response_body = wp_remote_retrieve_body($response);
$result_data = json_decode($response_body, true);
if (!$result_data['success']) {
$result->invalidate($tags['your-recaptcha'], 'reCAPTCHA verification failed. Please try again.');
}
return $result;
}
add_filter('wpcf7_validate', 'wp_dudecom_verify_recaptcha', 10, 2);
// Function to add reCAPTCHA field to Contact Form 7
function wp_dudecom_add_recaptcha_field() {
echo '<p>[your-recaptcha]</p>';
}
add_action('wpcf7_init', 'wp_dudecom_add_recaptcha_field');
Instructions
File Location: Add the code to your theme's functions.php
file or a custom plugin file.
Prerequisites:
- Ensure you have the Contact Form 7 plugin installed and activated.
- Obtain your site key and secret key from the Google reCAPTCHA website.
Implementation Steps:
- Load the reCAPTCHA Script:
- Locate the function
wp_dudecom_enqueue_recaptcha_script
in the code. - Ensure the condition
is_page('contact')
matches your contact form page slug or ID.
- Locate the function
- Display reCAPTCHA in Contact Form 7:
- Find the function
wp_dudecom_add_recaptcha_to_cf7
. - Replace
'your-site-key'
with your actual site key from Google reCAPTCHA.
- Find the function
- Verify reCAPTCHA Response:
- Locate the function
wp_dudecom_verify_recaptcha
. - Replace
'your-secret-key'
with your actual secret key from Google reCAPTCHA.
- Locate the function
- Add reCAPTCHA Field to the Form:
- Ensure the function
wp_dudecom_add_recaptcha_field
is present. - Add the shortcode
[your-recaptcha]
to your Contact Form 7 form where you want the reCAPTCHA to appear.
- Ensure the function
By following these steps, you will successfully integrate reCAPTCHA into your WordPress contact form, enhancing its security against spam and bots.
If you need further assistance or advanced functionality, consider reaching out to wp-dude.com for expert help.