<< powrót
Opublikowano 4 komentarze

Jak dodać reCaptcha do Contact Form 7 w WordPressie

Google Recatcha Contact Form 7

Korzystasz z wtyczki Contact Form 7 do WordPressa i otrzymujesz dużą ilość spamu? W tym poradniku pokażę Ci krok po kroku jak dodać reCaptcha do Contact Form 7. Wystarczy kilka chwil, żeby uwolnić się od spamu.

Co wybrać – reCaptcha v2 czy v3?

Każda z tych dwóch wersji ma swoje wady i zalety. Starsza wersja v2 udostępnia trzy opcje implementacji: sposób klasyczny z zadaniem do rozwiązania (przycisk „Nie jestem robotem”), Invisible captcha (badanie zachowania użytkownika) oraz wersja na Androida. Dla użytkowników rozwiązanie zadania nie stanowi problemu. Natomiast boty wysyłające automatyczne wiadomości mają z tym trudności. Wadą tego rozwiązania, jest to, że łatwo je obejść. Na rynku są firmy, które zatrudniają pracowników do zdalnego rozwiązywania testów. Osoby te nawet nie muszą wchodzić na daną stronę. Usługę rozwiązywania testów reCaptcha można wykupić za niewielkie pieniądze, a jej implementacja na stronie nie jest trudna i wymaga użycia prostego API.

jak dodać reCaptcha do Contact Form 7

ReCaptcha v3 jest następcą v2 i nie wymaga interakcji użytkownika ze stroną. Mechanizm bazuje na nowej technologii i przeprowadza analizę aktywności na stronie, m.in. ruch kursora myszy. Na tej podstawie samoczynnie rozpoznaje, czy ma do czynienia z człowiekiem, czy robotem. Użytkownik, chcąc wysłać wiadomość poprzez formularz, nie musi rozwiązywać żadnych zadań. Niestety wersja v3 ma jedną wadę. Do strony dodawana jest informacja, że strona korzysta z ReCaptcha v3. Owszem, nie ma nic złego, w tym, że twórcy zaznaczają, że jest to ich produkt. W końcu dzięki temu możemy z reCatcha korzystać za darmo. Wszystko byłoby w porządku, gdyby nie to, że okienko jest zafiksowane i jest cały czas widoczne podczas przewijania strony w dół. Staje się to dość uciążliwe, gdy chcemy dodać do strony np. live chat. Poza tym okienko może w niektórych przypadkach zepsuć szatę graficzną strony. Oczywiście teoretycznie można przy pomocy CSS ukryć okienko. Jednak jest to nieuczciwe i może skutkować wyłączeniem ochrony reCaptcha na naszej stronie.

jak dodać reCaptcha do Contact Form 7

Użyj reCaptcha v3, jeśli nie przeszkadza Ci okienko informacyjne. Natomiast, jeśli okienko nie pasuje do Twojej strony lub zasłanie treść, to użyj starszej wersji v2. Poniżej pokażę, w jaki sposób wdrożyć obie wersje.

Podpięcie reCaptcha v3 do Contact Form 7

W pierwszej kolejności należy wygenerować dwa klucze – klucz tajny oraz klucz witryny. W tym celu musisz zalogować się tutaj poprzez konto Google.

Po zalogowaniu musimy dodać domenę, pod którą wyświetlana jest nasza strona, a także zaznaczyć typ reCaptcha. W tym przypadku będzie to reCAPTCHA v3.

jak dodać reCaptcha do Contact Form 7

Po przesłaniu wypełnionych danych otrzymamy potrzebne klucze, które będzie trzeba przekopiować do naszej wtyczki Contact Form 7.

Z poziomu panelu administracyjnego WordPressa wybieramy Formularze-> Integracje.

Następnie w sekcji reCAPTCHA klikamy na przycisk Setup Integration.

jak dodać reCaptcha

Następnie należy w odpowiednie pola przekopiować klucz strony oraz klucz sekretny.

jak dodać reCaptcha

Od teraz nasz formularz kontaktowy będzie chroniony przez spamem.

Podpięcie starszej wersji reCaptcha v2

Klucze generuje się analogicznie jak w przypadku nowszej wersji v3. Jedynie podczas dodawania domeny, należy zaznaczyć wersję reCaptcha v2.

jak dodać reCaptcha

Niestety wtyczka Contact Form 7 nie wspiera już starszej wersji reCaptcha. Obejściem tego problemu jest zainstalowanie dodatkowej wtyczki Contact Form 7 Captcha twórców 247wd.

Po zainstalowaniu i aktywacji wtyczki należy przejść do jej ustawień: Wtyczki -> Zainstalowane wtyczki -> Contact Form 7 Captcha -> Settings.

jak dodać reCaptcha

Następnie należy przekopiować klucze. Dodatkowo możemy wpisać swój komunikat, który poinformuje użytkownika, że przed wysłaniem wiadomości musi uzupełnić reCaptcha.

jak dodać reCaptcha

W ostatnim już kroku musimy do naszego formularza dodać shortcode:

Z menu wybieramy: Formularze-> Formularze. Następnie w oknie edycji formularza należy wkleić powyższy shortcode.

Subskrybuj
Powiadom o
guest
4 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Maria
Maria
3 lat temu

Ciekawy artykuł.
Czy da się dodać reCaptcha v2 w formularzu tylko na jednej podstronie (zakładka Kontakt)?

Pozdrawiam

Edyta
Edyta
8 miesięcy temu

Dzień dobry, udało mi się naprawić formularz. bardzo dziękuję. Wysyła maila ale zamiast Badg’a wyświetla mi się coś takiego: [cf7sr-simple-recaptcha]. Jestem samoukiem.
Pewnie da się to jakoś łatwo naprawić. Mogę prosić o podpowiedź jak?

Zrzut-ekranu-2024-01-24-221232