Wyświetlanie formularza w jednym wierszu to świetny sposób na zaoszczędzenie miejsca, a jednocześnie nadanie twojej witrynie czystego wyglądu.
Szczególnie dobrze sprawdza się w nagłówkach, stopkach lub panelach bocznych, umożliwiając umieszczanie formularzy w miejscach o dużym natężeniu ruchu i zwiększanie konwersji.
W WPBeginner przetestowaliśmy różne rozmieszczenia formularzy kontaktowych, aby zoptymalizować nasz proces pozyskiwania potencjalnych klientów. Dzięki temu doświadczeniu odkryliśmy, że proste formularze często prowadzą do wyższych wskaźników ukończenia.
W tym artykule pokażemy krok po kroku, jak łatwo wyświetlić twój formularz w jednej linii w WordPressie.

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 będziemy używać wtyczki WPForms. Posiada ona kreator typu „przeciągnij i upuść”, który pozwala 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ą.
W WPBeginner używamy tego narzędzia do tworzenia formularzy kontaktowych i corocznych ankiet i widzimy świetne wyniki. Aby uzyskać więcej informacji, zobacz naszą pełną recenzję 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”.

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.

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ść.

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”.

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.

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ć.

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.

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.

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.

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.

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.
Konsekwentnie używamy go w WPBeginner do tworzenia wyskakujących okienek i banerów, które promują nasze profesjonalne usługi i biuletyn, i uwielbiamy to. Aby dowiedzieć się więcej, zobacz naszą pełną recenzję OptinMonster.
Narzędzie to umożliwia tworzenie pięknych formularzy optin, które wyświetlają spersonalizowane i istotne informacje w oparciu o zainteresowania twojego użytkownika i bardzo ułatwia pozyskiwanie potencjalnych klientów.
Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym poradnikiem na temat tworzenia wyskakującego formularza kontaktowego w WordPress.

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.

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.
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
Admin