Wpisy

Jak naprawić problemy z reCAPTCHA v2 po ostatnich aktualizacjach wtyczki Contact Form 7?

Po ostatniej aktualizacji wtyczki Contact Form 7 na moim formularzu kontaktowym przestała działać reCAPTCHA v2 (Checkbox I’m not a robot). Nie mam możliwości na jej dodanie z opcji formularza kontaktowego.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj1
Możemy to jednak naprawić. Aby móc korzystać z reCAPTCHA v2, najpierw musimy wygenerować specjalne klucze. W tym celu klikamy na link Integracje w sekcji Formularze. Następnie klikamy na link google.com/recaptcha.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj2
Link przenosi Nas na stronę główną dla reCAPTCHA (domyślnie jest to reCAPTCHA v3). Czyli nową zaporę dla spamująch botów.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj3
Klikamy na przycisk My reCAPTCHA w prawym górnym rogu.
Po przejściu na stronę z ustwieniami rejestrujemy nową witrynę. Podajemy etykietę (u mnie to ZALNET) i wybieramy reCAPTCHA v2 oraz Checkbox (Validate requests with the „I’m not a robot” checkbox).Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj4.
Podajemy nazwę lub nazwy domen, na których będzie dostępny formularz wraz z reCAPTCHA. Akceptujemy warunki usługi reCAPTCHA i klikamy przycisk Register.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj5Po rejestracji możemy zauważyć, ze system wygenerował dla Nas Site key i Secret key. Mamy też podany snippet do integracji z formularzem, który potem użyjemy.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj6
Teraz musimy zainstalować nową wtyczkę. Przechodzimy do sekcji Wtyczki i klikamy link Dodaj nową. W polu wyszukiwania (Szukaj wtyczek) wpisujemy „Contact Form 7 – reCAPTCHA v2” . W wynikach wyszukiwania wybieramy wtyczkę Contact Form 7 – reCAPTCHA v2 autorstwa IQComputing, którą następnie instalujemy i aktywujemy.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj11
Teraz przechodzimy do sekcji Formularze i klikamy link reCaptcha Version. Z listy rozwijanej na stronie wybieramy w liście rozwijanej zastępujemy Default Usage za pomocą reCaptcha Version 2. Klikamy przycisk Submit.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj12
Przechodzimy do sekcji Formularze i klikamy link Formularze (ten drugi, pod napisem Formularze z ikoną Listu). Klikamy opcję Edytuj dla formularza, do którego chcemy dodać reCAPTCHA.  Po przejściu na formularz, widzimy, że opcja reCAPTCHA jest dostępna w opcjach formularza. Nad kodem: [submit „Wyślij”] dodajemy etykietę z wiadomością dla użytkownika, np.: * Potwierdź, ze jesteś człowiekiem, a potem klikamy na opcję reCAPTCHA w opcjach formularza. Wybieramy wielkość (Size), skórkę (Theme) i klikamy przycisk Insert Tag.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj13
Nad elementem [recaptcha] wklejamy kod wygenerowany dla reCAPTCHA zaczynający się od <div …, czyli w moim przypadku <div class="g-recaptcha" data-sitekey="6LfBmoUUAAAAAAFSPxfH5EG7Z5tmrB66OY7Pf0goG"></div>. Klikamy na przycisk Zapisz w prawym górnym rogu.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj14
Ponownie klikamy na link Integracje w sekcji Formularze. Podajemy Klucz strony (Site key) i Sekretny klucz (Secret key) i klikamy przycisk Save changes.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj15
Przechodzimy ponownie do sekcji Formularze i kopiujemy kod skrótowy dla Naszego formularza. U mnie ten kod to [contact-form-7 404 "Nie znaleziono"]. Następnie przechodzimy do sekcji strony i wybieramy stronę, na której chcemy umieścić Nasz formularz kontaktowy. U mnie ta strona nazywa się Kontakt. Jeśli takiej strony nie mamy to możemy stworzyć nową. Wybieramy opcję Edytuj, aby wyedytować stronę.
Na stronie podajemy inne informacje dla użytkowników (np. zachęcające do wysłania wiadomości) i wklejamy kod wskazujący na wybrany przez Nas formularz. Klikamy przycisk Zaktualizuj po prawej stronie.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj10
Klikamy na bezpośredni odnośnik z linkiem, który pokaże Nam, jak teraz wygląda Nasza strona z formularzem. Możemy zauważyć, że na stronie mamy formularz wraz z reCAPTCHA.
Kiedy zaznaczymy, że nie jesteśmy robotem, wiadomość z formularza zostaje wysłana.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj16
Ale kiedy nie zaznaczymy tego checkboxa, nie ma możliwości wysłania formularza.
Jak naprawić ReCaptcha w Contact Form 7 po ostatniej aktualizacji_zdj17
W taki oto sposób możemy wciąż korzystać z reCAPTCHA v2 na stronie  z formularzem Contact Form 7.
Wpis ten jest aktualizacją wcześniejszego wpisu o dodawaniu reCAPTCHA v2 do formularza Contact Form 7, który możecie znaleźć tutaj.

Dostosowywanie strony głównej na blogu i tworzenie pierwszego wpisu

Teraz nadszedł czas na modyfikacje na stronie głównej i dodanie pierwszego wpisu. W tym celu przechodzimy na stronę główną i na dole klikamy link Edytuj (u mnie znajduje się on pod zdjęciem).
Zmieniam tytuł z The Journey Begins na swój własny, np. Poradnik, jak żyć z kotem i przeżyć. Zaznaczamy nasz tytuł po angielsku, klikamy przycisk Delete, a następnie wpisujemy nowy tytuł.
Tworzenie pierwszego wpisu 1
Dodajemy swoje własne powitanie dla osób odwiedzających blog, zmieniamy cytat lub go usuwamy całkowicie, dodajemy inne zdjęcie. Aby zmienić obrazek, klikamy na niego, a potem wybieramy ikonę kosza (Usuń). Następnie w przyborniku klikamy link +Dodaj i wybieramy Media. W następnym oknie klikamy przycisk Dodaj nowy i wybieramy zdjęcie. Po wszystkich zmianach klikamy przycisk Zaktualizuj, a potem Visit post.
Tworzenie pierwszego wpisu 2
Jeśli chcemy dodać nowy wpis klikamy na przycisk w prawym górnym rogu Nowy wpis. Pojawi Nam się formularz, na którym możemy dodać nowy wpis. Korzystając z dostępnych narzędzi do edycji, możemy do wpisu dodawać tekst, zdjęcia, wideo itd. Po wprowadzeniu wszystkich zmian klikamy Opublikuj.
Tworzenie pierwszego wpisu 3
 
Wszystkie zdjęcia, które dodajemy, możemy znaleźć w sekcji Media po lewej stronie.
Podczas tworzenia wpisu możemy do niego dodawać tagi lub kategorie, aby można było łatwiej wyszukiwać posty. Możemy też zarządzać widocznością posta.
Tworzenie pierwszego wpisu 6
Jeśli obecny motyw Nam się znudził lub zwyczajnie nie podoba, zawsze możemy zmienić go na inny. W tym celu w sekcji Personalizuj klikamy przycik Motywy. Mamy dostępne motywy darmowe i płatne.
Tworzenie pierwszego wpisu 4
Ja wybieram darmowy szablon o nazwie Radcliffe 2, klikam na niego i na górze klikam Aktywuj ten motyw. Motyw ten jest oznaczony jako Beginner, to znaczy że jest odpowiedni dla osób rozpoczynających przygodę z blogowaniem. Po zmianie motywu moja strona wygląda tak:
Tworzenie pierwszego wpisu 5
Zawsze, jak chcemy wrócić do edycji, klikamy na przycisk Moja witryna w lewym górnym rogu.
 

Dostosowywanie formularza kontaktowego na blogu stworzonym wg szablonu WordPressa

Jednym z kolejnych kroków, który powinniśmy wykonać, to dopasowanie formularza kontaktowego. Jest on wykorzystywany w sytuacji, gdy ktoś chce się z Nami skontaktować i wysłać wiadomość.
Aby przejść do ustawień formularza kontaktowego, należy po lewej stronie w sekcji Zarządzaj kliknąć link Strony witryny.
Zakładanie bloga na witrynie WordPress.com 14
Przechodzimy na stronę Contact.  Klikamy na przycisk Dostosowywanie bloga na witrynie WordPress.com 2 po prawej stronie.  W ustawieniach możemy zmienić obrazek wyróżniający, nazwę uproszczoną (zostanie zmieniona nazwa strony w adresie URL). Klikamy przycisk Zaktualizuj i podglądamy zmiany.
Dostosowywanie bloga na witrynie WordPress.com 3
Następnie klikamy na formularz i klikamy na znak edycji (ikona ołówka).
Dostosowywanie bloga na witrynie WordPress.com 4
 
Tutaj mamy możliwość edycji pól formularza, zmiany nazwy pól na polskie itd.
Dostosowywanie bloga na witrynie WordPress.com 5
Ja zmieniłam Name na Imię i nazwisko, Email na Adres email, Comment na Temat (zmieniam typ danych (Field Type) z Text Area na Tekst). Dodaję też nową kolumnę o nazwie Treść wiadomości  i z Field Type ustawionym na Text Area i zaznaczamy checkbox obok pozycji wymagane.
Dostosowywanie bloga na witrynie WordPress.com 6
Przechodzimy na zakładkę ustawienia. Na tej stronie możemy m.in. zmienić tytuł maili, które będą przychodziły na Naszą pocztę po wysłaniu wiadomości z wykorzystaniem formularza. Ja zmieniam tytuł Contact na Wiadomość z bloga. W polu tekstowym pod etykietą Wprowadź swój adres email podajemy adres email, na który mają być wysyłane maile. Klikamy na przycisk Zaktualizuj, aby zaktualizować formularz. Potem klikamy przycisk Zaktualizuj w prawym górnym rogu, aby zaktualizować całą stronę.Dostosowywanie bloga na witrynie WordPress.com 7
Po tych wszystkich zmianach klikamy link Visit page w prawym górnym rogu. Możemy teraz przetestować wysyłanie wiadomości. Aby wysyłanie wiadomości zadziałało, mail musi być wcześniej aktywowany. Wpisujemy swoje imię i nazwisko, adres email, tytuł i treść wiadomości. Klikamy przycisk Wyślij.
Dostosowywanie bloga na witrynie WordPress.com 8
Po wysłaniu wiadomości na stronie pojawia się podsumowanie.Dostosowywanie bloga na witrynie WordPress.com 9
Po przejściu na pocztę mailową sprawdzamy, czy mail dotarł i jak jest jego zawartość.
Dostosowywanie bloga na witrynie WordPress.com 10
Aby zmienić tytuł strony z Contact na Kontakt, należy zaznaczyć słowo Contact, kliknąć przycisk Delete, aby usunąć stary tytuł, a następnie wpisać nowy tytuł. Ja wybieram tytuł Formularz kontaktowy. Klikamy przycisk Zaktualizuj w prawym górnym rogu, aby zapisać zmiany i sprawdzamy rezultat.
Dostosowywanie bloga na witrynie WordPress.com 11
 
Aby zmienić angielskie nazwy w menu na polskie, należy w sekcji Personalizuj po lewej stronie kliknąć link Dostosuj. Z dostępnych opcji wybieramy Menu, klikamy na nagłówek Primary, potem na Home i tam zmieniamy etykietę nawigacji z Home na Strona główna (lub na taki, który Tobie pasuje). W taki sam sposób zmieniamy w menu Contact na Kontakt. Następnie klikamy przycisk Publikuj na górze, aby zapisać zmiany.
Tak jak widać tytuł strony został zmieniony, mamy także polskie menu.
 
 

Zakładanie bloga na witrynie WordPress.com

Aby założyć własnego bloga, możemy do tego celu użyć darmowego konta na witrynie WorPress.com.
W tym celu przechodzimy na stronę WordPressa i klikamy albo na przycisk Start Your Website po lewej stronie albo na link Get Started w prawym górnym rogu.
Zakładanie bloga na witrynie WordPress.com 1
W polu tekstowym pod etykietą Your email address podajemy Nasz adres emailowy.
W polu tekstowym pod etykietą Choose a username podajemy wybraną przez Nas nazwę użytkownika. Nazwa użytkownika musi być unikalna (żaden inny właścieciel bloga założonego na WordPressie nie może mieć takiej), może zawierać tylko małe litery i cyfry, nie może zawierać wielkich liter i znaków specjalnych.
W polu tekstowym pod etykietą Choose a password podajemy hasło. Powinno składać się z min. 6 znaków (wielkie i małe litery oraz cyfry).
Możemy też zamiast podawania emaila, nazwy użytkownika i hasła użyć konta Google.
Klikamy przycisk Continue i przechodzimy dalej.
Zakładanie bloga na witrynie WordPress.com 2
Następne przechodzimy do kroku drugiego. Wybieramy przeznaczenie naszej witryny, a także określamy poziom naszych umiejętności w tworzeniu witryn.
akładanie bloga na witrynie WordPress.com 3
Kolejny krokiem jest wybranie odpowiedniej domeny. Mamy do wyboru domenę bezpłatną lub płatne. Ja wybieram bezpłatną domenę .home.blog. Wybór domeny potwierdzamy klikając na odpowiedni przycisk Select.
Zakładanie bloga na witrynie WordPress.com 4
Mamy też możliwość dodania własnej domeny, o ile taką posiadamy.
Zakładanie bloga na witrynie WordPress.com 5
W kolejnym kroku wybieramy plan taryfowy dla naszego bloga. Ja wybieram darmowy plan, czli wersję Free. Aby potwierdzić wybór, należy kliknąć przycisk Start with Free.

Po tych krokach mamy stworzonego bloga.
Zakładanie bloga na witrynie WordPress.com 7
Otwierając drugą instancję przeglądarki i wpisując w pasku adres naszego bloga możemy zobaczyć, jak aktualnie on wygląda. Nasz blog posiada informację o ciasteczkach. Moją stronę można znaleźć pod adresem: https://jakdariazkotem.home.blog/. Jeśli chcesz ją zobaczyć kliknij tutaj .
Zakładanie bloga na witrynie WordPress.com 8
Teraz możemy przejść do ulepszania naszego bloga.
Po pierwsze klikamy na link Edit po prawej stronie napisu You updated your site title.  Na zakładce General możemy zmienić tytuł witryny, język wyświetlany dla wpisów i ikonę witryny. Ustawiamy też odpowiednią strefę czasową.
Zakładanie bloga na witrynie WordPress.com 9
Po tych zmianach możemy zauważyć, że informacje o ciasteczkach wyświetlają się po polsku, a tytuł na stronie został zmieniony zgodnie z moimi sugestiami (jest to tytuł ze spacjami).
Zakładanie bloga na witrynie WordPress.com 10
Następnie przechodzimy do ustawień profilu. Klikamy na ikonę Zakładanie bloga na witrynie WordPress.com 11 w prawym górnym rogu. Tam zmieniamy język interfejsu (przy zmianie ustawień polecenia będą wyświetlane po polsku, a nie po angielsku). Aby zatwierdzić Nasze zmiany klikamy przycisk Save Account Settings.
Zakładanie bloga na witrynie WordPress.com 12
Po zapisaniu zmian możemy zobaczyć, że wszystkie nasze ustawienia są teraz dostępne w języku polskim.
Zakładanie bloga na witrynie WordPress.com 13
Ostatnim krok, który mamy do wykonania na tym etapie to zalogowanie się na Naszą pocztę emailową i kliknięcie na link aktywacyjny od WordPressa, aby potwierdzić, że Nasz email jest prawidłowy i aktywny.
Po tych krokach mamy stworzonego i wstępnie skonfigurowanego bloga.

WordPress. Jak dodać captcha v2 „I’m not a robot” do formularza Contact Form 7

Tutorial ten pokazuje, jak dodać captcha (reCAPTCHA v2) do formularza Contact Form 7 w WordPressie.
Wersja WordPressa użyta w tym tutorialu to 4.9.8, a wersja Contact Form 7 to 5.0.5.
Wtyczka Contact Form 7 ma już wbudowaną funkcjonalność captcha.

1. Aby dodać reCAPTCHA do formularza, potrzebujemy konta Google i zarejestrowania strony oraz wygenerowanie kluczy API:

  1. Logujemy się do konta Google i otwieramy panel administratora reCAPTCHA.
  2. Rejestrujemy nową stronę: podajemy nazwę etykiety, wybieramy wersję captcha, wpisujemy nazwę domeny lub domen, na których chcemy używać captcha (rejestracja jest ograniczona do wpisanych nazw domen plus każdej jej poddomeny). Tzn. że jeżeli zarejestruję domenę zalnet.pl to zarejestrowana zostanie także poddomena blog.zalnet.pl.
  3. Klikamy przycisk Register.

Widok panelu admina reCAPTCHA
4. Po rejestracji otrzymujemy klucz strony (site key) i sekretny klucz (secret key).

 
2. Logujemy się do panelu administratora WordPress.

  1. Przechodzimy do sekcji Formularze -> Formularze -> Integracje.
  2. Znajdujemy sekcję reCAPTCHA i klikamy przycisk Konfiguruj klucze.

     3. Wpisujemy klucz strony i sekretny klucz w odpowiednie pola. Klikamy przycisk Zapisz.

4. Przechodzimy do sekcji Formularze -> Formularze i wybieramy formularz, do którego chcemy dodać captcha.
5. Na formularzu umieszczamy 2 wpisy:
a) <div class="g-recaptcha" data-sitekey="6LcV5XkUAAAAAH_SidWjXh6h1TqO02VcDKCivWSm"></div>, który pobieramy ze strony Google reCAPTCHA.
b) [recaptcha].

6. Klikamy przycisk Zapisz.
7. Po tych krokach widzimy, że na formularzu kontaktowym pojawił się nowy element: captcha.