Jak dodać formularze HTML w WordPress (2 metody)

Masz gotowy formularz HTML do użycia, ale dodanie go do WordPressa może być trudne i wymaga wielu testów.

Powód jest prosty: dodawanie formularzy HTML do WordPressa wymaga odpowiedniego podejścia, aby zapewnić ich prawidłowe działanie i bezproblemową integrację z Twoją witryną.

WordPress nie obsługuje formularzy tak samo, jak zwykła strona internetowa HTML. Jeśli po prostu skopiujesz i wkleisz kod formularza, często nie będzie on działać poprawnie bez kilku dodatkowych kroków.

Na własnych stronach używamy wtyczki WPForms, ponieważ zajmuje się ona całym procesem konfiguracji. Niemniej jednak wiemy, że wielu użytkowników woli używać niestandardowych formularzy HTML, aby zachować lekkość, zachować pełną kontrolę nad swoim kodem lub uniknąć dodawania kolejnej wtyczki.

W tym przewodniku pokażemy Ci 2 proste sposoby dodawania formularzy HTML w WordPressie, dzięki czemu Twój formularz wyświetli się poprawnie, zadziała zgodnie z oczekiwaniami i nie zepsuje Twojej witryny. 💡

Czym są formularze HTML i dlaczego warto je tworzyć?

Formularze HTML działają podobnie jak inne formularze na stronie. Pozwalają odwiedzającym wpisywać i przesyłać informacje, takie jak imiona, adresy e-mail, opinie, zamówienia i inne.

Tym, co je wyróżnia, jest to, że formularze HTML są tworzone za pomocą kodu, a nie wizualnego edytora typu „przeciągnij i upuść”, jak wtyczki do formularzy. Oznacza to, że musisz samodzielnie zdefiniować pola, takie jak pola tekstowe, pola wyboru, przyciski opcji i pola rozwijane.

Oto kilka zalet tworzenia formularzy od podstaw przy użyciu HTML:

• Zoptymalizowana wydajność. Formularze HTML zazwyczaj ładują się szybciej i zużywają mniej pamięci, ponieważ kod jest lekki.
• Kontrola. Będziesz mieć pełną kontrolę nad wyglądem i funkcjonalnością formularza, ponieważ nie jesteś ograniczony funkcjami narzędzia do tworzenia formularzy.
• Personalizacja. Formularze HTML można dostosować dokładnie do Twoich potrzeb, oferując bardziej elastyczną personalizację formularzy.

Chociaż tworzenie formularzy HTML od podstaw jest świetnym sposobem na naukę i ćwiczenie kodowania, ma ono swoje własne wyzwania.

Możesz mieć problemy z kompatybilnością między przeglądarkami, gdzie formularz działa inaczej w różnych przeglądarkach internetowych.

Ponadto, z naszego doświadczenia wynika, że obsługa walidacji formularzy za pomocą JavaScript może być trudna. Wymaga ona dokładnych testów, aby upewnić się, że możesz poprawnie zbierać i przetwarzać wszystkie dane wejściowe użytkownika.

Podsumowując, oto kluczowe zalety i wyzwania związane z ręcznym kodowaniem formularzy HTML:

✅ Zalety	🛑 Wyzwania
Szybsze ładowanie stron dzięki lekkiemu kodowi	Zapewnienie kompatybilności między różnymi przeglądarkami
Pełna kontrola nad wyglądem i funkcjonalnością	Tworzenie walidacji formularzy i obsługi błędów
Precyzyjne dostosowanie do konkretnych wymagań	Ręczne ustawianie ochrony przed spamem
Lepsze możliwości optymalizacji wydajności	Obsługa konfiguracji i przetwarzania po stronie serwera

Większość użytkowników WordPressa uważa, że wtyczki oferują najlepszy kompromis. Dają one opcje dostosowywania HTML bez złożoności ręcznej konfiguracji serwera.

Niemniej jednak istnieją sposoby dodawania formularzy HTML bez tych komplikacji. Niezależnie od tego, czy zarządzasz blogiem WordPress, witryną biznesową, czy sklepem internetowym, możesz łatwo dodać formularze HTML do swojej witryny bez konieczności kodowania od zera.

W poniższych sekcjach pokażemy, jak dodawać formularze HTML do WordPress. Oto krótki przegląd 2 metod, które omówimy w tym przewodniku:

• Metoda 1: Dodawanie formularzy HTML w WordPress za pomocą wtyczki HTML Forms (łatwe)
• Metoda 2: Dodawanie niestandardowego kodu HTML do formularzy WordPress za pomocą WPForms
• Dodatkowa wskazówka: Przesyłanie niestandardowej strony HTML do WordPressa
• FAQ: Jak dodać formularze HTML w WordPressie
• Dodatkowe zasoby: Więcej przewodników po formularzach WordPress

Gotowi? Zacznijmy.

Metoda 1: Dodawanie formularzy HTML w WordPress za pomocą wtyczki HTML Forms (łatwe)

🎖️ Najlepsze dla: Deweloperów i menedżerów witryn, którzy chcą pełnej kontroli nad HTML dzięki lekkiemu, zorientowanemu na wydajność rozwiązaniu. Wtyczka kładzie nacisk na prostotę i szybkość ponad wizualnymi kreatorami.

Ponieważ WordPress domyślnie nie przetwarza surowych danych z formularzy HTML, łatwym sposobem na dodanie formularza HTML do strony internetowej WordPress jest użycie darmowej wtyczki do formularzy, takiej jak HTML Forms. Zapewnia ona niezbędny kod backendowy do zbierania i wysyłania danych e-mailem, jednocześnie pozwalając na samodzielne pisanie kodu HTML.

Z ponad 10 000 aktywnych instalacji i oceną 4,9 na 5 gwiazdek w WordPress.org, jest to zaufane narzędzie do tworzenia i konfigurowania formularzy HTML w jednym miejscu, dzięki czemu nie musisz zajmować się żadną konfiguracją po stronie serwera.

Aby rozpocząć, upewnijmy się, że masz zainstalowaną wtyczkę na swojej stronie internetowej WordPress.

Z poziomu Twojego panelu administracyjnego WordPress przejdź do Wtyczki » Dodaj nową z lewego paska bocznego i użyj pola wyszukiwania, aby znaleźć wtyczkę.

Gdy zobaczysz ją w wynikach wyszukiwania, kliknij „Zainstaluj teraz”, a następnie „Aktywuj”. Jeśli potrzebujesz pomocy, możesz postępować zgodnie z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywacji możesz przejść do HTML Forms » Dodaj nową z lewego paska bocznego w panelu administracyjnym WordPress, aby rozpocząć tworzenie formularza kontaktowego.

Zostaniesz przekierowany na stronę „Dodaj nowy formularz”.

Stąd pierwszą rzeczą, którą musisz zrobić, jest nazwanie formularza, wpisując nazwę w polu „Tytuł formularza”. Na przykład nazwaliśmy nasz formularz „Zapis na Newsletter”.

Następnie kliknij przycisk „Utwórz formularz” pod polem.

Po wykonaniu tej czynności pojawi się strona „Edytuj formularz”, na której możesz zacząć dostosowywać swój formularz kontaktowy HTML.

Na górze strony zobaczysz szczegóły formularza, w tym tytuł formularza, slug i shortcode. Nie musisz zapamiętywać tych szczegółów, ponieważ będą one dostępne w panelu HTML Forms, gdy ich potrzebujesz.

Poniżej tych szczegółów znajdziesz zakładki menu. W zakładce „Pola” możesz zobaczyć różne przyciski pól, takie jak „Tekst”, „Daty”, „Pola wyboru” i „Przyciski opcji”, do dodania do swoich formularzy.

Teraz przewiń trochę dalej w dół.

Na dole tej karty znajdziesz gotowy formularz HTML wraz z podglądem.

Ten formularz kontaktowy jest dość prosty. Zawiera 4 pola, w których użytkownicy mogą wpisać swoje imię i nazwisko, adres e-mail, krótki temat i wiadomość.

Teraz załóżmy, że chcesz dodać nowe pole z formularzem zapisu na newsletter e-mail. Wystarczy kliknąć jeden z przycisków pól nad „Kod formularza”.

Na przykład użyjemy pola rozwijanego i utworzymy opcję „Tak/Nie” do zapisywania się na newsletter.

Stąd kliknij „Dropdown” (Rozwijane), a otworzą się opcje konfiguracji pola rozwijanego. Możesz zacząć uzupełniać szczegóły, takie jak etykieta pola i wybory.

Po wprowadzeniu szczegółów możesz kliknąć „Dodaj pole do formularza”.

Następnie powinieneś zobaczyć znacznik pola rozwijanego w sekcji „Kod formularza”. Po prostu przewiń zakładkę, aby ją sprawdzić.

Następnym krokiem jest ponowne uporządkowanie formularza kontaktowego.

Aby zachować dobry przepływ, chcesz, aby pola rozwijane znajdowały się tuż pod polem „E-mail”.

Ponieważ ta wtyczka nie ma konstruktora metodą przeciągnij i upuść, będziesz musiał przenieść kod ręcznie. Przejdź dalej i wytnij kod pola rozwijanego od otwierającego znacznika <p> do zamykającego </p>.

Następnie po prostu wklej ten fragment kodu tuż po zamykającym znaczniku pola „E-mail” (który zazwyczaj wygląda jak </p> lub </label>).

Domyślne pole „Temat” może nie być konieczne w formularzu zapisu na newsletter. Dlatego zalecamy usunięcie tego pola.

Możesz to zrobić, usuwając cały blok akapitu zawierający etykietę pola Temat i pole wprowadzania, w tym tagi otwierający <p> i zamykający </p>.

Po przeniesieniu i usunięciu tagów przewiń kartę w dół do sekcji „Podgląd formularza”.

W tej sekcji możesz sprawdzić, czy pomyślnie przenieiosłeś i usunąłeś pola, niczego nie psując. W podglądzie formularza poniżej możesz zweryfikować, czy pole Temat zniknęło, nie psując układu formularza. Możesz również sprawdzić, czy lista rozwijana działa poprawnie.

Gdy będziesz zadowolony z wyników, kliknij niebieski przycisk „Zapisz zmiany” w sekcji „Kod formularza”.

Po zakończeniu procesu zapisywania, na górze tej strony powinna pojawić się powiadomienie „Formularz zaktualizowany”.

Teraz możesz sprawdzić konfigurację formularza. Przejdźmy do karty „Wiadomości”, aby zobaczyć, jak Formularze HTML konfigurują wiadomości potwierdzające wysłanie formularza.

Po prostu kliknij „Wiadomości”, aby otworzyć zakładkę.

Ta zakładka pozwala edytować gotowy tekst, który pojawia się, gdy użytkownik pomyślnie prześle formularz i w podobnych sytuacjach.

Jeśli wszystko wygląda dobrze, możesz tak zostawić. Jeśli wprowadzisz jakiekolwiek zmiany, nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby nie stracić postępów.

Następnie przejdźmy do zakładki „Ustawienia”.

Domyślnie Formularze HTML ustawią „Tak” do zapisywania każdego przesłanego formularza i „Nie” do ukrywania formularza po pomyślnym przesłaniu. Możesz to dostosować w razie potrzeby.

Następnie w polu „Przekieruj do adresu URL po pomyślnym zapisaniu” możesz skopiować i wkleić adres URL aktywnej strony internetowej z Twojej witryny WordPress. Alternatywnie możesz pozostawić pole puste lub wpisać 0, aby użytkownicy pozostali na bieżącej stronie po pomyślnym przesłaniu formularza.

Gdy wszystko będzie gotowe, pozostaje tylko dodać formularz HTML do strony WordPress.

Przejdźmy do Wpisy lub Strony » Wszystkie wpisy lub Wszystkie strony z panelu administracyjnego WordPress.

W tym przewodniku dodamy formularz HTML do naszej strony „Kontakt”.

Następnie najedź kursorem na stronę „Kontakt” na liście i kliknij „Edytuj”, gdy się pojawi.

Spowoduje to uruchomienie edytora bloków strony „Kontakt”.

W edytorze możesz zacząć wybierać obszar, aby dodać formularz. Następnie po prostu najedź kursorem na obszar między blokami i kliknij przycisk „+”, aby dodać blok Formularze HTML, lub kliknij ikonę wstawiania bloku w lewym górnym pasku narzędzi.

Teraz możesz wpisać „Formularze HTML” w pasku wyszukiwania na górze panelu wstawiania bloków, aby szybko znaleźć blok. Gdy pojawi się wynik wyszukiwania, kliknij go.

Zobaczysz wtedy listę rozwijaną w bloku „Formularze HTML”. Po prostu ją rozwiń i wybierz formularz, który chcesz wyświetlić. Tutaj wybieramy formularz „Zapis na newsletter”, który właśnie utworzyliśmy.

Formularz pojawi się po opublikowaniu treści. Zatem po wybraniu formularza z menu rozwijanego możesz kliknąć przycisk „Aktualizuj”.

Twój formularz jest teraz aktywny, a użytkownicy mogą zapisać się na Twój newsletter. Oto jak może wyglądać na Twojej stronie:

Aby zobaczyć przesłane formularze, możesz najpierw przejść do Formularze HTML » Wszystkie formularze. Spowoduje to przejście do listy wszystkich Twoich formularzy HTML.

Następnie po prostu najedź kursorem na formularz i kliknij przycisk „Zgłoszenia”, gdy się pojawi.

Stąd możesz zobaczyć wszystkie przesłane formularze.

Tabela „Zgłoszenia” zawiera wszystkie informacje, które użytkownicy wypełnili w Twoim formularzu. Następnie znajduje się kolumna „Znacznik czasu”, która informuje, kiedy formularz został przesłany.

Na przykład, tutaj pierwsze zgłoszenie zostało złożone przez „Użytkownika 1”.

Z tabeli wynika, że użytkownik przesłał formularz 25 czerwca około godziny 13:00. Ponadto „Użytkownik 1” odpowiedział „Może później” na pytanie „Czy chcesz subskrybować nasz newsletter”. W takim przypadku nie należy dodawać jego adresu e-mail do listy mailingowej.

Metoda 2: Dodawanie niestandardowego kodu HTML do formularzy WordPress za pomocą WPForms

🎖️ Najlepsze dla: Nietechnicznych użytkowników, którzy chcą profesjonalnych formularzy w kilka minut bez kodowania. WPForms jest chwalony przez użytkowników za umożliwienie szybkiego tworzenia pięknych formularzy dzięki intuicyjnemu interfejsowi typu „przeciągnij i upuść”.

Innym podejściem jest użycie wizualnego kreatora formularzy kontaktowych, takiego jak WPForms, najwyżej ocenianego wtyczki formularzy WordPress z ponad 6 milionami aktywnych instalacji i oceną 4,8 na 5 gwiazdek na podstawie ponad 14 000 recenzji.

Jest to najlepsza opcja, jeśli chcesz wizualnie zbudować formularz, ale potrzebujesz wstawić określone elementy HTML, takie jak link, format tekstu lub podpowiedź, za pomocą kodu.

Na przykład możesz użyć niestandardowego kodu HTML, aby wyświetlić krótką wiadomość ostrzegawczą w formularzu płatności z linkiem do strony „Polityka zwrotów i zwrotów”.

Możesz też dodać pasek postępu, aby użytkownicy wiedzieli, jak daleko są od ukończenia formularza. Niestandardowy kod HTML może nawet pozwolić na wstawianie emoji lub dodawanie podpowiedzi.

W tej metodzie pokażemy Ci, jak dodawać fragmenty kodu HTML, aby dostosować swoje formularze WordPress za pomocą WPForms, czyli najlepszego kreatora formularzy dla WordPress.

Więcej o WPForms

WPForms to najpopularniejszy kreator formularzy WordPress, z ponad 6 milionami aktywnych instalacji.

Oprócz kreatora metodą przeciągnij i upuść, zawiera on dużą bibliotekę dodatków i integracji, które mogą rozszerzyć Twoje formularze bez potrzeby niestandardowego kodowania. Na przykład możesz:

• Śledzić i odzyskiwać porzucone formularze (plan Elite)
• Tworzyć konwersacyjne formularze (plan Pro)
• Przeprowadzać ankiety i sondaże (plan Pro)
• Akceptować płatności za pośrednictwem Stripe, PayPal, Square i Authorize.Net (plan Plus)
• Zbierać podpisy cyfrowe (plan Pro)
• Automatycznie rejestrować użytkowników WordPress (plan Pro)

Darmowa wersja WPForms Lite zawiera podstawowy kreator formularzy i podstawowe pola. Pole HTML używane w tym samouczku wymaga licencji premium (Basic lub wyższej). Dostępność zależy od planu: pole HTML jest dostępne od planu Basic (49,50 USD/rok), a większość zaawansowanych dodatków wymaga planu Pro (199,50 USD/rok) lub Elite (299,50 USD/rok).

W WPBeginner używamy WPForms do formularzy kontaktowych, corocznych ankiet i formularzy próśb o migrację witryny, ponieważ tworzenie i zarządzanie formularzami jest znacznie łatwiejsze niż kodowanie ich ręcznie.

Uzyskaj więcej informacji o tym wtyczce w naszej szczegółowej recenzji WPForms.

Zanim zaczniemy, upewnijmy się, że masz konto WPForms z licencją premium, która obejmuje pole HTML (plan Basic lub wyższy).

Na stronie internetowej WPForms kliknij przycisk „Get WPForms Now”, wybierz plan, który obejmuje pole HTML (licencja Basic lub wyższa w cenie 49,50 USD/rok lub więcej) i dokończ proces zakupu.

Po rejestracji będziesz mieć własny pulpit WPForms, gdzie możesz pobrać plik zip WPForms i skopiować swój klucz licencyjny.

Teraz jesteś gotowy do zainstalowania i aktywowania WPForms na swojej stronie WordPress.

Z pulpitu WordPress przejdź do Wtyczki » Dodaj nową i kliknij przycisk „Wyślij wtyczkę” na górze.

Powinieneś teraz zobaczyć narzędzie do przesyłania plików.

Kliknij „Wybierz plik”, aby przesłać plik zip WPForms z lokalnego komputera. Następnie kliknij „Zainstaluj teraz”, a potem „Aktywuj”.

Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do WPForms » Ustawienia i wprowadzić swój kod licencyjny. Po wprowadzeniu klucza po prostu kliknij przycisk „Zweryfikuj klucz”, aby rozpocząć weryfikację.

Po zakończeniu możesz zacząć tworzyć swój formularz i dodawać niestandardowy kod HTML.

W tym przewodniku pokażemy Ci, jak dodać prostą podpowiedź do swojego formularza kontaktowego.

Podpowiedź to małe okienko podręczne, które pojawia się po najechaniu kursorem myszy na element strony internetowej. Jest to przydatne, ponieważ pozwala użytkownikom dowiedzieć się więcej o konkretnym elemencie strony internetowej bez klikania ani opuszczania strony, na której się znajdują.

Ale najpierw stwórz formularz kontaktowy. Po prostu przejdź do WPForms » Dodaj nowy z obszaru administracyjnego WordPress, aby rozpocząć.

Otworzy to panel „Ustawienia”, gdzie najpierw musisz nadać nazwy swojemu formularzowi. Ta nazwa służy wyłącznie do celów wewnętrznych, więc możesz użyć czegokolwiek chcesz.

Następnym krokiem jest wybór sposobu budowania formularza.

Dzięki WPForms możesz tworzyć formularze za pomocą kreatora formularzy AI (plan Basic lub wyższy), gotowego szablonu lub od podstaw.

Jeśli chcesz skorzystać z kreatora opartego na sztucznej inteligencji, wystarczy, że wprowadzisz proste polecenie. Sztuczna inteligencja utworzy dla Ciebie formularz w ciągu kilku sekund.

Jednak w tym samouczku użyjemy gotowego szablonu.

Ponieważ dostępnych jest ponad 2100 szablonów formularzy, możesz użyć paska wyszukiwania, aby je szybko filtrować. Aby to zrobić, po prostu wpisz „Formularz kontaktowy” i poczekaj na zakończenie wyszukiwania.

Jeśli chcesz przejrzeć każdy wynik wyszukiwania, aby zobaczyć, jak wygląda formularz, możesz skorzystać z funkcji podglądu. Po prostu najedź kursorem na szablon formularza i kliknij „Wyświetl demo”.

Po znalezieniu idealnego formularza kontaktowego dla Twoich potrzeb, najedź na niego ponownie i kliknij „Użyj szablonu”.

Spowoduje to uruchomienie kreatora formularzy.

Teraz wszystkie narzędzia do personalizacji znajdują się w lewym panelu, a podgląd formularza na żywo jest po prawej stronie ekranu.

Na tej stronie możesz użyć funkcji przeciągnij i upuść, aby dodać elementy z lewego panelu do podglądu na żywo. Możesz również użyć tej funkcji do przesuwania pól w podglądzie na żywo.

Spróbujmy dodać pole HTML do formularza. Wystarczy przewinąć w dół lewego panelu, a następnie przeciągnąć i upuścić „HTML” na formularzu.

Po wstawieniu pola HTML możesz kliknąć na nie, aby otworzyć jego opcje dostosowywania. Tutaj pierwszą rzeczą do zrobienia jest wypełnienie pola „Etykieta”. Możesz również pozostawić je puste.

Następnie w polu „Kod” wstawisz niestandardowy kod HTML.

Aby utworzyć podpowiedź, możesz użyć znacznika <span> lub po prostu skopiować poniższy kod i wkleić go w pole „Kod”:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

To tylko przykładowy kod, więc śmiało edytuj tekst, aby dopasować go do swoich potrzeb. Część kodu title="" dokładnie mówi przeglądarce internetowej, aby utworzyła efekt podręcznego okienka po najechaniu!

Pamiętaj, że WPForms nie wyświetla kodu HTML w podglądzie kreatora formularzy. Aby wyświetlić podgląd pola i upewnić się, że wszystko jest w porządku, możesz najpierw zapisać zmiany i kliknąć „Podgląd”.

Spowoduje to otwarcie nowej karty.

Teraz przetestujmy, czy fragment kodu HTML dla Twojego podpowiedzi działa poprawnie. Po prostu najedź kursorem na tekst i poczekaj, aż podpowiedź pojawi się na kilka sekund.

Gdy będziesz zadowolony z wyniku, możesz wrócić do kreatora formularzy, aby sfinalizować swój formularz.

Ustawienia powiadomień i potwierdzeń formularza są już skonfigurowane w WPForms. Jeśli jednak chcesz je dostosować, przejdź do „Ustawienia”, a następnie „Powiadomienia” lub „Potwierdzenia”.

W sekcji „Powiadomienia” możesz dodać wielu odbiorców zgłoszenia formularza kontaktowego.

Aby dodać wielu odbiorców, oddziel adresy e-mail przecinkami: email1@example.com, email2@example.com, email3@example.com. Możesz również najechać kursorem na przycisk znaku zapytania obok pola „Wyślij na adres e-mail”, aby uzyskać dodatkowe instrukcje.

Możesz również edytować gotowy tekst do tematu wiadomości e-mail.

Na przykład zmieniliśmy nasz z „Nowe zgłoszenie: Formularz kontaktowy” na „Masz wiadomość: Nowy kontakt”.

Po dostosowaniu powiadomień, przejdź do panelu „Potwierdzenie”.

Domyślnie WPForms ustawia Twój typ potwierdzenia na „Wiadomość” i ma gotowy tekst. Możesz zdecydowanie zmienić te ustawienia, jeśli chcesz.

Oprócz wyświetlania wiadomości potwierdzającej, możesz przekierować użytkowników na nową stronę lub określony adres URL.

Gdy wszystko będzie gotowe, czas opublikować i osadzić formularz WordPress.

Kliknij pomarańczowy przycisk „Osadź” w prawym górnym rogu kreatora formularzy, aby rozpocząć publikowanie.

WPForms zapyta, czy chcesz dodać formularz do istniejącej, czy nowej strony. W tym przewodniku wybierzemy „Wybierz istniejącą stronę”.

W następnym oknie podręcznym wybierzesz stronę z listy dostępnych stron. Następnie możesz kliknąć „Zaczynajmy!”, aby przejść do edytora bloków strony.

Teraz możesz najechać kursorem na obszar między blokami i kliknąć przycisk „+”, lub kliknąć ikonę dodawania bloków na górnym pasku narzędzi po lewej stronie. Wybierz blok WPForms.

Następnie możesz wybrać formularz z listy rozwijanej bloku WPForms.

Po wybraniu formularza WPForms załaduje go w wybranym obszarze treści. Jeśli chcesz wyświetlić tytuł formularza, przejdź do zakładki „Blok” w panelu po prawej stronie i włącz suwak „Pokaż tytuł”.

Gdy wszystko będzie Ci odpowiadać, kliknij przycisk „Aktualizuj”.

I gotowe! Dodałeś niestandardowy kod HTML do swojego formularza kontaktowego WPForms i udostępniłeś go na swojej stronie WordPress.

Teraz użytkownicy mogą zacząć wypełniać formularz i potencjalnie zapisać się do Twojego biuletynu e-mail.

Aby zobaczyć wszystkie zgłoszenia formularzy WPForms, przejdź do WPForms » Wszystkie Formularze.

Następnie możesz najechać kursorem na „Formularz kontaktowy” lub dowolny formularz z listy i kliknąć „Wpisy”, gdy pojawi się przycisk.

Na następnym ekranie powinieneś zobaczyć wszystkie swoje zgłoszenia formularzy.

Tabela zawiera wszystkie informacje przesłane przez użytkowników wraz z formularzem, a także czas przesłania.

Na przykład, 2 lipca około godziny 8:00, „Użytkownik 3” powiedział, że chce subskrybować biuletyn e-mailowy i zadał pytanie, jak skontaktować się z naszym zespołem obsługi klienta.

Możemy również zobaczyć kolumnę „Akcje”. W tej kolumnie znajduje się kilka przycisków: „Wyświetl”, „Edytuj”, „Spam” i „Kosz”.

Jeśli klikniesz „Wyświetl”, WPForms przeniesie Cię na dedykowaną stronę przeglądu wpisu. Na tej stronie wtyczka zachęca do aktywacji dwóch dodatków.

Pierwszy to dodatek Geolokalizacja do śledzenia, skąd użytkownik wysyła formularz. Drugi to dodatek Podróż użytkownika, który może pomóc w analizie ścieżki użytkownika przez Twoją witrynę, dopóki nie kliknie przycisku „Wyślij”.

Zalecamy zainstalowanie i aktywowanie tych dodatków w celu bardziej zoptymalizowanej wydajności formularzy. Należy pamiętać, że oba dodatki są dostępne w licencji Pro (199,50 USD/rok) lub wyższej.

Przyciski „Spam” i „Kosz” są przydatne do oznaczania fałszywych zgłoszeń i usuwania ich z wpisów. Aby dowiedzieć się więcej o ograniczaniu fałszywych zgłoszeń formularzy, przeczytaj nasz przewodnik o tym, jak blokować spam w formularzach kontaktowych.

Dodatkowa wskazówka: Przesyłanie niestandardowej strony HTML do WordPressa

Możliwe, że szukasz również sposobu na przesłanie niestandardowej strony HTML do swojej witryny WordPress. Może to być przydatne, jeśli masz szablon statyczny, którego chcesz użyć, lub stronę HTML ze starej witryny.

Ogólnie rzecz biorąc, możesz przesłać pojedynczą stronę HTML bez oddzielnych plików CSS lub obrazów, korzystając z wtyczki Menedżer plików lub klienta FTP.

Jednakże, jeśli strona, którą chcesz przesłać, zawiera oddzielne pliki CSS i obrazy, musisz przesłać je w folderze, zachowując tę samą strukturę katalogów, co w pliku HTML.

AIOSEO, najlepsza wtyczka SEO dla WordPress, może pomóc wyszukiwarkom znaleźć Twoją niestandardową stronę HTML, dodając ją do map witryn XML.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem dla początkujących o tym, jak przesłać stronę HTML do WordPress bez błędów 404.

FAQ: Jak dodać formularze HTML w WordPressie

Odpowiedzieliśmy na kilka często zadawanych pytań, aby pomóc Ci z łatwością dodawać formularze HTML do WordPressa.

Dlaczego mój formularz HTML nie działa w WordPress?

Jest to częsty problem. W WordPressie zwykłe wklejenie formularza HTML zazwyczaj nie wystarcza, aby zaczął działać.

Chociaż formularz może wyświetlać się poprawnie, WordPress nie przetwarza automatycznie zgłoszeń formularzy. W przeciwieństwie do podstawowej strony HTML, nie ma wbudowanego skryptu do obsługi danych, gdy ktoś kliknie „Wyślij”.

Aby formularz był funkcjonalny, będziesz musiał dodać niestandardowy kod PHP do przetwarzania zgłoszeń lub użyć wtyczki, która się tym zajmie.

Jak mogę upewnić się, że moje zgłoszenia formularzy przechodzą?

Najłatwiejszą opcją jest użycie wtyczki formularza kontaktowego takiej jak WPForms lub Formidable Forms. Te wtyczki obsługują wszystko w tle, w tym zapisywanie wpisów, wysyłanie powiadomień e-mail i blokowanie spamu, dzięki czemu nie musisz wszystkiego konfigurować samodzielnie.

Czy mogę nadal dostosowywać moje formularze, jeśli używam HTML?

Tak, absolutnie. Używanie HTML daje Ci pełną kontrolę nad tym, jak formularz wygląda i działa. Pamiętaj tylko, że będziesz również odpowiedzialny za wszystko inne, takie jak:

• Stylizowanie formularza za pomocą własnego CSS
• Dodawanie walidacji, komunikatów o błędach lub logiki warunkowej za pomocą niestandardowego kodu
• Zapewnienie prawidłowego działania formularza na różnych urządzeniach i w przeglądarkach

Więc tak, masz pełną elastyczność, ale także pełną odpowiedzialność.

Dodatkowe zasoby: Więcej przewodników po formularzach WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać formularze HTML w WordPress. Następnie możesz zapoznać się z naszymi przewodnikami na temat:

• Jak stworzyć formularz rezerwacji w WordPress (łatwe metody)
• Jak tworzyć wielojęzyczne formularze w WordPress
• Jak tworzyć konwersacyjne formularze w WordPress
• Jak eksportować wpisy z formularzy WordPress do formatu CSV i Excel
• Ostateczny przewodnik po korzystaniu z formularzy WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.