dodanie google reCaptcha do formularza WP Contact Form 7

Połączenie google reCaptcha z formularzem WP Contact Form 7 pozwala na uniknięcie zalania naszej skrzynki pocztowej przez niechciany span i wiadomości od botów.

Co będziesz potrzebować?

• zainstaluj plugin do WordPress Contact Form 7 od Takayuki Miyoshi
• skonfiguruj usługę google reCaptcha na stronie reCaptcha klikając przycisk v3 Admin Console

Konfiguracja w Google reCaptcha

1. klikamy znak + (utwórz) znajdujący się w górnej-prawej stronie
2. nadajemy etykietę projektowi
3. wybieramy typ reCaptcha v3
4. dodajemy domeny jakie maja być chronione
5. zatwierdzamy przyciskiem Prześlij
6. wchodzimy w Ustawienia – ikona śrubki w górnej-prawej stronie
7. rozwijamy sekcję Klucze recaptcha
8. kopiujemy

Integracja reCaptcha z formularzem WP Contact Form 7

1. w opcjach pluginu WP Contact Form 7 wchodzimy w zakładkę Integracja
2. znajdujemy sekcję reCaptcha
3. klikamy przycisk Ustawienia integracji
4. ze strony (najlepiej w osobnym oknie przeglądarki) google reCaptcha pobieramy wartości kluczy:
   1. wchodzimy w Ustawienia – ikona śrubki w górnej-prawej stronie
   2. rozwijamy sekcję Klucze recaptcha
   3. kopiujemy klucz witryny
5. w panelu WP admina, opcjach pluginu WP Contact Form 7 w sekcji Integracja wklejamy w odpowiednim miejscu wartość klucza witryny
6. ze strony google reCaptcha kopiujemy tajny klucz
7.  w panelu WP admina, opcjach pluginu WP Contact Form 7 w sekcji Integracja wklejamy w odpowiednim miejscu wartość klucza tajnego
8. zapisujemy ustawienia przyciskiem Zapisz zmiany

Teraz nasza strona jest chroniona przez google reCaptcha.

Załadowanie kodu WP Contact Form 7 i google reCaptcha tylko na stronie z formularzem

Jeśli nasza strona ma tylko jeden lub niewielką liczbę formularzy, nie warto obciążać całości i dobrze jest wyłączyć dodawanie kodu plugina formularza i google reCaptcha tylko do wybranych stron.

Można to zrobić dodając w function.php kod, który usunie niepotrzebne skrypty ze wszystkich stron które nie są oparte na template page-tpl-kontakt.php

function contactform_dequeue_scripts() {
    if( !is_page_template('page-tpl-kontakt.php')) {
      wp_dequeue_script( 'contact-form-7' );
      wp_dequeue_script( 'google-recaptcha' );
      wp_dequeue_script( 'wpcf7-recaptcha' );
      wp_dequeue_style( 'wpcf7-recaptcha' );
      wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform_dequeue_scripts', 99 );

Wizualne dostosowanie

Sam znacznik google reCaptcha nie zawsze dobrze pasuje do naszego layoutu, możemy wtedy usnąć jego widoczność za pomocą styli css .grecaptcha-badge {visibility: hidden}, a informację o korzystaniu z google recaptcha zamieścić pod formularzem w postaci komunikatu, z odpowiednim podlinkowaniem informacji:

Ta strona jest chroniona przez reCAPTCHA i Politykę prywatności Google oraz Warunki korzystania z usług Google.

Screeny z paneli z kolejnych kroków: