Szybkie wsparcie: 511 280 732 lub czesc@woocado.pl
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak dodać formularz kontaktowy do strony na WordPress?

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.

Dlaczego wybór odpowiedniej wtyczki do formularzy jest istotny dla bezpieczeństwa?

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.

Jak zrobić formularz w WordPressie?

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:

instalacja contact form 7

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.

Jak skonfigurować Contact Form 7 krok po kroku?

Obsługa wtyczki jest bardzo prosta. Warto znać jednak wszystkie ustawienia, by już na początku wprowadzić poprawną konfigurację Contact Form 7.

Dodaj nowy formularz

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:

wordpress nowy formularz

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:

contact form 7 konfiguracja

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:

ustawienia pól w formularzu wordpress

W konfiguracji pola, możesz ustawić:

Na końcu musisz kliknąć przycisk Wstaw tag, by umieścić nowe pole w swoim formularzu kontaktowym.

Ustaw schematy wiadomości

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:

wiadomości zwrotne cf7

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:

edycja szablonu wiadomości

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ść.

Ustaw komunikaty dla błędu i poprawnie wysłanych formularzy

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:

walidacja formularza 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

Jak wyświetlić gotowy formularz na stronie opartej o WordPress?

Jeśli ukończysz konfigurację nowego formularza, czas na umieszczenie go w wybranych miejscach w serwisie. Możesz to zrobić na dwa sposoby:

Wklej shortocode w edytorze strony na WordPress

Pod nazwą formularza zobaczysz specjalny kod, który możesz wkleić w obrębie witryny:

shortcode formularza

WordPress powinien automatycznie zamienić go na gotowy formularz kontaktowy.

Skorzystaj ze specjalnego bloku

Możesz również dodać formularz za pomocą edytora blokogowego. Wyszukaj blok nazwie takiej samej jak wtyczka, czyli Contact Fomr 7:

wstawianie formularza na stronie

a następnie wybierz odpowiedni formularz z listy:

blok wtyczki contact form 7

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.

Zadbamy o Twoją stronę internetową

Wypełnij poniższy formularz, a nasz specjalista odezwie się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności