Formularz kontaktowy to jeden z tych elementów które wyglądają prosto dopóki nie okaże się że maile nie dochodzą, checkbox RODO nie działa albo strona z podziękowaniem prowadzi donikąd.
W tym artykule budujesz formularz od zera, osadzasz go na stronie kontakt i sprawdzasz cały flow zanim klient zobaczy stronę.
Co będziesz budować
Formularz z czterema polami — imię, email, telefon (opcjonalny), wiadomość — z checkboxem zgody RODO i przekierowaniem na stronę z podziękowaniem po wysłaniu. Zbudowany w wbudowanym module Contact Form Divi 5, bez dodatkowych wtyczek.
Krok 1 — utwórz stronę z podziękowaniem
Zanim zaczniesz budować formularz, utwórz stronę z podziękowaniem. To ważne — formularz potrzebuje adresu URL do przekierowania zanim go skonfigurujesz.
W panelu WordPress utwórz nową stronę. Tytuł „Dziękujemy” albo „Wiadomość wysłana”. Treść prosta: potwierdzenie że wiadomość dotarła, informacja kiedy oddzwonisz albo odpiszesz, ewentualnie link do najważniejszej podstrony żeby klient nie utknął w ślepym zaułku.
Opublikuj stronę i skopiuj jej adres URL — będzie potrzebny za chwilę.
Ustaw tę stronę jako „noindex” w Yoast lub Rank Math żeby nie pojawiała się w wynikach wyszukiwania.
Krok 2 — dodaj moduł Contact Form
Otwórz stronę kontakt w Divi Builderze.
Dodaj nową sekcję i wiersz. W wierszu dodaj moduł Contact Form — znajdziesz go w liście modułów pod nazwą „Contact Form”.
Domyślnie moduł ma dwa pola — imię i email. Zaraz to rozbudujesz.
Krok 3 — skonfiguruj pola formularza
W ustawieniach modułu Contact Form, zakładka Content → Fields, widzisz listę pól. Każde pole możesz edytować, usunąć albo dodać nowe.
Pole Imię — zostaw domyślne. Zmień placeholder na „Twoje imię” jeśli chcesz. Zaznacz jako Required.
Pole Email — zostaw domyślne, typ „Email”. Placeholder „Adres email”. Required.
Pole Telefon — kliknij „Add New Field”. Typ „Text”. Label „Telefon”. Placeholder „Numer telefonu (opcjonalnie)”. Zostaw jako nieobowiązkowe — część klientów nie chce podawać telefonu i nie warto ich tym odstraszać.
Pole Wiadomość — typ „Textarea”. Label „Wiadomość”. Placeholder „W czym możemy pomóc?”. Required. W ustawieniach pola zwiększ liczbę wierszy do 5–6 żeby pole było wygodne do pisania.
Krok 4 — dodaj checkbox RODO
Kliknij „Add New Field”. Wybierz typ „Checkbox”.
W polu Label wpisz treść zgody — coś w stylu: „Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z Polityką Prywatności w celu odpowiedzi na moje zapytanie.”
Dodaj link do polityki prywatności bezpośrednio w tekście labela. Możesz to zrobić na dwa sposoby — i warto rozumieć różnicę między nimi.
Sposób z aria-label — działa, ale ma pułapkę:
Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z
<a href="/polityka-prywatnosci"
target="_blank"
rel="noopener noreferrer"
aria-label="Polityka Prywatności (otwiera się w nowej karcie)">
Polityką Prywatności
</a>.Problem polega na tym że aria-label zastępuje całą dostępną nazwę elementu — czytnik ekranu przeczyta tylko treść atrybutu i zignoruje tekst „Polityką Prywatności” który jest w DOM. W tym konkretnym przypadku wychodzi podobnie, ale gdyby tekst linku różnił się od aria-label — użytkownik czytnika słyszałby coś innego niż widzi użytkownik bez czytnika. aria-label ma sens gdy element nie ma żadnego widocznego tekstu — na przykład przycisk z samą ikoną hamburgera.
Sposób z ukrytym spanem — poprawny semantycznie:
Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z
<a href="/polityka-prywatnosci"
target="_blank"
rel="noopener noreferrer">
Polityką Prywatności
<span class="sr-only">(otwiera się w nowej karcie)</span>
</a>.Tu tekst linku pozostaje w DOM i jest widoczny dla wszystkich użytkowników. Klasa .sr-only ukrywa span wizualnie ale zostawia go dostępnym dla czytników ekranu. Użytkownik z czytnikiem słyszy „Polityką Prywatności, otwiera się w nowej karcie” — dokładnie tyle ile potrzebuje, bez rozbieżności między tym co widzi a tym co słyszy.
rel="noopener noreferrer" jest obowiązkowy przy każdym target="_blank" — bez tego nowa karta ma dostęp do obiektu window.opener strony macierzystej, co jest potencjalnym wektorem ataku.
Klasę .sr-only dodajesz w CSS swojego projektu — jeśli używasz Tailwinda masz ją gotową, jeśli nie to wystarczy:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Zaznacz pole jako Required — bez zaznaczenia zgody formularz nie powinien się wysłać.
Krok 5 — skonfiguruj wysyłkę
W zakładce Content → Email znajdziesz ustawienia wysyłki.
To — adres email na który mają trafiać wiadomości z formularza. Wpisz adres firmowy.
From Name — nadawca wiadomości. Możesz użyć dynamicznego pola — w polu From Name wpisz {field_id="1"} gdzie 1 to ID pola z imieniem. Wtedy wiadomość przychodzi z imieniem klienta jako nadawcą.
From Email — adres nadawcy. Ważna uwaga: nie wpisuj tutaj adresu klienta z formularza jeśli chcesz uniknąć problemów z dostarczalnością. Wpisz adres na tej samej domenie co hosting strony, na przykład noreply@twojastrona.pl.
Reply To — tutaj wpisz dynamiczne pole email klienta: {field_id="2"}. Dzięki temu gdy klikniesz „Odpowiedz” w kliencie pocztowym, odpowiedź trafi do klienta a nie na noreply.
Subject — temat wiadomości. Możesz wpisać stały tekst albo użyć dynamicznego pola: Nowa wiadomość od {field_id="1"}.
Message Pattern — treść wiadomości. Domyślnie Divi wysyła wszystkie pola. Możesz to zostawić albo dostosować format.
Krok 6 — ustaw przekierowanie po wysłaniu
W zakładce Content → Button znajdziesz opcję „Success Action”.
Zmień z „Show Message” na „Redirect”. W polu URL wklej adres strony z podziękowaniem którą stworzyłeś w Kroku 1.
Dzięki temu po wysłaniu formularza klient trafia na dedykowaną stronę zamiast widzieć komunikat w miejscu formularza. Profesjonalniej i daje Ci możliwość śledzenia konwersji przez Google Analytics — możesz ustawić cel na wejście na stronę /dziekujemy.
Krok 7 — ostyluj formularz
Domyślny wygląd modułu Contact Form jest funkcjonalny ale wymaga dostosowania do projektu.
W zakładce Design znajdziesz ustawienia dla każdego elementu formularza.
Pola — ustaw border z koloru pomocniczego z Design Variables. Radius taki jak w reszcie projektu. Padding 12–14px dla komfortu wypełniania na telefonie.
Przycisk — zastosuj preset Primary Button który masz już zdefiniowany. Dzięki temu przycisk formularza będzie spójny z resztą serwisu bez dodatkowej pracy.
Label — font i kolor zgodnie z typografią globalną. Zazwyczaj nieco mniejszy niż body text, 13–14px.
Focus state — w Design → Fields → Border Color on Focus ustaw kolor główny z Design Variables. Klient widzi który pole jest aktywne.
Krok 8 — napraw dostarczalność maili
To krok który większość osób pomija i potem zastanawia się czemu maile z formularza trafiają do spamu albo w ogóle nie dochodzą.
WordPress domyślnie wysyła maile przez funkcję PHP mail() która jest blokowana przez wiele serwerów pocztowych. Rozwiązanie to wtyczka SMTP która wymusza wysyłkę przez prawdziwy serwer pocztowy.
Zainstaluj wtyczkę WP Mail SMTP. W ustawieniach skonfiguruj jedną z opcji:
Jeśli hosting ma własny serwer SMTP — użyj danych z panelu hostingu. Zazwyczaj cohost, port 587, login i hasło do konta email.
Jeśli nie masz danych SMTP od hostingu — możesz użyć Gmail SMTP przez konto Google, albo serwisów jak SendGrid czy Mailgun które mają darmowe plany wystarczające dla formularzy kontaktowych.
Po konfiguracji WP Mail SMTP ma wbudowany test wysyłki — wyślij testową wiadomość i sprawdź czy dotarła.
Krok 9 — przetestuj cały flow
Przed publikacją przetestuj formularz jak prawdziwy użytkownik.
Wypełnij wszystkie pola testowymi danymi. Spróbuj wysłać bez zaznaczenia checkboxa RODO — formularz powinien zablokować wysyłkę. Zaznacz checkbox i wyślij — powinieneś zostać przekierowany na stronę z podziękowaniem.
Sprawdź skrzynkę mailową — czy wiadomość dotarła, czy nadawca i temat wyglądają poprawnie, czy Reply To jest ustawiony na adres z formularza.
Sprawdź formularz na telefonie — czy pola są wygodne do wypełnienia, czy przycisk jest dobrze widoczny, czy klawiatura nie zasłania aktywnego pola.
Kiedy wbudowany moduł nie wystarczy
Contact Form w Divi 5 obsługuje zdecydowaną większość prostych formularzy kontaktowych. Ale są sytuacje gdzie warto sięgnąć po dedykowaną wtyczkę:
Potrzebujesz warunkowych pól — pole pojawia się tylko gdy użytkownik wybierze konkretną opcję. WPForms i Gravity Forms obsługują to natywnie.
Chcesz integrację z CRM lub systemem mailingowym — automatyczne dodanie kontaktu do Mailchimp, HubSpot, Pipedrive po wysłaniu formularza. WPForms ma gotowe integracje.
Potrzebujesz plików do wysyłania — formularz gdzie klient może dołączyć brief albo zdjęcia. Divi Contact Form nie obsługuje załączników.
Chcesz zaawansowane powiadomienia — różne maile w zależności od wybranej usługi, powiadomienia SMS, kopie do kilku osób.
W tych przypadkach WPForms jest najprostszym wyborem — interfejs wizualny, dobra dokumentacja i pełna kompatybilność z Divi 5. Zbudowany formularz osadzasz na stronie przez shortcode albo dedykowany blok Gutenberga.