Add reCAPTCHA to WordPress Contact Form for Spam Protection

How to add recaptcha to wordpress contact form; Add captcha to wordpress form; Integrate recaptcha with contact form 7; Setup recaptcha on wordpress forms; Use google recaptcha for wordpress contact form; Wordpress contact form recaptcha setup; Add google captcha to wordpress form; How to protect wordpress forms with recaptcha; Wordpress form spam protection recaptcha; Install recaptcha on wordpress contact form;

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:

  1. 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.
  2. 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.
  3. Verify reCAPTCHA Response:
    • Locate the function wp_dudecom_verify_recaptcha.
    • Replace 'your-secret-key' with your actual secret key from Google reCAPTCHA.
  4. 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.

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.