Formularz kontaktowy Elementor z Google reCAPTCHA

Cześć! Korzystając z okazji, że publikuję ostatnio poradniki o rozbudowie widżetu formularza kontaktowego Elementor Pro, chciałbym dziś pokazać, jak zabezpieczyć formularz kontaktowy Elementor z Google reCAPTCHA.

Proponuję Ci przy okazji dwa super wpisy o tym, jak zrobić w Elementorze automatycznie rozwijany formularz kontaktowy oraz dodać możliwość wyboru adresata wiadomości.  Pokazałem w nich, jak automatycznie rozszerzać pole wpisywanej wiadomości w miarę wpisywania treści oraz dać użytkownikowi możliwość wyboru, do kogo chce wysłać swoją wiadomość z formularza.

Dziś pokażę Ci, jak zabezpieczyć się przed spamem, czyli dużą ilością maili rozsyłanych przez złośliwe roboty i automaty wykorzystujące Twój formularz kontaktowy.

reCAPTCHA v2 vs reCAPTCHA v3

Jeśli zastanawiasz się czym różni się reCAPTCHA v2 od reCAPTCHA v3, już wyjaśniam.

reCAPTCHA v2 wymaga od użytkownika rozwiązania prostego quizu – tak, wszyscy lubimy zaznaczać przejścia dla pieszych 😉

reCAPTCHA v3 nie wymaga od użytkownika żadnych dodatkowych czynności. Algorytm Google na podstawie wielu czynników sam decyduje czy formularz kontaktowy został wypełniony przez człowieka czy przez spamującego robota.

Formularz kontaktowy Elementor z Google reCAPTCHA

Zabezpieczenie formularza jest bardzo proste. Procedurę podzielę na dwa etapy: wygenerowanie kluczy z darmowej usługi Google reCAPTCHA oraz rozbudowę samego formularza.

Wygenerowanie kluczy

1. Przejdź na stronę Google reCAPTCHA
2. Wpisz etykietę dla kluczy (pozwoli Ci na łatwą identyfikację witryny w przyszłości)
3. Wybierz metodę reCAPTCHA (proponuję v3). Jeśli wybierzesz v2 zobaczysz dodatkowe opcje weryfikacji użytkownika
4. Podaj adres witryny na której chcesz docelowo zabezpieczyć formularz kontaktowy
5. Sprawdź czy Twój adres e-mail się zgadza lub dodaj inny
6. Zaakceptuj warunki korzystania z usługi reCAPTCHA
7. Na następnej stronie zobaczysz wygenerowany Klucz Witryny (Site Key) i Tajny Klucz (Secret Key)
8. Skopiuj i wklej klucze w zakładce Elementor -> Ustawienia -> Integracje
9. Zapisz zmiany

Rozbudowa formularza kontaktowego

1. Przejdź do edycji strony, na której masz już formularz kontaktowy Elementor
2. Zaznacz swój formularz aby zobaczyć jego opcje w panelu po lewej stronie
3. Kliknij przycisk “Dodaj element”
   
4. W polu “Type” wybierz reCAPTCHA lub reCAPTCHA V3 w zależności od tego jaki klucz wcześniej wygenerowałeś
5. Wybierz z której strony pojawi się mała plakietka z logiem reCAPTCHA (zgodnie z warunkami korzystania z usługi reCAPTCHA)
6. Kliknij zielony przycisk “AKTUALIZUJ” żeby zapisać zmiany

Koniec ze spamem

To tyle! Nie musisz robić nic więcej. Jeśli chcesz, dla pewności, możesz przejść do swojej podstrony z formularzem i go przetestować. Gdyby nie plakietka z logiem, nawet nie zauważysz działania tego zabezpieczenia.

Masz pomysły na podobne poradniki dla Elementora? Daj mi znać w komentarzach!

PS. Jeśli chcesz otrzymywać powiadomienia mailowe o nowych wpisach na blogu, zapisz się do newslettera. Wrzucam też tam ciekawostki i nowości ze świata WordPress.