Powrót do Dev Notes

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:

dodanie google reCaptcha do formularza WP Contact Form 7 dodanie google reCaptcha do formularza WP Contact Form 7 dodanie google reCaptcha do formularza WP Contact Form 7 dodanie google reCaptcha do formularza WP Contact Form 7 dodanie google reCaptcha do formularza WP Contact Form 7