Formularz kontaktowy na stronie internetowej jest podstawowym elementem komunikacji pomiędzy użytkownikiem a właścicielem strony. Dlatego bardzo ważne jest, aby zadbać o jego prawidłowe funkcjonowanie, zabezpieczenie oraz bezpieczeństwo przesyłanych w nim danych.

W tym artykule przybliżę Ci:
  • jak dodać formularz na stronie WordPress,
  • jak zabezpieczyć formularz przed SPAM-em,
  • jak zapewnić bezpieczeństwo dla przesyłanych za pomocą formularza informacji.

Formularze kontaktowe w WordPress

Uruchomienie formularza kontaktowego na stronie jest wartościowe zarówno w przypadku prostego bloga, strony firmowej jak i sklepu internetowego. Jego uruchomienie zapewni Ci dodatkowe źródło komunikacji w między innymi obszarach wsparcia klientów, otrzymania opinii lub zapytania o ofertę.

Formularze kontaktowe na stronach WordPress mogą być dodane na kilka różnych sposobów. Najbardziej popularnym z nich jest instalacja odpowiedniej wtyczki, która zapewnia taką funkcjonalność. Poniżej przygotowaliśmy dla Ciebie mały ranking, z którego możesz skorzystać podczas tworzenia formularza kontaktowego na Twojej stronie 🙂

Contact Form 7

Contact Form 7 jest najpopularniejszą i w pełni darmową wtyczką dla WordPress, która zapewnia możliwość dodania na stronie formularza kontaktowego. Wtyczka jest bardzo prosta w obsłudze, mimo braku popularnego w ostatnim czasie mechanizmu przeciągnij i upuść. 

Formularze utworzone za pomocą tej wtyczki mogą być zintegrowane z zabezpieczeniem CAPTCHA oraz Akismet. Dzięki temu utworzony formularz może być odporny na ataki spamerskie. Na uwagę zasługuje również fakt możliwości jej rozbudowania o dodatkowe funkcjonalności za pomocą dedykowanych wtyczek.

Ninja Forms

Wtyczka Ninja Forms pozwala na tworzenie przyjemnych dla oka formularzy kontaktowych. Dostępna jest w wersji darmowej oraz płatnej. Przygotowywanie formularzy kontaktowych realizowane jest za pomocą mechanizmu przeciągnij i upuść.

Autorzy wtyczki przygotowali dla użytkowników kilka gotowych schematów pozwalających na szybkie utworzone formularzy dla między innymi:

  • formularza kontaktowego,
  • ankiety,
  • podania o pracę,
  • prośby o wycenę,
  • przesłania opinii klienta,
  • rejestracji na wydarzenie.

Wtyczka posiada również integrację z bramkami płatności PayPal oraz Stripe, a także zapewnia możliwość połączenia formularza z Newsletterem MailChimp. Możliwości wtyczki mogą być rozszerzone za pomocą płatnych dodatków, które pozwalają między innymi na utworzenie wielostronnych formularzy.

WPForms

WPForms podobnie jak Ninja Forms występuje w wersji darmowej i płatnej. Różnice pomiędzy obiema wersjami dotyczą głównie możliwości skorzystania z gotowych szablonów formularzy oraz dostępnych możliwości personalizacji.

Mimo tych ograniczeń, darmowa wersja również pozwala na tworzenie w pełni funkcjonalnych formularzy kontaktowych. Dodatkowo na uwagę zasługuje fakt możliwości jej integracji z wtyczką analityczną MonsteInsight. Takie połączenie pozwoli Ci na monitorowanie statystyk dla wiadomości przesyłanych przy pomocy formularzy.

Formidable Form Builder

Wtyczka Formidable jest prawdziwym kombajnem możliwości. Wtyczka dostępna jest w wersji darmowej, jednak część jej funkcji dostępna jest w kilku płatnych planach. Te, oprócz podstawowej funkcjonalności formularza kontaktowego, pozwalają na skorzystanie z ponad 50 gotowych templatek umożliwiających:

  • tworzenie badań NPS,
  • tworzenie sygnatur,
  • quizów,
  • formularzy rejestracyjnych,
  • dodawanie nowych postów na stronie,
  • integrację z bramkami płatności,
  • konfiguracje wariantów dla produktów w WooCommerce.

Tak jak powyższe wtyczki – WPForms oraz Ninja Forms, Formidable również posiada gotową integrację z zabezpieczeniem CAPTCHA.

Tworzenie formularzy na stronę internetową nie jest takie straszne.
Tworzenie formularzy na stronę internetową nie jest takie straszne.

Jak dodać formularz kontaktowy?

W ramach dzisiejszego artykułu pokażemy Ci jak dodać nowy formularz kontaktowy za pomocą wtyczki WPForms. Wybraliśmy tę wtyczkę, ponieważ jej konfiguracja jest naprawdę bardzo prosta.

Instalacja wtyczki WPForms nie różni się niczym od instalacji innych wtyczek dostępnych w repozytorium WordPress. Proces instalacji nowej wtyczki opisaliśmy dla Ciebie krok po kroku w ramach naszego poradnika dostępnego w bazie wiedzy – Jak zainstalować wtyczkę z poziomu panelu WordPress.

Wtyczka jest gotowa do pracy od razu po instalacji. Domyślnie po procesie instalacji dostępne są dwa formularze przygotowane przez autorów. Ich zadaniem jest zaznajomienie użytkownika z pracą oraz możliwościami wtyczki.
Aby zobaczyć zainstalowane formularze przejdź do menu WPForms, a następnie wybierz pozycję All Forms. Wyświetlona tabela będzie zawierała tytuł formularza oraz jego Shortcode – czyli krótki kod, który należy umieścić w treści strony w miejscu, w którym ma on zostać dodany.

Lista formularzy

Podpowiadamy: Jeśli chcesz podejrzeć na żywo utworzone formularz, wystarczy że najedziesz kursorem myszy na jego nazwę oraz klikniesz na odnośnik Preview

Edytujemy formularz kontaktowy

W ramach dzisiejszego przykładu, dokonamy wspólnie edycji domyślnie utworzonego formularza Contact Form. Aby rozpocząć edycję formularz kliknij na jego nazwę. Po przeładowaniu strony wyświetlone zostaną zakładki pozwalające na jego personalizację.

Edycja formularza kontaktu

To co rzuca się w oczy to praca na podglądzie edytowanego formularza. Domyślnie wtyczka dostępna jest w języku angielskim, zatem na początku dokonamy edycji wszystkich pól, tak aby ich treść była wyświetlana w języku polskim. W tym celu wystarczy kliknąć na edytowany element.

Na pasku bocznym zostaną wyświetlone szczegóły elementu podzielone na zakładki General oraz Advance. Zakładka ustawień ogólnych – General pozwala na:

  • zmianę etykiety pola – Label
  • jego formatu – Format,
  • opisu – Description,
  • oraz określenia czy pole jest wymagane do wypełnienia – Required.
Ustawienia ogólne formularza

Zakładka ustawień zaawansowanych – Advanced – pozwala na dodatkową personalizację formularza:

  • rozmiar pola tekstu – Field size,
  • nazwę pola – Placeholder,
  • jego domyślną treść – Default Value,
  • oraz możliwość ukrycia etykiety pola edytowanej w zakładce ustawień ogólnych – Hide Label.
Ustawienia zaawansowane formularza

Podpowiadamy: Zbędne elementy formularza mogą być usunięte, poprzez kliknięcie w ikonę kosza widoczną po najechaniu na edytowany element.

Po zakończonych pracach, wprowadzone zmiany należy zapisać klikając na przycisk Save.

Przycisk zapisania wprowadzonych zmian.

Podpowiadamy: Pełne możliwości jakie daje konfiguracja wtyczki dotyczące powiadomień i wiadomości potwierdzającej wysłanie formularza dostępne są w menu oznaczonym jako Settings. Zachęcamy jednak do zapoznania się ze wszystkimi możliwościami wtyczki w jej dokumentacji technicznej.

Jak dodać utworzony formularz na stronie?

Jeżeli zakończyłeś pracę nad formularzem, czas na jego umieszczenie na stronie. Sposoby dodawania formularza na stronie mogą być różne, w zależności od sposobu budowy Twojej strony internetowej. Dziś pokażemy Ci najprostszy sposób jego osadzenia, za pomocą gotowego Bloku Gutenberg.

Dodawanie formularza za pomocą Bloku Gutenberga:

1. Zaloguj się do swojego konta w WordPress, a następnie przejdź do edycji strony na której chcesz osadzić przygotowany wcześniej formularz.

2. Następnie kliknij na ikonę dodawania nowego Bloku Gutenberga. W wyświetlonej wyszukiwarce wpisz frazę “WPForms”.

Dodawanie bloku

Aby dodać nowy blok, kliknij na jego ikonę.

3. W wyświetlonej konfiguracji bloku, wybierz z listy utworzony formularz, który ma zostać wyświetlony.

Wybór utworzonego formularza

4. Po chwili nowy formularz zostanie osadzony na stronie. Aby zachować wprowadzone zmiany, zapisz nową wersję strony.

Podpowiadamy: Jeżeli w przyszłości dokonasz edycji formularza, wszystkie wprowadzone zmiany będą automatycznie widoczne na stronie, bez konieczności ponownego dodawania bloku WPForms.

Śmieciowe wiadomości.

Jak zabezpieczyć formularz przed SPAM-em?

Bardzo często formularze kontaktowe wykorzystywane są do masowej wysyłki śmieciowych wiadomości typu SPAM. Istnieje bardzo prosty sposób, aby zabezpieczyć tworzone formularze przed tego typu atakami. Jednym z najlepszych rozwiązań jest dostarczana przez firmę Google usługa reCAPTCHA. 

Opisywana w powyższych przykładach wtyczka WPForms wspiera wszystkie trzy wersje tego mechanizmu:

  • reCAPTCHA v2 – ten mechanizm prosi użytkowników o wykonanie zadania – na przykład przepisania kodu do odpowiedniego pola w celu udowodnienia, że ​​użytkownik jest człowiekiem,
  • reCAPTCHAv2 Invisible – wykorzystuje zaawansowaną technologię do automatycznego wykrywania prawdziwych użytkowników bez konieczności rozwiązywania zadania,.
  • reCAPTCHAv3 – korzysta z systemu punktacji użytkownika do wykrywania nadużyć jego ruchu w sieci.

Generowanie klucza witryny i tajnego klucza dla Google reCAPTCHA

Na potrzeby tego artykułu wykonamy konfigurację zabezpieczenia za pomocą mechanizmu reCAPTCHA v2 Invisible. W tym celu zaloguj się na swoje konto Google, a następnie przejdź na stronę Google reCAPTCHA

Powyższa strona pozwala na wygenerowanie specjalnych kodów autoryzacyjnych, które należy wprowadzić w konfiguracji wtyczki WPForms. Podczas wypełniania wniosku o przyznanie kodów autoryzacyjnych wprowadź następujące ustawienia:

  • Etykieta – pozwala na identyfikację i powiązanie kluczy z serwisem,
  • Typ reCAPTCHA – wybierz reCAPTCHA v2, Niewidoczna plakietka reCAPTCHA
  • Domeny – wprowadź adres URL swojej strony internetowej

Aby wygenerować klucze kliknij na przycisk Prześlij. Wynikowo po odświeżeniu strony zostaną wyświetlone klucze autoryzacyjne. Nie zamykaj tej strony, będą one potrzebne do konfiguracji wtyczki.

Generowanie kluczy reCAPTCHA

Konfiguracja zabezpieczenia reCAPTCHA w WPForms

Mając już wygenerowane klucze przejdź do ustawień wtyczki WPForms, w menu Settings. Następnie przejdź do widocznej u góry ekranu ustawień zakładki CAPTCHA. Aby wykonać konfigurację postępuj zgodnie z poniższymi krokami:

1. Z listy dostępnych zabezpieczeń wybierz opcję reCAPTCHA.

Wybór formy zabezpieczenia

2. Następnie wybierz typ Invisible reCAPTCHA v2. Korzystając z formularza, wypełnij go wygenerowanymi na stronie Google kluczami.

Konfiguracja reCAPTCHA

W sekcji Fail Message możesz zostawić wiadomość dla użytkownika, z informacją o niepowodzeniu weryfikacji. Wprowadzone dane zapisz klikając na przycisk Save Settings.

3. Następnie przejdź do edycji swojego formularza kontaktowego. W oknie edycji z listy dostępnych pól wybierz reCAPTCHA.

Moduły dla formularza

4. Jeżeli wprowadzone klucze autoryzacyjne będą prawidłowe, zwrócony zostanie komunikat z informacją o aktywacji zabezpieczenia dla tego formularza. Zatwierdź go klikając na przycisk OK.

Potwierdzenie aktywacji zabezpieczenia reCAPTCHA w formularzu.

5. Po potwierdzeniu aktywacji zabezpieczenia, na oknie formularza pojawi się również ikona Google reCAPTCHA.

Podgląd formularza kontaktowego.

Aby zachować wprowadzone zmiany konfiguracyjne kliknij na przycisk Save. To wszystko. Twój formularz został zabezpieczony przed atakami SPAMU.

Kłódka — symbol bezpieczeństwa

Jak jeszcze mogę zabezpieczyć formularz?

Bezpieczny formularz, to nie tylko taki, który jest odporny na ataki spamerów. Warto zadbać również o bezpieczeństwo przesyłanych za jego pomocą danych. Do tego celu należy wykorzystać certyfikat SSL. Certyfikat SSL to specjalny protokół sieciowy, którego zadaniem jest zabezpieczenia danych przesyłanych pomiędzy użytkownikiem strony WWW, a serwerem.

Szyfrowanie przesyłanych informacji obejmuje bardzo wrażliwe dane takie jak:

  • dane osobowe wprowadzane przez Twoich klientów w formularzach zakupowych,
  • dane autoryzacyjne dla kart płatniczych, kiedy taka forma płatności dostępna jest w sklepie internetowym,
  • podczas przesyłania informacji o płatności,
  • wiadomości przesyłane za pomocą formularza kontaktowego,
  • wiadomości przesyłane przy pomocy poczty e-mail.

O tym dlaczego certyfikat SSL jest ważny możesz przeczytać z naszego innego artykułu na naszym blogu. W ramach naszej oferty możesz również skorzystać zarówno z certyfikatów komercyjnych jak i darmowego certyfikatu Let’s Encrypt dostępnego dla wszystkich oferowanych usług hostingowych. Certyfikaty SSL dostępne w naszej ofercie pozwolą zabezpieczyć połączenie na Twojej stronie internetowej oraz wpłyną pozytywnie na jej odbiór wśród osób odwiedzających serwis.


Zabezpiecz swoją stroną internetową:

Ważne: Sama instalacja certyfikatu SSL nie jest w pełni wystarczająca. Prócz instalacji certyfikatu SSL konieczne jest również odpowiednie skonfigurowanie Twojej strony internetowej. Dla użytkowników WordPress przygotowaliśmy specjalny konfigurator strony, dzięki któremu nie potrzebujesz do zabezpieczenia swojej strony dodatkowych wtyczek. Poradnik opisujący jak uruchomić szyfrowanege połączenia na stronie WordPress w mniej niż 10 sekund dostępny jest w naszej bazie wiedzy.

Chcesz wiedzieć więcej o budowaniu stron na WordPress?

Zapraszamy również do naszych poprzednich wpisów, w których prowadzimy za rękę przez wszystkie etapy budowy strony na WordPress. W naszym poprzednich artykułach dowiesz się między innymi, czego potrzebujesz do uruchomienia swojej strony internetowej, na co zwrócić uwagę podczas wyboru motywu dla strony. Jeżeli szukasz źródła inspiracji zapraszamy również do naszego artykułu, w którym podpowiadamy skąd pobrać wysokiej jakości darmowe zdjęcia stockowe.

Autor:

Kamil Kołosowski

Od 3 lat Mnich w BOK Zenbox.pl. Hosting i Internet zna od środka. Autor artykułów i poradników dostępnych w bazie wiedzy oraz na blogu Zenbox. Badacz wszystkiego co związane nowymi technologiami. Po pracy - tato dwójki urwisów i pasjonat leśnych wędrówek. Ostatnio odkrył zamiłowanie do fotografii i zgłębia tajniki marketingu.

Może ci się spodobać również

płatności woocommerce
Porady - 2 sierpnia 2022 10:42

Jak zintegrować WooCommerce z bramkami płatności?

W poprzednim artykule pokazaliśmy Ci, w jaki sposób możesz stworzyć swój własny sklep internetowy oraz przeszliśmy przez jego podstawową konfigurację. Przyszedł czas na uruchomienie płatności w Twoim sklepie. Pokażemy Ci krok po kroku, w jaki sposób uruchomić płatności WooCommerce online oraz te za pobraniem. 

Więcej →

Jak otworzyć sklep internetowy?
Porady - 26 lipca 2022 8:32

Jak otworzyć sklep internetowy? Dzięki WooCommerce zrobisz to w jeden dzień!

Branża e-commerce rozwija się nieustannie, a co za tym idzie, coraz więcej przedsiębiorców myśli o założeniu sklepu internetowego. W końcu pomyślmy sami, kto z nas nie robi zakupów przez Internet? Może Ci się wydawać, że stworzenie swojego sklepu internetowego jest czymś trudnym do wykonania. Nic bardziej mylnego! Skrypt WordPress po raz kolejny staje na wysokości zadania i daje Ci możliwość stworzenia sklepu w łatwy sposób. Poznaj zatem wtyczkę WooCommerce!

Więcej →

Porady - 22 lipca 2022 10:25

Jak uruchomić wielojęzyczną stronę WordPress?

Internet jest miejscem, w którym przecinają się drogi wielu narodowości, które niekoniecznie porozumiewają się jednym językiem. Oczywiście, w kontekście historycznym możemy przyjąć, że językiem urzędowym Internetu jest język angielski, niemniej rozwój technologii przyczynił się do zwiększenia populacji użytkowników sieci. Co za tym idzie, pojawiła się konieczność by wykonać tłumaczenie treści umieszczanych w Internecie na inne, nie mniej rozpowszechnione języki.

Więcej →

Szanujemy Twoją prywatność

Na stronie internetowej używamy plików cookies lub podobnych technologii w celach zapewnienia poprawnego i bezpiecznego funkcjonowania strony, w celach analitycznych i statystycznych, dostosowywania strony do indywidualnych potrzeb Użytkowników oraz w celach reklamowych. Jeżeli wyrażasz zgodę na przetwarzania Twoich danych w powyższych celach, kliknij „Akceptuj wszystko”. Możesz nie wyrazić zgody na korzystanie przez nas z plików cookies pozyskanych przez Twoje urządzenia mobilne korzystając z możliwości kontynuacji korzystania ze stron internetowych w domenie zenbox.pl nie akceptując plików cookies, jak również poprzez zarządzanie ustawieniami plików cookies w Twoich przeglądarkach. Administratorem Twoich danych osobowych jest zenbox sp. z o.o. Więcej informacji dot. przetwarzania danych osobowych oraz korzystania z plików cookies znajdziesz w Polityce Prywatności.

Niezbędne pliki cookies

„niezbędne” pliki cookies - są niezbędne do funkcjonowania strony internetowej, umożliwiające korzystanie z usług dostępnych w ramach Serwisu, służące zapewnieniu bezpieczeństwa w korzystaniu z niego, np. wykorzystywane do wykrywania nadużyć w zakresie uwierzytelniania w ramach Serwisu.