• Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt
Wyklikane.pl
  • Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt

Elementor

  • Strona główna
  • Elementor
  • Formularz kontaktowy Elementor z Google reCAPTCHA

Formularz kontaktowy Elementor z Google reCAPTCHA

  • Opublikowane przez Damian Kmieciak
  • Data 20 czerwca 2022
  • Komentarze 0 komentarzy
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

Google reCAPTCHA

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

Formularz kontaktowy Elementor z Google reCAPTCHA

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.

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Tag:Elementor, Elementor Pro, reCAPTCHA

  • Udostępnij:
author avatar
Damian Kmieciak

Programista, twórca gier i aplikacji na urządzenia mobilne oraz komputery PC. Projektant stron i sklepów internetowych, logotypów, wizytówek, opakowań, ulotek i etykiet. Ostatnio pracownik FIBARO odpowiedzialny za utrzymanie i rozwój strony internetowej.

Poprzedni wpis

Czym jest functions.php i dlaczego go nie edytować
20 czerwca 2022

Następny wpis

Jak i dlaczego stworzyć własną wtyczkę WordPress
4 lipca 2022

Może Ci się spodobać

Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
5 grudnia, 2022
przełącznik języka na ekranie logowania
Jak wyłączyć przełącznik języka na ekranie logowania
7 listopada, 2022
Jak przyspieszyć Elementor
Jak przyspieszyć Elementor
24 października, 2022

Znajdź na stronie

Kategorie

  • Darmowe motywy
  • Design / Grafika
  • Elementor
  • SEO / Optymalizacja
  • Serwer / IT
  • WooCommerce
  • WordPress

Najnowsze wpisy

Jak wymusić 9 cyfr numeru telefonu w WooCommerce
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
30st.2023
Jak zmienić nazwę sklepu WooCommerce
Jak zmienić nazwę sklepu WooCommerce
16st.2023
Jak wyświetlić polecane produkty
Jak wyświetlić polecane produkty w WooCommerce
02st.2023
Jak zbudować sklep internetowy
Jak zbudować sklep internetowy w WordPress
19gr.2022
Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
05gr.2022
Wyklikane Logo
+48 503 865 645
kontakt@wyklikane.pl