Formularze są niezbędne dla każdej strony internetowej — od prostych formularzy kontaktowych po złożone, wieloetapowe procesy rejestracji. Elementor Pro zawiera wbudowany widget Formularza, który w wielu przypadkach eliminuje potrzebę korzystania z oddzielnej wtyczki formularza. W tym przewodniku omówimy, jak tworzyć formularze kontaktowe, formularze rejestracyjne i formularze wieloetapowe za pomocą Elementor Pro, a także opcje integracji z usługami marketingu e-mailowego i CRM.
Ten samouczek wymaga Elementor Pro. Darmowa wersja Elementor nie zawiera widgetu Formularza.
Przegląd widgetu Formularza Elementor
Widget Formularza Elementor obsługuje następujące typy pól:
| Typ pola | Przykład użycia | Uwagi |
|---|---|---|
| Tekst | Imię, firma, temat | Pojedyncze pole tekstowe |
| Zbieranie adresów e-mail | Weryfikacja formatu e-maila | |
| Textarea | Treść wiadomości, komentarze, opisy | Wieloliniowy tekst z konfigurowalną liczbą wierszy |
| Tel | Numery telefonów | Wywołuje numeryczną klawiaturę na urządzeniach mobilnych |
| Liczba | Ilości, budżety, oceny | Weryfikacja min/max/krok |
| URL | Adresy stron internetowych | Weryfikacja formatu URL |
| Wybór | Wybory z rozwijanej listy (kraj, kategoria) | Pojedynczy lub wielokrotny wybór |
| Radio | Pojedynczy wybór z opcji (typ usługi) | Widoczne opcje bez rozwijanej listy |
| Checkbox | Wielokrotne wybory (zainteresowania, usługi) | Dozwolone wielokrotne wybory |
| Data | Daty spotkań, daty wydarzeń | Natychmiastowy wybór daty |
| Czas | Planowanie spotkań | Kontrola wyboru czasu |
| Przesyłanie plików | CV, dokument, przesyłanie obrazów | Konfigurowalne typy plików i limity rozmiaru |
| Akceptacja | Warunki i zasady, zgoda na RODO | Wymagane pole wyboru z linkiem |
| Ukryte | Dane śledzenia (adres URL strony, odsyłacz) | Niewidoczne dla użytkownika |
| reCAPTCHA | Ochrona przed spamem | Checkbox v2 lub niewidoczna v3 |
| Honeypot | Ochrona przed spamem (niewidoczna dla ludzi) | Ukryte pole, które łapie boty |
Tworzenie formularza kontaktowego
Krok 1: Dodaj widget Formularza
- Otwórz dowolną stronę w edytorze Elementor
- Wyszukaj "Formularz" w panelu widgetów
- Przeciągnij widget Formularza do swojego układu
- Domyślny formularz zawiera pola Imię, Email i Wiadomość
Krok 2: Skonfiguruj pola formularza
Dla standardowego formularza kontaktowego ta konfiguracja pól działa dobrze:
- Imię (Pole tekstowe, wymagane) – Placeholder: "Twoje imię"
- Email (Pole e-mail, wymagane) – Placeholder: "[email protected]"
- Temat (Pole tekstowe, opcjonalne) – Placeholder: "Jak możemy pomóc?"
- Wiadomość (Pole tekstowe, wymagane) – Placeholder: "Opowiedz nam o swoim projekcie...", Wiersze: 5
- reCAPTCHA lub Honeypot dla ochrony przed spamem
Krok 3: Skonfiguruj akcje po przesłaniu
W sekcji "Akcje po przesłaniu" skonfiguruj, co się dzieje, gdy użytkownik przesyła formularz: For related information, see our guide on Elementor complete guide.
- Email: Wyślij dane formularza na swój adres e-mail (lub wiele adresów)
- Przekierowanie: Przekieruj użytkownika na stronę z podziękowaniami po przesłaniu
- Popup: Wyświetl okno potwierdzenia
- Webhook: Wyślij dane formularza do zewnętrznego adresu URL (Zapier, Make, niestandardowe API)
- Mailchimp / ConvertKit / Drip: Dodaj subskrybentów do list marketingu e-mailowego
- Slack: Wyślij powiadomienia do kanału Slack
- Discord: Wyślij powiadomienia do webhooka Discord
Krok 4: Stylizuj formularz
W zakładce Styl dostosuj wygląd wizualny: For related information, see our guide on Elementor templates and kits.
- Układ formularza
- Typy pól: Pola ułożone w stos (pełna szerokość) lub w linii (obok siebie)
- Stylizacja pól: Obramowanie, kolor tła, padding, promień obramowania, kolor stanu fokusa
- Stylizacja etykiet: Rodzina czcionek, rozmiar, kolor, odstępy
- Stylizacja przycisków: Kolor tła, kolor tekstu, obramowanie, efekty najechania, opcja pełnej szerokości
- Wiadomości: Kolory i typografia wiadomości o sukcesie i błędzie
Tworzenie formularza wieloetapowego
Formularze wieloetapowe są przydatne w przypadku długich formularzy (rejestracje, aplikacje, ankiety), gdzie pokazanie wszystkich pól naraz może przytłoczyć użytkowników. Elementor Pro natywnie obsługuje formularze wieloetapowe. For related information, see our guide on creating landing pages with Elementor.
Jak skonfigurować kroki
- Dodaj widget formularza do swojej strony
- Na liście pól formularza dodaj typ pola "Krok" pomiędzy grupami pól
- Każde pole Krok tworzy nowy krok z przyciskami "Dalej" i "Wstecz"
- Przykładowa struktura:
- Krok 1: Imię, Email, Telefon (Informacje osobiste)
- Krok 2: Firma, Budżet, Harmonogram (Szczegóły projektu)
- Krok 3: Wiadomość, Przesyłanie pliku (Dodatkowe informacje)
Formularze wieloetapowe wyświetlają wskaźnik postępu, który pokazuje, na którym kroku znajduje się użytkownik. To zmniejsza postrzeganą złożoność i poprawia wskaźniki ukończenia w porównaniu do pokazywania wszystkich pól naraz.
Tworzenie formularza rejestracji użytkownika
Elementor Pro może tworzyć formularze rejestracji użytkowników WordPressa bez oddzielnej wtyczki:
- Dodaj widget formularza i skonfiguruj pola (Nazwa użytkownika, Email, Hasło)
- W sekcji "Akcje po przesłaniu" dodaj akcję "Zarejestruj"
- Mapuj każde pole formularza do odpowiadającego pola użytkownika WordPressa
- Ustaw domyślną rolę użytkownika dla nowych rejestracji
- Opcjonalnie przekieruj użytkowników na stronę ich konta po rejestracji
Uwaga: WordPress domyślnie wymaga zatwierdzenia nowych użytkowników przez administratora. Możesz to zmienić w Ustawienia → Ogólne → Członkostwo, jeśli chcesz, aby użytkownicy rejestrowali się swobodnie.
Integracja z usługami marketingu e-mailowego
Elementor Pro integruje się bezpośrednio z popularnymi platformami marketingu e-mailowego:
Usługa Typ integracji Kroki konfiguracji Mailchimp Natywna (wbudowana) Dodaj klucz API → Wybierz listę → Mapuj pola ConvertKit Natywna (wbudowana) Dodaj klucz API → Wybierz formularz → Mapuj pola ActiveCampaign Natywna (wbudowana) Dodaj dane uwierzytelniające API → Wybierz listę → Mapuj pola Drip Natywna (wbudowana) Dodaj token API → Wybierz konto → Mapuj pola GetResponse Natywna (wbudowana) Dodaj klucz API → Wybierz kampanię → Mapuj pola MailerLite Natywna (wbudowana) Dodaj klucz API → Wybierz grupę → Mapuj pola HubSpot Via Webhook Utwórz połączenie Zapier/Make z akcją webhook Dla każdej integracji proces wygląda następująco: wprowadź klucz API swojej usługi w ustawieniach integracji Elementor, a następnie wybierz tę usługę jako "Akcję po przesłaniu" w swoim formularzu. Mapuj pola formularza do pól usługi, a subskrybenci będą automatycznie dodawani po przesłaniu formularza.
Strategie ochrony przed spamem
Formularze kontaktowe przyciągają boty spamowe. Elementor Pro oferuje kilka opcji zapobiegania spamowi:
- Google reCAPTCHA v3: Niewidoczna detekcja spamu, która ocenia przesyłki bez interakcji użytkownika. Zalecana dla większości formularzy
- reCAPTCHA v2: Pole wyboru "Nie jestem robotem". Bardziej widoczne, ale może zmniejszać wskaźniki ukończenia formularzy
- Pole honeypot: Niewidoczne pole, które wypełniają boty. Jeśli pole zawiera dane, przesyłka jest odrzucana. Nie wymaga interakcji użytkownika
- Pole akceptacji: Wymagane pole wyboru (zgoda RODO, akceptacja warunków), które również działa jako odstraszacz dla botów
Zalecamy użycie reCAPTCHA v3 w połączeniu z polem honeypot. To zapewnia dwie warstwy ochrony przed spamem bez widocznego wpływu na...
W doświadczeniu użytkownika.
Elementor Forms vs Dedykowane Wtyczki Formularzy
Funkcja Elementor Forms Gravity Forms WPForms Wizualny Edytor W edytorze Elementor Osobny drag-and-drop Osobny drag-and-drop Logika Warunkowa Podstawowa (pokazuj/ukrywaj pola) Zaawansowana Zaawansowana Integracja Płatności Przycisk PayPal Stripe, PayPal, Square Stripe, PayPal, Square Obliczenia Nie Tak Tak (Pro) Wielostopniowy Tak Tak Tak Przesyłanie Plików Tak Tak Tak Zarządzanie Wpisami Poprzez zgłoszenia Elementor Pełny menedżer wpisów Pełny menedżer wpisów Wymaga Edytora Stron Tak (Elementor Pro) Nie Nie Elementor Forms jest wystarczający do formularzy kontaktowych, zapisów na newsletter i prostych formularzy rejestracyjnych. Dla bardziej złożonych formularzy wymagających przetwarzania płatności, zaawansowanej logiki warunkowej lub skomplikowanego zarządzania wpisami, dedykowane wtyczki formularzy, takie jak Gravity Forms lub WPForms, są bardziej odpowiednie.
Najczęściej Zadawane Pytania
Czy mogę używać formularzy Elementor bez Elementor Pro?
Nie. Widget Formularza jest dostępny wyłącznie w Elementor Pro. Jeśli potrzebujesz formularzy w darmowej wersji Elementor, użyj osobnej wtyczki formularza, takiej jak Contact Form 7 (darmowa), WPForms Lite (darmowa) lub Gravity Forms (premium).
Gdzie są przechowywane zgłoszenia formularzy Elementor?
Zgłoszenia formularzy są przechowywane w bazie danych WordPress i dostępne w Elementor → Zgłoszenia w panelu administracyjnym. Możesz przeglądać, eksportować (CSV) i usuwać zgłoszenia. Zgłoszenia są również wysyłane na adresy e-mail, które skonfigurujesz w akcji E-mail.
Czy formularze Elementor mogą akceptować przesyłanie plików?
Tak. Dodaj typ pola Przesyłanie Plików do swojego formularza. Możesz skonfigurować akceptowane typy plików (PDF, JPG, PNG, DOCX itp.) oraz maksymalny rozmiar pliku. Przesłane pliki są przechowywane w bibliotece mediów WordPress i powiązane z zgłoszeniem formularza.
Jak dodać logikę warunkową do formularzy Elementor?
Elementor Pro obsługuje podstawową logikę warunkową: pokazuj lub ukrywaj pola w zależności od wartości innego pola. W ustawieniach pola włącz "Warunkowe" i ustaw warunki (np. pokaż pole "Firma" tylko wtedy, gdy zaznaczony jest przycisk radiowy "Jestem firmą"). Dla zaawansowanej logiki warunkowej (obliczenia, wielopoziomowe warunki) dedykowana wtyczka formularza może być bardziej odpowiednia.
Czy mogę tworzyć formularze popup w Elementor?
Tak. Utwórz szablon popup w Elementor, dodaj do niego widget Formularza i ustaw warunki wyzwalania (kliknięcie, procent przewijania, zamiar wyjścia, opóźnienie czasowe). Jest to przydatne do zapisów na newsletter, lead magnetów i ofert promocyjnych bez dodawania formularza do głównego układu strony.
Jak zapobiegać spamowi w formularzach Elementor?
Użyj Google reCAPTCHA v3 (niewidoczny) w połączeniu z polem Honeypot dla dwuwarstwowej ochrony. To blokuje zautomatyzowane boty bez dodawania opóźnień dla prawdziwych użytkowników. Dla formularzy o dużej ilości spamu rozważ dodanie pola Akceptacji (wymagana checkbox) jako trzeciej warstwy.
Zdobądź Elementor Pro z Edytorem Formularzy
Uzyskaj dostęp do widgetu Formularza, Edytora Motywów, Edytora WooCommerce i 100+ widgetów Pro. Twórz formularze wizualnie bez dodatkowych wtyczek.
Przeglądaj Elementor Pro →
