Formularze kontaktowe pełnią niezwykle ważną rolę na stronie internetowej. Pisałem o tym więcej w artykule na temat optymalizacji pod konwersję. Odpowiednio skonfigurowane pola pozwolą na uzyskanie bardziej wartościowych zapytań ofertowych lub wiadomości od potencjalnych klientów. W tym poradniku pokażę Ci, jak krok po kroku dodać prosty formularz w witrynie opartej o system WordPress.
Na rynku dostępnych jest wiele darmowych i płatnych pluginów, dzięki którym możesz zrobić formularz na stronie. Przeglądając się jednak ich zabezpieczeniom, łatwo trafić na rozwiązania o bardzo słabej odporności na potencjalne ataki złośliwych skryptów.
Vulnerability to podatność na atak przez luki bezpieczeństwa. Oto pluginy, które posiadały przynajmniej jedną w ostatnim roku:
> WPForms – 1 vulnerability w 2023
> Elementor Forms – 1 vulnerability w 2023
> Ninja Forms – 6 vulnerabilities w 2023
> The Gravity Forms – 1 vulnerability w 2023
Często problemem nie są oryginalne pluginy, a ich rozszerzenia (add-ons).
O ile przy popularnych wtyczkach pracuje cały zespół i te dziury są szybko łatane, add-onsy tworzone są zazwyczaj przez pojedynczych developerów.
A oni mogą:
Poniżej przykłady rozszerzeń, które miały podatności w 2023 roku:
> Contact Form 7 – PayPal & Stripe Add-on
> Contact Form 7 Redirect & Thank You Page
> Themefic Ultimate Addons for Contact Form 7
> Gravity Forms DPS PxPay Plugin
> The Gravity Forms Google Sheet Connector
> WPForms Google Sheet Connector
Za pośrednictwem tych podatności, osoby trzecie mogą wstrzyknąć złośliwy kod na Twoją stronę. Warto wiedzieć tutaj jak usunąć wirusa z WordPressa, a przede wszystkim – jak skutecznie zabezpieczyć serwis.
Zwróć więc uwagę, jaki plugin do formularzy instalujesz w witrynie. W tym poradniku pokażę Ci jedno ze sprawdzonych rozwiązań – wtyczkę o nazwie Contact Form 7.
Bezpiecznie będzie skorzystać ze sprawdzonych wtyczek, takich jak Contact Form 7. Jeśli nie zainstalujesz potencjalnie niebezpiecznych dodatków, istnieje bardzo małe prawdopodobieństwo, że padniesz ofiarą ataku za pośrednictwem tej wtyczki.
Przejdź do Wtyczki > Dodaj nową, a w polu wyszukiwania wpisz nazwę nowego pluginu. Po chwili powinien pojawić się odpowiedni wynik:
Jak widzisz, wtyczka ma ponad 5 milionów aktywnych instalacji, jest zgodna z aktualną wersją WordPressa, a na dodatkowe ostatnia aktualizacja miała miejsce 3 dni temu. To istotne informacje – widać, że używa jej wiele osób, a developer ciągle wprowadza poprawki i dostosowuje plugin do nowych wersji systemu zarządzania.
Kliknij przycisk Zainstaluj, a następnie Włącz, by dodać wtyczkę do formularzy na swojej stronie www.
Obsługa wtyczki jest bardzo prosta. Warto znać jednak wszystkie ustawienia, by już na początku wprowadzić poprawną konfigurację Contact Form 7.
Po zainstalowaniu wtyczki, w panelu bocznym kokpitu powinna pojawić się nowa zakładka Kontakt. Odnajdź ją (jeśli jeszcze jej nie widzisz, spróbuj odświeżyć stronę) i wybierz Formularze kontaktowe:
Przejdziesz do listy formularzy. Na swojej stronie możesz posiadać ich kilka, np. inny formularz wyświetlać w stopce, a kolejny na stronie kontaktowej. Możesz też dostosować formularz do swojej oferty, gdy poszczególne usługi wymagają podania innych danych przez klienta.
Domyślnie, na początku zobaczysz na liście przykładowy formularz. Przejdźmy do jego edycji:
Formularze możesz projektować za pomocą tagów HTML oraz specjalnych shortcodów, w miejsce których wtyczka wstawie odpowiednie pole. Jak widzisz, masz tutaj całkiem sporo pól do wyboru, np. tekst, e-mail, telefon, czy pole wyboru. Klikając w dany przycisk, wstawisz konkretny element do swojego nowego formularza:
W konfiguracji pola, możesz ustawić:
Na końcu musisz kliknąć przycisk Wstaw tag, by umieścić nowe pole w swoim formularzu kontaktowym.
Po poprawnym wypełnieniu formularza, wiadomość z informacjami podanymi przez użytkownika musi trafić na Twoją skrzynkę. Możesz skonfigurować to w kolejnej zakładce o nazwie Adres e-mail:
Wtyczka wstawia tutaj domyślnie informacje zadeklarowane w ustawieniach WordPressa, czyli email administratora i tytuł witryny. Możesz zmienić te pola – wstaw adresy i tytuły, które będą dla Ciebie odpowiednie.
W Treść wiadomości, musisz następnie umieścić informacje, które użytkownik wpisze w formularzu. Masz tutaj do dyspozycji tagi wykorzystane w poprzedniej zakładce. Contact Form 7 podpowiada tutaj, które pola możesz wykorzystać, wypisując te nad polem Odbiorca:
Upewnij się, że wszystkie pola będą uwzględnione w mailu do Ciebie. W przeciwnym razie możesz nie być w stanie skontaktować się z klientem, który wysłał wiadomość.
W kolejnej zakładce Wiadomości, możesz zdefiniować alerty, który zostaną wyświetlone użytkownikom podczas wypełniania i próby wysłania formularza ze strony na WordPress:
Masz tutaj opcję wpisania dedykowanych komunikatów dla róznych sytuacji, np.:
Wtyczka wpisuje tutaj domyślne wartości, jednak możesz wymyślić własne, bardziej oryginalne komunikaty, które zobaczą użytkownicy.
Przeczytaj również: 3 sposoby na zabezpieczenie formularza przed spamem
Jeśli ukończysz konfigurację nowego formularza, czas na umieszczenie go w wybranych miejscach w serwisie. Możesz to zrobić na dwa sposoby:
Pod nazwą formularza zobaczysz specjalny kod, który możesz wkleić w obrębie witryny:
WordPress powinien automatycznie zamienić go na gotowy formularz kontaktowy.
Możesz również dodać formularz za pomocą edytora blokogowego. Wyszukaj blok nazwie takiej samej jak wtyczka, czyli Contact Fomr 7:
a następnie wybierz odpowiedni formularz z listy:
W ten sposób wstawisz go w wybranym miejscu w projekcie strony.
Następnym krokiem będzie ostylowanie pól formularza wedle Twojego gustu, by dopasować go do designu witryny. Pamiętaj również, by przetestować wysyłanie wiadomości oraz błędnie wypełnione pola. Upewnij się, że formularz kontaktowy działa jak należy, by skutecznie odbierać maile od klientów.
Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.