Formularz kontaktowy WordPress – Contact Form 7

Na każdej stronie powinien znajdować się formularz kontaktowy. Jest kilka wtyczek formularzy wartych polecenia, ale do zwykłego i prostego formularza kontaktowego polecam użyć darmowej wtyczki Contact Form 7.

Contact Form 7 to jedna z najpopularniejszych i najstarszych wtyczek formularzy kontaktowych WordPress. Jednak pomimo popularności wiele osób ma problem z konfiguracją tej wtyczki. Po przeczytaniu tego poradnika będziesz wiedział jak skonfigurować wtyczkę Contact Form 7.

Najważniejsze cechy Contact Form 7

Jest to jedna z najbardziej popularnych wtyczek, ma ponad 5 milionów aktywnych instalacji. Oto niektóre z zalet tej wtyczki:

• Łatwe tworzenie i zarządzanie wieloma formularzami
• Proste ustawianie pól formularza
• Proste znaczniki do zmiany treści
• Możliwość umieszczenia formularza w dowolnej stronie lub poście za pomocą shortcode
• Filtrowanie spamu za pomocą Akismet czy CAPTCHA
• Wiele rozszerzeń innych firm, które dodają dodatkową funkcjonalność
• Bezpłatny

Jak zainstalować Contact Form 7

Pierwszą rzeczą jaką musimy zrobić to pobranie wtyczki z repozytorium WordPress. W kokpicie WordPress wybierz kolejno Wtyczki -> Dodaj nową i w wyszukiwarce wpisz „Contact form 7”, a następnie aktywuj. Po aktywacji możesz znaleźć funkcjonalność wtyczki w nowym obszarze Kontakt na pulpicie nawigacyjnym WordPress.

Jeśli jeszcze nie wiesz jak instalować wtyczki to przeczytaj: Jak zainstalować wtyczkę WordPress

Jak skonfigurować Contact Form 7

Kiedy już pobrałeś i aktywowałeś wtyczkę możesz zająć się stworzeniem swojego formularza. W tym celu wejdź kolejno Formularze -> Dodaj nowy

Nadaj nazwę nowemu formularzowi kontaktowemu, a następnie przewiń w dół do Formularza.

• Zakładka „Formularz”

Tutaj konfigurujemy szablon naszego formularza, jeśli to ma być zwykły formularz kontaktowy to w zupełności wystarczy nam ten domyślny. Możesz jednak dodać dodatkowe pola, w zależności od potrzeb witryny. Aby to zrobić, możesz wybrać odpowiedni przycisk generatora znaczników, aby wygenerować poprawny znacznik formularza. Na przykład, aby dodać pole URL, wystarczy kliknąć przycisk URL.

Przykład:

<label>
Strona WWW:
[url url-716] </label>

Pamiętaj, aby po zakończeniu kliknąć Zapisz u dołu strony.

• Email

W tym miejscu możesz edytować szablon email.  Jest to szablon wiadomości e-mail, którą otrzymasz po wysłaniu formularza kontaktowego. W polu Do sprawdź, czy adres e-mail jest poprawny, ponieważ tutaj będzie wysyłana korespondencja z formularza kontaktowego.

Contact Form 7 umożliwia bardzo elastyczną edycję szablonów poczty. Możesz edytować nie tylko treść wiadomości, ale także pola nagłówka wiadomości.

Wypełniamy tutaj:

Odbiorca: (wymagane) Tutaj wpisujemy maila na którego mają przychodzić wiadomości wysyłane za pomocą formularza kontaktowego.

Nadawca: (wymagane) Email z którego formularz wysyła wiadomość. Możemy tutaj edytować nazwę która jest przed znacznikiem „<”

Temat: (wymagane) Wpisujemy temat + znacznik „[your-subject]” czyli wpisany tytuł przez osobę wysyłającą wiadomość z formularza.

Treść: Dodaj dodatkowe znaczniki formularza wygenerowane przez Ciebie wcześniej w zakładce „Formularz”. Zapewni to, że po otrzymaniu wiadomości e-mail za pośrednictwem formularza kontaktowego zostaną wyświetlone wszystkie informacje, o które poprosiłeś nadawcę.

• Komunikaty

Konfigurujemy wszystkie komunikaty generowane przez wtyczkę. Możesz dowolnie zmieniać treść komunikatów, ale te domyślne są całkiem okej.

Integracja reCAPTCHA

Konfiguracja reCAPTCHY pomoże Ci w walce ze spamem, aby prawidłowo skonfigurować reCAPTCHE przejdź do Formularze > Integracje.

Będziesz musiał teraz wygenerować klucz API i sekretny klucz. Przejdź do tej strony: reCAPTCHA i kliknij „Admin Console”.

Wygeneruj klucz API oraz Sekretny klucz i wklej w „Setup Integration”

reCAPTCHA v3 nie potrzebuje widgetu CAPTCHA (pole wyboru „Nie jestem robotem” używane w reCAPTCHA v2) do pracy więc nie są potrzebne znaczniki [recaptcha].

Wstaw formularz kontaktowy

Na sam koniec pozostaje Ci wstawić formularz do wpisu lub strony za pomocą wygenerowanego shortcode.

Przejdź kolejno do Strony > Dodaj nową. Wpisz nazwę strony „Kontakt”, a w treści wklej shortcode Twojego formularza. Na koniec kliknij „Opublikuj”.

Teraz możesz dodać stronę swojego formularza kontaktowego do menu, aby to zrobić kliknij: Wygląd > Menu i przeciągnij stronę „Kontakt” do odpowiedniego menu.