Dodaj reCAPTCHA do formularza kontaktowego WordPress w celu ochrony przed spamem
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.
- Znajdź funkcję
- 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.
- Znajdź funkcję
- Zweryfikuj odpowiedź reCAPTCHA:
- Znajdź funkcję
wp_dudecom_verify_recaptcha
. - Zamień
'your-secret-key'
na swój rzeczywisty klucz tajny z Google reCAPTCHA.
- Znajdź funkcję
- 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.
- Upewnij się, że funkcja
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.