Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak wyświetlić Twój formularz w jednej linii w WordPress (prosty sposób)

Tworzenie formularzy, które są zarówno atrakcyjne, jak i łatwe w użyciu, jest niezbędne dla dobrego doświadczenia użytkownika.

Wyświetlanie formularza w jednej linii może być szczególnie skuteczne w przypadku kompaktowych przestrzeni, takich jak nagłówki, stopki lub panele boczne, dzięki czemu twoja witryna wygląda czysto i profesjonalnie.

Oznacza to, że możesz łatwo dodawać formularze do obszarów witryny o dużym natężeniu ruchu i poprawiać konwersje.

Przez lata eksperymentowaliśmy z różnymi umiejscowieniami formularzy kontaktowych, aby dopracować nasz proces pozyskiwania potencjalnych klientów. To praktyczne doświadczenie nauczyło nas, że proste, jednowierszowe pola mogą prowadzić do wyższych wskaźników wypełnienia.

W tym artykule pokażemy krok po kroku, jak łatwo wyświetlić twój formularz w jednej linii w WordPressie.

How to display your form in a single line in WordPress (easy way)

Dlaczego warto wyświetlać formularze jednowierszowe w WordPress?

Formularze jednowierszowe zapewniają większą elastyczność przy wyborze miejsca, w którym chcesz umieścić swój formularz. Ponieważ ten styl formularza to tylko jedna linia, nie zajmują one dużo miejsca i można je łatwo zintegrować z twoją istniejącą treścią na blogu WordPress.

Na przykład formularze zapisu do newslettera e-mail są często wyświetlane w jednym wierszu nad lub pod treścią wpisu na blogu. Tego rodzaju formularze sprawdzają się również na stronach docelowych, stronach kontaktowych i innych ważnych stronach w twojej witrynie internetowej.

Oprócz generowania większej liczby subskrybentów i potencjalnych klientów, możesz przekształcić dowolny rodzaj formularza w formularz jednowierszowy.

Na przykład, sensowne może być wyświetlanie twojego formularza kontaktowego w jednym wierszu, aby zaoszczędzić miejsce na witrynie internetowej WordPress i sprawić, że twój formularz będzie bardziej responsywny dla urządzeń mobilnych.

Biorąc to pod uwagę, pokażmy, jak wyświetlić formularz jednowierszowy na twojej witrynie WordPress.

Jak utworzyć formularz jednowierszowy w WordPress

W tym poradniku użyjemy wtyczki WPForms do stworzenia formularza jednowierszowego, ponieważ jest to jedna z najlepszych wtyczek do generowania leadów dla WordPressa, z której korzysta ponad 6 milionów witryn internetowych.

Możesz użyć kreatora przeciągnij i upuść, aby szybko utworzyć dowolny formularz WordPress. Ponadto integruje się z popularnymi narzędziami do e-mail marketingu, dzięki czemu możesz łatwo rozwijać swoją listę mailingową.

Więcej informacji można znaleźć w naszej pełnej recenzji WPForms.

WPForms

Uwaga: WPForms ma również wersję premium, do której można uaktualnić. W tym poradniku użyjemy jednak WPForms Lite, ponieważ pozwala on stworzyć prosty formularz kontaktowy i połączyć go z Constant Contact w celu generowania leadów.

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź na stronę WPForms ” Add New na panelu bocznym administratora WordPress i nadaj swojemu formularzowi nazwę. Następnie musisz wybrać twój szablon formularza.

Wybierzemy szablon „Formularz Opt-In”. Wystarczy najechać kursorem na szablon i kliknąć przycisk „Użyj szablonu”.

Select form template

Spowoduje to uruchomienie na ekranie kreatora formularzy WPForms typu „przeciągnij i upuść”.

Zobaczysz, że wybrany przez nas szablon automatycznie zawiera pola nazwy i e-maila oraz przycisk przesyłania.

WPForms drag and drop form builder

Każde pole można edytować, klikając je i wprowadzając zmiany w kolumnie po lewej stronie.

Możesz także przeciągać i upuszczać pola, aby zmienić ich kolejność.

WPForms form editor panel

Po zakończeniu konfigurowania pól możesz wyświetlić swój formularz w jednym wierszu.

Aby to zrobić, przejdź do karty Ustawienia ” Ogólne w kreatorze formularzy, a następnie kliknij menu rozwijane „Zaawansowane”.

Go to form advanced settings

Następnie wpisz „inline-fields” w polu „Form CSS Class” (bez cudzysłowów).

Spowoduje to zastosowanie tej klasy CSS do formularza. Ponieważ WPForms zawiera stylizację dla klasy „inline-fields”, automatycznie zmieni cały twój układ formularza i wyświetli go ładnie w jednej linii.

Add inline CSS class

Następnie możesz sprawić, że twój formularz będzie jeszcze mniejszy, ukrywając etykiety pól.

Aby to zrobić, wystarczy kliknąć pole w formularzu, aby otworzyć jego ustawienia w lewej kolumnie.

Gdy to zrobisz, wybierz opcję menu „Zaawansowane” i kliknij przełącznik „Ukryj etykietę”, aby ją włączyć.

Hide form labels toggle

Następnie musisz zrobić to samo dla wszystkich etykiet pól formularza.

Następnie, w tej samej sekcji „Zaawansowane”, możesz wpisz tekst w polu „Placeholder”.

W ten sposób informujesz użytkowników, do czego służą poszczególne pola formularza.

Add form placeholder text

Po zakończeniu konfigurowania twojego formularza, kliknij przycisk „Zapisz”, aby zapisać ustawienia.

Jeśli używasz swojego formularza do generowania leadów, możesz połączyć swój formularz z dostawcą usług e-mail marketingu. Więcej szczegółów można znaleźć w naszym przewodniku na temat tworzenia newslettera e-mail we właściwy sposób.

Dodanie twojego formularza jednokreskowego do witryny internetowej WordPress

Teraz nadszedł czas, aby dodać twój formularz jednowierszowy do witryny WordPress. Możesz dodać go do dowolnej strony, wpisu lub obszaru widżetu.

Dodamy go do istniejącej strony, ale proces będzie podobny, jeśli dodasz go do innego obszaru twojego bloga WordPress.

Po prostu otwórz stronę, na której chcesz utworzyć formularz jednowierszowy i kliknij przycisk „Dodaj blok” (+), aby otworzyć menu bloków.

Add WPForms block

Następnie kliknij blok „WPForms”, aby dodać go do twojej witryny.

Następnie wybierz utworzony wcześniej formularz jednowierszowy z menu rozwijanego w samym bloku.

Select single line form from drop down

Po wybraniu formularza wtyczka będzie wczytywać podgląd twojego formularza w edytorze treści. Następnie kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby Twój nowy formularz stał się aktywny.

Teraz użytkownik może przejść na twoją witrynę internetową, aby zobaczyć nowy formularz w działaniu.

Single line form example

Bonus: Użyj OptinMonster do tworzenia wyskakujących okienek i banerów

Oprócz tworzenia formularzy jednowierszowych, możesz także tworzyć pływające formularze kontaktowe, wyskakujące okienka opt-in i banery na twojej witrynie internetowej w celu przechwytywania potencjalnych klientów e-mail.

Aby to zrobić, możesz użyć OptinMonster, który jest najlepszym narzędziem do optymalizacji konwersji WordPress na rynku.

OptinMonster umożliwia tworzenie 111111 pięknych formularzy optin, które wyświetlają spersonalizowane i istotne informacje w oparciu o zainteresowania twojego użytkownika i bardzo ułatwiają pozyskiwanie potencjalnych klientów.

Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym poradnikiem na temat tworzenia wyskakującego formularza kontaktowego w WordPress.

Fill contact form popup

Poza tym, możesz również stworzyć atrakcyjne banery na twoją witrynę internetową, prosząc użytkowników o zapisanie się i dołączenie do newslettera.

W ten sposób można przechwycić dane użytkownika bez zajmowania dużo miejsca na witrynie internetowej lub irytowania użytkowników.

Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zbudować listę mailingową za pomocą OptinMonster.

Newsletter banner with OptinMonster

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlić twój formularz w jednym wierszu w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia bardziej interaktywnych formularzy lub naszym wyborem najlepszych alternatyw Typeform.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

2 komentarzeZostaw odpowiedź

  1. Arkady

    Very helpful article!
    Is it possible to move submit button to the left end of line?
    Thank you in advance!

    • WPBeginner Support

      For that, you would place the button on the top instead of the bottom of the form :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.