Dodaj reCAPTCHA do formularza kontaktowego WordPress w celu ochrony przed spamem

Jak dodać recaptcha do formularza kontaktowego WordPressDodaj captcha do formularza WordPressZintegrować recaptcha z formularzem kontaktowym 7Skonfiguruj recaptcha w formularzach WordPressUżyj google recaptcha w formularzu kontaktowym WordPressKonfiguracja recaptcha w formularzu kontaktowym WordPressDodaj google captcha do formularza WordPressJak chronić formularze WordPress za pomocą recaptchaOchrona formularzy WordPress przed spamem z użyciem recaptchaZainstaluj recaptcha w formularzu kontaktowym WordPress

Objaśnienie

Aby dodać reCAPTCHA do formularza kontaktowego WordPress, musisz wykonać kilka prostych kroków. Pomoże to chronić Twój formularz przed spamem i botami.

Krok 1: Załaduj skrypt reCAPTCHA

Najpierw upewnij się, że skrypt reCAPTCHA jest załadowany na Twojej stronie kontaktowej. Kod sprawdza, czy bieżąca strona to Twoja strona kontaktowa, a następnie ładuje niezbędny skrypt z Google. Dostosuj warunek, aby pasował do Twojej konkretnej strony kontaktowej.

Krok 2: Wyświetl reCAPTCHA w Contact Form 7

Aby pokazać widget reCAPTCHA w formularzu, kod dodaje filtr, który wstawia element reCAPTCHA. Pamiętaj, aby zastąpić 'your-site-key' swoim rzeczywistym kluczem witryny z Google reCAPTCHA.

Krok 3: Weryfikacja odpowiedzi reCAPTCHA

Gdy ktoś wyśle formularz, kod weryfikuje odpowiedź reCAPTCHA za pomocą Twojego klucza tajnego. Jeśli weryfikacja się nie powiedzie, formularz zostanie unieważniony, a użytkownik zostanie poproszony o ponowne spróbowanie. Upewnij się, że zastąpiłeś 'your-secret-key' swoim rzeczywistym kluczem tajnym.

Krok 4: Dodaj pole reCAPTCHA do formularza

Na koniec kod dodaje miejsce na pole reCAPTCHA w Twojej konfiguracji Contact Form 7. Można to zrobić, dodając prosty shortcode [your-recaptcha] do formularza.

Postępując zgodnie z tymi krokami, zintegrowasz reCAPTCHA z formularzem kontaktowym WordPress, zapewniając dodatkową warstwę zabezpieczeń przed spamem.

Kod
// 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');

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że masz zainstalowaną i aktywowaną wtyczkę Contact Form 7.
Pobierz swój klucz witryny oraz klucz tajny z witryny Google reCAPTCHA.

Kroki wdrożenia:

Załaduj skrypt reCAPTCHA:
- Znajdź funkcję wp_dudecom_enqueue_recaptcha_script w kodzie.
- Upewnij się, że warunek is_page('contact') odpowiada slugowi lub ID twojej strony formularza kontaktowego.
Wyświetl reCAPTCHA w Contact Form 7:
- Znajdź funkcję wp_dudecom_add_recaptcha_to_cf7.
- Zamień 'your-site-key' na swój rzeczywisty klucz witryny z Google reCAPTCHA.
Zweryfikuj odpowiedź reCAPTCHA:
- Znajdź funkcję wp_dudecom_verify_recaptcha.
- Zamień 'your-secret-key' na swój rzeczywisty klucz tajny z Google reCAPTCHA.
Dodaj pole reCAPTCHA do formularza:
- Upewnij się, że funkcja wp_dudecom_add_recaptcha_field jest obecna.
- Dodaj shortcode [your-recaptcha] do swojego formularza Contact Form 7 w miejscu, gdzie chcesz, aby reCAPTCHA się pojawiła.

Postępując zgodnie z tymi krokami, pomyślnie zintegrowasz reCAPTCHA z formularzem kontaktowym WordPress, zwiększając jego bezpieczeństwo przed spamem i botami.

Jeśli potrzebujesz dalszej pomocy lub zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.