Jak dodać formularze HTML w WordPress (2 metody)

Chcesz napisać własny znacznik formularza zamiast przeciągać pola w wizualnym kreatorze?

Dobre wieści: nie musisz pisać żadnego PHP, aby ten formularz działał. Możesz pozwolić lekkiej wtyczce zająć się przetwarzaniem, podczas gdy Ty napiszesz każdy tag samodzielnie. Alternatywnie, możesz zbudować formularz wizualnie i wstawić niestandardowy kod HTML dokładnie tam, gdzie go potrzebujesz.

W tym przewodniku pokażemy Ci, jak utworzyć niestandardowy formularz HTML, który działa w WordPress.

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

Formularz HTML zbiera informacje od odwiedzających, takie jak imiona, adresy e-mail i opinie, tak jak każdy inny formularz w sieci. To, co go wyróżnia, to sposób jego budowy. Zamiast polegać na ciężkim wizualnym edytorze typu „przeciągnij i upuść”, budujesz formularz HTML za pomocą zwykłego kodu. Oznacza to, że sam piszesz pola (takie jak pola tekstowe, pola wyboru i listy rozwijane).

Osoby, które używają formularzy HTML zamiast kreatora formularzy metodą przeciągnij i upuść, zazwyczaj robią to, aby zmaksymalizować wydajność swojej witryny. Proste formularze HTML sprawiają, że strony internetowe ładują się nieco szybciej. Poza szybkością, samodzielne pisanie kodu daje Ci pełną kontrolę nad projektem. Zamiast być ograniczonym sztywnymi ustawieniami kreatora, możesz dostosować układ dokładnie do swoich potrzeb.

Większość użytkowników WordPress uważa, że wtyczki do tworzenia formularzy metodą przeciągnij i upuść oferują najlepsze doświadczenia użytkownika. Uzyskujesz pełną personalizację HTML bez kłopotów z ręczną konfiguracją serwera.

Oto wszystko, co omówimy w tym przewodniku:

Metoda 1: Dodawanie formularzy HTML w WordPress za pomocą wtyczki

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

Możesz dodać formularz HTML do WordPressa za pomocą darmowej wtyczki, takiej jak HTML Forms. Ta wtyczka zarządza kodem PHP i odrobiną JavaScript wymaganą do uruchomienia formularza HTML w WordPress, jednocześnie dając Ci pełną swobodę w samodzielnym pisaniu kodu HTML.

Darmowa wersja obejmuje wszystko, co znajduje się w tym samouczku, w tym wysyłanie powiadomień e-mail i przechowywanie zgłoszeń. Ochrona przed spamem jest również bezpłatna.

Aby rozpocząć, zainstaluj wtyczkę na swojej stronie WordPress. Jeśli potrzebujesz pomocy, postępuj zgodnie z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywacji przejdź do HTML Forms » Dodaj nowy, aby zacząć tworzyć swój formularz.

Wpisz nazwę swojego formularza w polu „Tytuł formularza”. W tym przewodniku tworzymy prosty formularz kontaktowy, więc nazwaliśmy nasz „Formularz kontaktowy”.

Następnie kliknij przycisk Utwórz formularz.

Gdy to zrobisz, pojawi się strona „Edytuj formularz” i możesz zacząć dostosowywać swój formularz HTML.

Na górze strony zobaczysz szczegóły swojego formularza, w tym tytuł formularza, slug i shortcode. Poniżej tych szczegółów znajdziesz pięć zakładek: „Pola”, „Wiadomości”, „Ustawienia”, „Akcje” i „Zgłoszenia”.

Zakładka „Pola” zawiera dziesięć przycisków, które generują kod pól.

Na dole tej zakładki znajdziesz gotowy formularz HTML wraz z podglądem.

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

Aby dodać nowe pole, kliknij odpowiedni przycisk bezpośrednio nad polem „Kod formularza”.

W tym samouczku zastąpimy pole Temat polem rozwijanym.

Kliknij „Dropdown”, aby otworzyć jego ustawienia. Następnie wpisz swoje pytanie w polu „Etykieta pola” i dodaj jedną opcję na typ zapytania, na przykład „Ogólne pytanie”, „Sprzedaż” i „Wsparcie”.

Po wprowadzeniu tych informacji kliknij „Dodaj pole do formularza”.

Następnie zobaczysz nowy tag rozwijany pojawiający się w polu „Kod formularza”. Po prostu przewiń w dół, aby sprawdzić zaktualizowany kod.

Aby formularz był przyjazny dla użytkownika, umieść pole wyboru (dropdown) bezpośrednio pod polem „Twój adres e-mail”. Ponieważ ten wtyczka nie ma konstruktora metodą przeciągnij i upuść, będziesz musiał wyciąć kod z konstruktora kodu i wkleić go tam, gdzie chcesz go umieścić.

Aby usunąć pole Temat, usuń cały blok akapitu zawierający pole Temat.

Po zakończeniu chcesz sprawdzić panel „Podgląd formularza”.

Jeśli go nie widzisz, kliknij link „Pokaż podgląd formularza”.

Ten podgląd na żywo pozwala potwierdzić, że Twoje zmiany zadziałały bez psucia układu.

Możesz szybko sprawdzić, czy pole Temat zniknęło i przetestować, czy Twój nowy wybór działa poprawnie.

Następnie kliknij niebieski przycisk „Zapisz zmiany”.

Teraz możesz sprawdzić konfigurację formularza. Kliknij kartę „Wiadomości”, aby zobaczyć, jak HTML Forms konfiguruje wiadomości potwierdzające wysłanie formularza.

Ta karta pozwala dostosować wiadomości potwierdzające, które zobaczą użytkownicy.

Jeśli jesteś zadowolony z domyślnego tekstu, możesz go zostawić. W przeciwnym razie dokonaj edycji, a następnie kliknij Zapisz zmiany.

Domyślnie nowy formularz zapisuje Twoje wpisy w bazie danych, ale nie wyśle Ci wiadomości e-mail, gdy ktoś go wyśle.

Aby to naprawić, kliknij kartę Akcje. Zobaczysz powiadomienie „Brak skonfigurowanych akcji formularza dla tego formularza”.

Kliknij „Wyślij e-mail”.

Pola „Od”, „Do” i „Wiadomość” są wymagane. Możesz użyć pól zmiennych wymienionych bezpośrednio pod polem Wiadomość, aby automatycznie wstawić informacje, które odwiedzający wpisał w Twoim formularzu.

Po wypełnieniu tych pól kliknij „Zapisz zmiany”. Teraz będziesz otrzymywać e-mail za każdym razem, gdy ktoś wyśle Twój formularz.

Po skonfigurowaniu wszystkiego, wystarczy opublikować swój formularz HTML. Przejdź do strony lub wpisu, w którym chcesz osadzić formularz. Następnie najedź kursorem na obszar, w którym chcesz wstawić formularz i kliknij przycisk „+”.

Stąd zacznij wpisywać „HTML Forms” w pasku wyszukiwania. Gdy pojawi się odpowiedni blok, kliknij go, aby dodać do swojej strony lub wpisu.

Wewnątrz bloku HTML Forms kliknij menu rozwijane i wybierz formularz, który chcesz wyświetlić.

Po wybraniu formularza z menu rozwijanego kliknij przycisk „Zaktualizuj”.

Twój formularz kontaktowy jest teraz aktywny. Oto jak będzie wyglądał dla Twoich odwiedzających:

Zanim zaczniesz promować formularz gdziekolwiek, zalecamy przetestowanie go samodzielnie, wysyłając przykładowy wpis. W ten sposób potwierdzisz, że formularz nie tylko się wyświetla, ale faktycznie działa.

Po wysłaniu testowego wpisu przejdź do HTML Forms » Wszystkie Formularze. Tutaj kliknij link „Wpisy” swojego formularza.

To pokazuje wszystkie Twoje wpisy formularza. Twój testowy wpis pojawi się w tabeli, a Ty powinieneś również otrzymać powiadomienie w swojej skrzynce odbiorczej.

Tabela „Wpisy” otwiera się z kolumną „Znacznik czasu” informującą, kiedy formularz został wysłany, a następnie jedną kolumną dla każdego pola.

Metoda 2: Dodawanie niestandardowego HTML do formularzy za pomocą przeciągnij i upuść

🎖️ Najlepsze dla: Każdego, kto chce wizualnie tworzyć formularze, ale nadal potrzebuje wstawić do nich konkretny kod HTML, taki jak podpowiedź, link lub sformatowana notatka.

Jeśli chodzi o tworzenie formularzy, polecamy WPForms. Oferuje on kreator metodą przeciągnij i upuść, jednocześnie pozwalając na wstawianie własnych znaczników, dzięki czemu link, sformatowana notatka lub podpowiedź znajdą się dokładnie tam, gdzie chcesz.

Używamy WPForms na naszych własnych stronach internetowych do formularzy kontaktowych, generowania leadów, corocznych ankiet i nie tylko.

WPForms Lite jest całkowicie darmowy, ale pole HTML używane w tej metodzie jest funkcją płatną. Jest dostępne w planie Basic (39,60 USD/rok) i wyższych.

W tej metodzie pokażemy Ci, jak dodawać fragmenty kodu HTML, aby dostosować Twoje formularze WordPress za pomocą WPForms.

Aby rozpocząć, zainstaluj i aktywuj WPForms.

Po zakończeniu możesz zacząć tworzyć formularze i dodawać niestandardowy kod HTML. W tym przewodniku pokażemy Ci, jak dodać prostą podpowiedź do Twojego formularza kontaktowego.

Aby zacząć, utwórz formularz kontaktowy, przechodząc do WPForms » Dodaj nowy.

W panelu Ustawienia zacznij od nadania 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 decyzja, jak chcesz zbudować swój formularz. Z WPForms możesz zacząć od gotowego szablonu, zbudować od zera lub opisać, czego potrzebujesz, a kreator formularzy AI zrobi to za Ciebie.

Jeśli chcesz skorzystać z kreatora opartego na sztucznej inteligencji, po prostu wprowadź proste polecenie. Sztuczna inteligencja utworzy formularz w ciągu kilku sekund.

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.

Aby przyjrzeć się bliżej szablonowi, możesz skorzystać z wbudowanej funkcji podglądu. Po prostu najedź kursorem na dowolny szablon formularza i kliknij „Zobacz demo”.

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

Spowoduje to uruchomienie kreatora formularzy. Zobaczysz wszystkie narzędzia do dostosowywania w lewym panelu i podgląd na żywo po prawej stronie.

Możesz przeciągać elementy z lewego panelu i upuszczać je w podglądzie na żywo. Możesz również zmieniać kolejność elementów w podglądzie za pomocą przeciągania i upuszczania.

Przewiń w dół lewego panelu do grupy Pola zaawansowane, a następnie przeciągnij i upuść pole HTML bezpośrednio na swój formularz.

Po dodaniu pola HTML kliknij je, aby otworzyć opcje dostosowywania.

Na początek wpisz „Etykietę”, aby pomóc Ci zidentyfikować to pole. Jest to tylko do Twojej wiadomości i nie jest widoczne dla odwiedzających, więc możesz użyć czegokolwiek chcesz. Możesz również pozostawić pole 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 możesz go edytować, aby dopasować do swoich potrzeb. Część title="" kodu dokładnie mówi przeglądarce internetowej, aby utworzyła efekt wyskakującego okienka po najechaniu kursorem, dzięki czemu otrzymasz podpowiedź bez dodawania żadnego kodu CSS do swojej witryny.

Pamiętaj, że WPForms nie wyświetla kodu HTML w podglądzie kreatora formularzy. Aby przetestować podpowiedź, kliknij „Podgląd”.

Spowoduje to otwarcie nowej karty.

Tutaj możesz sprawdzić, czy fragment kodu HTML dla Twojej podpowiedzi działa poprawnie, najeżdżając kursorem na tekst. Po chwili powinna pojawić się podpowiedź.

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

WPForms automatycznie skonfiguruje dla Ciebie ustawienia powiadomień i potwierdzeń. Jeśli jednak chcesz je dostosować, wybierz „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, np. email1@example.com, email2@example.com, email3@example.com.

Po dostosowaniu powiadomień i innych ustawień nadszedł czas, aby opublikować i wstawić formularz WordPress.

Kliknij przycisk „Wstaw” w prawym górnym rogu kreatora formularzy.

Następnie WPForms zapyta, czy chcesz dodać formularz do istniejącej strony, czy do nowej.

W tym przewodniku wybierzemy „Wybierz istniejącą stronę”.

W następnym oknie podręcznym wybierz stronę z listy dostępnych stron. Następnie kliknij „Zaczynajmy!”, aby otworzyć edytor bloków.

Teraz najedź na obszar, w którym chcesz dodać formularz i kliknij przycisk „+”. Następnie wybierz blok WPForms.

Możesz teraz wybrać formularz, który chcesz wyświetlić, korzystając z menu rozwijanego.

Po wybraniu formularza WPForms załaduje go w edytorze bloków.

Gdy będziesz zadowolony z konfiguracji, kliknij przycisk „Aktualizuj”.

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

Zanim wyślesz prawdziwych odwiedzających do formularza, zalecamy przesłanie szybkiego testowego zgłoszenia, aby upewnić się, że wszystko działa.

Po przesłaniu testu przejdź do WPForms » Wszystkie formularze. Tutaj najedź na swój formularz kontaktowy i kliknij „Zgłoszenia”, gdy się pojawi.

Na następnym ekranie zobaczysz wszystkie przesłane formularze.

Tabela wyświetla wszystkie informacje przesłane przez użytkowników, wraz z dokładnym czasem przesłania.

FAQ: Jak dodać formularze HTML w WordPressie

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

Najprawdopodobniej WordPress wyświetla Twój formularz, ale go nie przetwarza. Samo wklejenie formularza HTML na stronę nie wystarczy, aby 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.

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

Tak, absolutnie. Używanie HTML daje Ci pełną kontrolę nad wyglądem i działaniem formularza. 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 eksportować wpisy z formularzy WordPress do formatu CSV i Excel
• Jak dostosować i stylizować formularze WordPress
• Najlepsze wtyczki formularzy kontaktowych 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.