Jak dodać formularz do WordPressa: Kompletny przewodnik

Przynajmniej w pewnym momencie większość stron WordPress przekracza podstawy. Potrzebujesz przyjmować rezerwacje, zbierać briefy projektowe, umożliwiać zapisy na wydarzenia, zbierać opinie po zakupie lub przyjmować zapytania o zamówienie z niestandardowymi specyfikacjami. Każde z tych zadań wymaga innego rodzaju formularza — innych pól, innej logiki, innego układu — a WordPress nie ma wbudowanego kreatora formularzy, który to wszystko obsłuży.

Ten przewodnik przeprowadzi Cię przez dodanie formularza do WordPressa przy użyciu Kreatora formularzy Elfsight – bezkodowego edytora wizualnego, który działa na każdej konfiguracji WordPress bez instalowania wtyczek. Przeprowadzimy Cię przez cały proces, od wyboru typu formularza po osadzenie go na stronie na żywo, wraz z metodami alternatywnymi i kiedy każda z nich ma większy sens.

Szybka konfiguracja w 5 minut: Dodaj formularz w WordPress

Jeśli wiesz, czego potrzebujesz i chcesz to uruchomić od razu, oto szybka droga do dodania formularzy do WordPress w kilku prostych krokach:

1. Otwórz edytor Kreatora formularzy i wybierz szablon
2. Skonfiguruj i dostosuj widget formularza
3. Kliknij „Dodaj do witryny” i skopiuj kod osadzania
4. Wklej fragment kodu do zaplecza WordPress → Opublikuj

🚀 Zbuduj własny formularz WordPress od razu w interaktywnym edytorze!

Kiedy i dlaczego dodawać formularze na stronę WordPress

Prawdopodobnie nie musimy tłumaczyć, dlaczego Formularze są użyteczne — jesteś tutaj, bo już ich potrzebujesz. Jednak typ formularza, który tworzysz, oraz gdzie go umieszczasz, mają równie duże znaczenie jak same instrukcje. Oto najczęstsze sytuacje i co w nich priorytetować.

💬 Kontakt i pozyskiwanie leadów

Najczęściej zaczyna się od formularza kontaktowego, zapisu na newsletter lub formularza leadowego na stronie docelowej. Jedna rzecz, którą większość ludzi pomija: dodanie pojedynczego uporządkowanego pola, na przykład rozwijanej listy „O czym to jest?” — oszczędza godziny sortowania skrzynki. Aby pozyskiwać leady bez dedykowanej strony, dobrze sprawdzają się wyskakujące okienka i panele wyświetlające na krawędzi ekranu — aktywują się po kliknięciu przycisku lub zajmują krawędź ekranu bez zajmowania miejsca na stronie.

📅 Rezerwacje, zapisy i wizyty

Restauracje, salony, nieruchomości na wynajem, konsultanci — jeśli Twój biznes opiera się na ustalonych terminach, formularz rezerwacyjny zastępuje żmudne umawianie telefoniczne. Zbieraj niezbędne dane (data, godzina, typ usługi, dane kontaktowe) i powstrzymaj się od dodawania pól, które służą Twoim wewnętrznym operacjom, ale irytują odwiedzających.

💲 Zamówienia i darowizny

Formularze zamówień obejmują scenariusze, w których zakup nie jest prostym dodaniem do koszyka — druk na zamówienie, catering, sprzedaż hurtowa, pakiety usług z konfigurowalnymi opcjami. Połącz je z polami do przesyłania plików, gdy klienci muszą dołączyć logo lub brief projektowy. Formularze darowizn są z natury proste, ale także warunkowe pola pomagają — pokaż opcje częstotliwości powtarzania dopiero wtedy, gdy darczyńca wyrazi zgodę.

📋 Opinie zwrotne, recenzje i ankiety

Oceny (gwiazdki, skale liczb, emocje) plus opcjonalne pole z komentarzem. Trzymaj to krótkie — formularz opinii z 3 polami generuje znacznie więcej odpowiedzi niż ten z 10 polami. Jeśli chcesz mieć uporządkowane referencje do ponownego wykorzystania na stronie, dodaj imię, stanowisko i ocenę gwiazdkową obok komentarza, aby uzyskać cytaty do publikacji, a nie ogólne krótkie uwagi.

📑 Rejestracje, członkostwa i zgłoszenia

Zapisy wydarzeń, formularze członkostwa, aplikacje o pracę, zapisy do programów — to zwykle dłuższe formularze, i to właśnie tutaj sprawdzają się układy wielostopniowe. Podzielenie formularza o 12 pól na trzy kroki z paskiem postępu znacząco ogranicza porzucanie. Formularze aplikacyjne szczególnie korzystają z logiki warunkowej (wyświetlaj inne pytania w zależności od wybranej roli lub programu) oraz pól do przesyłania CV lub portfolio.

Poziom złożoności powinien odpowiadać decyzji: zapis do newslettera to jedno pole, formularz kontaktowy to trzy pola, a wniosek o grant może mieć piętnaście pól w czterech krokach. Skonfiguruj odpowiednio.

A teraz zbudujmy właściwy formularz.

Krok po kroku: Jak dodać formularz w WordPress

W tym przewodniku korzystamy z Elfsight Form Builder, który działa całkowicie w Twojej przeglądarce — nic nie trzeba instalować na WordPress. Konfigurujesz wszystko w edytorze wizualnym, otrzymujesz kod osadzania i wklejasz go na swoją stronę.

Krok 1: Wybierz punkt wyjścia

Otwórz edytor, i zobaczysz ponad 300 szablonów dopasowanych do różnych zastosowań, pogrupowanych w kategorie. Wybrany szablon nie jest zobowiązaniem — po prostu wstępnie wypełnia edytor zestawem odpowiednich pól. Możesz dodać, usunąć lub przestawić dowolne pola, więc wybierz ten, który najbliżej odpowiada Twoim potrzebom i dostosuj go dalej.

Krok 2: Zbuduj zestaw pól

Tu kształtuje się formularz. Edytor obsługuje ponad 15 typów pól: pola tekstowe, dane kontaktowe, listy rozwijane, pola wyboru, przyciski radiowe, wybieranie dat, przesyłanie plików, skale ocen i więcej. Dla każdego pola ustaw etykietę, tekst podpowiedzi, opis oraz to, czy jest wymagane czy opcjonalne.

Kilka decyzji, które mają znaczenie tutaj:

Wymagane vs. opcjonalne pola. Zaznacz tylko to, co naprawdę potrzebujesz. Każde wymagane pole zwiększa tarcie. Jeśli tworzysz formularz kontaktowy, imię i adres e-mail są wymagane — wiadomość może być również obowiązkowa. Numer telefonu? Zrób go opcjonalnym, chyba że naprawdę planujesz dzwonić.

Warunkowa logika. Jeśli Twój formularz ma wiele zastosowań, możesz wyświetlać różne pola uzupełniające w zależności od wyboru odwiedzającego. Na przykład formularz rezerwacji w studiu fotograficznym mógłby pokazywać „Typ wydarzenia” i „Liczba gości” tylko wtedy, gdy odwiedzający wybierze „Fotografia wydarzeń” z listy usług, a dla zapytań o zdjęcia produktu – „Opis produktu”. Włącz to na poziomie pola w ustawieniach edytora.

Przesyłanie plików. Przydatne w briefach projektowych, CV, grafikach referencyjnych lub w każdym przypadku, gdy odwiedzający musi dołączyć dokumenty. Pamiętaj, że żądanie przesyłania plików w pierwszym kontakcie generuje utrudnienia — rozważ uczynienie tego opcjonalnym z notą „Dołącz pliki, jeśli to istotne.”

Krok 3: Dodaj nawigację wieloetapową (jeśli Twój formularz jest długi)

Jeśli Twój formularz ma więcej niż pięć lub sześć pól, podziel go na kroki. Przejdź do zakładki Układ, jeśli jeszcze nie wybrałeś szablonu wieloetapowego, a następnie wróć do Buduj formularz, aby wypełnić każdą stronę osobno. Każda strona staje się osobnym krokiem z przyciskami Dalej i Wstecz oraz z wizualnym paskiem postępu pokazującym status ukończenia.

Gdy nie potrzebujesz wielu kroków: Proste formularze kontaktowe (3–4 pola), zapisy do newslettera i szybkie formularze opinii lepiej sprawdzają się jako jeden krok. Dodanie kroków do krótkiego formularza po prostu tworzy zbędne kliknięcia.

Krok 4: Skonfiguruj powiadomienia e-mail

Przejdź do zakładki Email tab, aby określić, co dzieje się po przesłaniu przez odwiedzającego. Tutaj ustawisz adres odbiorcy e-maila (lub wiele adresów — przydatne, jeśli zarówno dział sprzedaży, jak i obsługa powinny widzieć wybrane zgłoszenia), temat wiadomości oraz które wartości pól formularza będą dołączane do powiadomienia e-mail.

Dwie rzeczy warte konfiguracji tutaj — wiele osób pomija:

Automatyczna odpowiedź dla odwiedzającego. Włącz to. Proste potwierdzenie „Dzięki, otrzymaliśmy Twoją wiadomość i odpowiemy w ciągu 24 godzin” buduje zaufanie i redukuje niepokój „czy moje zgłoszenie dotarło?”. Dodatkowo daje naturalne miejsce na ustawienie oczekiwanego czasu odpowiedzi.

Spersonalizowane tematy wiadomości przy użyciu wartości z pól. Zamiast ogólnego „New Form Submission” uwzględnij imię odwiedzającego lub typ zapytania w temacie: „New inquiry from {Name} — {Service Type}.” Gdy masz 20 zgłoszeń dziennie, Twoja skrzynka odbiorcza staje się łatwiejsza do przeglądania bez otwierania każdego e-maila.

Krok 5: Wybierz układ i dostosuj wygląd

W sekcji Układ zobaczysz dwie opcje osadzania, które bezpośrednio wpływają na to, jak Twój formularz będzie wyglądał na Twojej stronie:

• Domyślnie (inline) — Renderuje się bezpośrednio w treści strony w miejscu, w którym umieszczasz kod osadzenia. Najlepsze na dedykowane strony formularzy lub sekcje w landing page.
• Pływające okno — Przyklejony formularz, który wysuwa się z boku ekranu. Doskonały do formularzy „poproś o kontakt” lub „wycena”, które powinny być dostępne z dowolnego miejsca przewijania i nie zajmują dużo miejsca na stronie.

Dla opcji inline masz do wyboru trzy układy pól: pionowy, poziomy i wieloetapowy (zgodnie z nawigacją).

Gdy ustalisz pozycję, przejdź do Wygląd, aby dopasować kolory, czcionki, odstępy pól, style przycisków i zaokrąglenie rogów do motywu WordPress. Jeśli wytyczne Twojej marki wymagają konkretnego stylu wykraczającego poza wbudowane opcje, użyj pola CSS niestandardowego.

Krok 6: Skonfiguruj, co się dzieje po wysłaniu formularza

Poza powiadomieniami e-mail, zdecyduj, co odwiedzający zobaczą po kliknięciu Wyślij. Dwie opcje:

• Inline “Thank You” message — Potwierdzenie pojawia się bezpośrednio w samym formularzu. Proste i zwarta. Sprawdza się w przypadku formularzy w pasku bocznym lub stopce, gdzie przekierowanie na nową stronę byłoby utrudnieniem.
• Przekieruj na adres URL — Przekierowuje odwiedzających na dedykowaną stronę podziękowania po przesłaniu.

Krok 7: Połącz integracje (opcjonalnie)

Jeśli Twoje zgłoszenia z formularza muszą trafiać do innych narzędzi, otwórz zakładkę Integracje. Kreator formularzy obsługuje bezpośrednie połączenia z:

• Google Sheets — Automatycznie zapisuj każde zgłoszenie do arkusza kalkulacyjnego. Przydatne, jeśli Twój zespół już śledzi leady, zamówienia lub rejestracje w Sheets i nie chce ręcznie eksportować plików CSV.
• Mailchimp — Przenieś zapisy e-mailowe i subskrypcje newsletterów bezpośrednio do Twojej listy odbiorców w Mailchimp, z mapowaniem pól do segmentów i tagów.
• Zapier / Make.com — Połącz z ponad 5 000 aplikacji. Wyślij zgłoszenia do CRM, twórz karty Trello z formularzy przyjęć projektów, wyzwalaj powiadomienia Slack o nowych rezerwacjach — cokolwiek potrzebuje Twój przepływ pracy.
• Webhooks — Dla niestandardowych konfiguracji: wyślij surowe dane formularza do dowolnego punktu końcowego, który kontrolujesz.

Możesz pominąć ten krok całkowicie, jeśli powiadomienia e-mail spełniają Twoje potrzeby, a później wrócić, aby skonfigurować integracje bez ponownego osadzania formularza.

Krok 8: Osadź formularz na swojej stronie WordPress

Gdy formularz będzie skonfigurowany, kliknij „Dodaj do witryny”, aby wygenerować kod instalacyjny.

Oto jak wstawić formularz w WordPress:

1. Zaloguj się do zaplecza WordPress i przejdź do Stron, a następnie otwórz stronę docelową do edycji.
2. W edytorze bloków kliknij ikonę + aby dodać nowy blok.
3. Wyszukaj i wybierz Własny kod HTML.
4. Wklej pełny kod instalacyjny Elfsight do bloku.
5. Kliknij Opublikuj lub Aktualizuj.

Twój formularz pojawi się na stronie na żywo natychmiast.

Aby dodać Twój formularz na całej stronie (np. w pasku bocznym lub stopce), przejdź do Wygląd → Widgety, dodaj widget Własny HTML do wybranej sekcji, wklej kod instalacyjny i zapisz.

Help Center guide.”>Dla witryn WordPress korzystających z Elementor, przeciągnij element HTML (nie „Własny HTML”) na stronę i wklej kod. Aby uzyskać szczegółowe instrukcje zależne od platformy, zajrzyj do naszego Przewodnika Centrum Pomocy.

Inne sposoby dodawania formularzy w WordPress

Elfsight to nie jedyna metoda osadzania formularza w WordPressie; w zależności od sytuacji inne podejście może być lepiej dopasowane. Oto szczera analiza.

WPForms lub Contact Form 7 (Wtyczki WordPress)

Najpopularniejsze podejście. WPForms oferuje edytor typu przeciągnij i upuść w panelu WordPress; Contact Form 7 to lekka, oparta na kodzie alternatywa, która istnieje od 2007 roku.

1. Przejdź do Wtyczki → Dodaj nową w panelu WordPress.
2. Wyszukaj „WPForms” (lub „Contact Form 7”) i zainstaluj/aktywuj.
3. Utwórz nowy formularz przy użyciu wbudowanego edytora wtyczki.
4. Wstaw formularz na stronę za pomocą shortcode’a lub bloku wtyczki.

Kiedy to lepszy wybór: jeśli chcesz, by wszystko było zarządzane w WordPress i czujesz się komfortowo przy utrzymaniu wtyczek, WPForms to solidne narzędzie z warunkową logiką, formularzami wieloetapowymi i integracjami płatności. Contact Form 7 nie ma sobie równych, jeśli jesteś deweloperem szukającym minimalistycznego, darmowego rozwiązania i nie masz nic przeciwko pisaniu CSS.

Ręczny formularz HTML

Dla programistów czujących się komfortowo z kodem możesz stworzyć formularz przy użyciu czystego HTML i obsłużyć zgłoszenia za pomocą niestandardowego skryptu PHP lub zewnętrznego punktu końcowego, takiego jak Formspree.

1. Dodaj na swojej stronie blok Własny HTML w Edytorze bloków.
2. Napisz znacznik HTML <form> z wybranymi polami.
3. Ustaw atrybut action na swój plik obsługujący PHP lub zewnętrzną usługę.
4. Stylizuj CSS-em w Personalizatorze motywu lub w arkuszu stylów motywu potomnego.

Kiedy to lepszy wybór: Jeśli potrzebujesz pełnej kontroli nad kodem HTML i zachowaniem, lub jeśli Twój formularz integruje się z niestandardowym backendem. Równie przydatne dla bardzo prostych formularzy (1–2 pola), gdzie pełny widget lub wtyczka byłby przesadą.

Google Forms (Osadzenie przez iframe)

forms.google.com, grab the embed code, and paste it into a Custom HTML block.”>Darmowy, szybki i nie wymaga żadnych umiejętności technicznych. Utwórz formularz na forms.google.com, skopiuj kod osadzenia i wklej go do niestandardowego bloku HTML.

Kiedy to lepszy wybór: Ankiety wewnętrzne, krótkie sondy lub każda sytuacja, w której nie zależy Ci na wizualnej integracji z Twoją stroną. Google Forms to również najprostsza opcja, jeśli pracujesz już w Google Workspace i chcesz, by odpowiedzi trafiały do Google Sheets automatycznie.

Porównajmy narzędzia

Krótka wersja: jeśli chcesz zaawansowanych funkcji formularzy bez przeciążania dodatkami czy kodowaniem, Elfsight to zapewnia. Jeśli chcesz mieć wszystko w ekosystemie WordPress i nie masz nic przeciwko płatnym funkcjom Pro, WPForms jest solidny. Jeśli Twój formularz jest prosty i wewnętrzny, Google Forms lub ręczny formularz HTML może być wszystkim, czego potrzebujesz.

Wskazówki optymalizacyjne dla Twojego formularza WordPress

Twój formularz działa — teraz upewnij się, że naprawdę zbiera wyniki. Większość porzucania formularzy wynika z kilku łatwych do naprawienia błędów.

FAQ (często zadawane pytania)

Podsumowanie

Masz teraz wszystko, czego potrzebujesz, aby dodać formularz do swojej witryny WordPress — od osadzenia w czterech krokach po pełny przegląd konfiguracji pól, układów wieloetapowych, powiadomień i projektowania. Co najważniejsze, wiesz, które decyzje mają znaczenie na każdym etapie i jak je skonfigurować pod kątem Twojego konkretnego zastosowania, czy to prosty formularz kontaktowy, czy wieleoetapowy proces przyjmowania zgłoszeń projektów.

Kreator formularzy Elfsight i wypróbuj za darmo. Wybierz szablon, skonfiguruj pola i w kilka minut uruchomisz działający formularz na swojej stronie WordPress.

Autor artykułu

Kseniia Burmagina

Menedżer treści

Jestem menedżerem treści w Elfsight, tworząc praktyczne przewodniki po inteligentnych rozwiązaniach dla stron internetowych, które pomagają użytkownikom ulepszać ich projekty online. Moje artykuły pisane są w prosty sposób, pokazując, jak widgety mogą zwiększyć wydajność stron i uczynić je skuteczniejszymi.

Obserwuj na LinkedIn