Jak wyświetlić formularz w jednej linii w WordPress (łatwy sposób)

Wyświetlanie formularza w jednej linii to świetny sposób na oszczędność miejsca, jednocześnie nadając Twojej witrynie schludny wygląd.

Działa to szczególnie dobrze w nagłówkach, stopkach lub paskach bocznych, pozwalając umieścić formularze w obszarach o dużym natężeniu ruchu i zwiększyć konwersje.

W WPBeginner przetestowaliśmy różne umiejscowienia formularzy kontaktowych, aby zoptymalizować nasz proces przechwytywania potencjalnych klientów. Dzięki temu doświadczeniu stwierdziliśmy, że proste formularze często prowadzą do wyższych wskaźników ukończenia.

W tym artykule pokażemy Ci krok po kroku, jak łatwo wyświetlić formularz w jednej linii w WordPress.

Dlaczego wyświetlać formularze jednoliniowe w WordPress?

Formularze jednoliniowe dają większą elastyczność w wyborze miejsca umieszczenia formularzy. Ponieważ ten styl formularza jest tylko jednoliniowy, nie zajmuje dużo miejsca i można go łatwo zintegrować z istniejącą treścią na blogu WordPress.

Na przykład formularze zapisu do newslettera e-mail są często wyświetlane w jednej linii 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 Twojej witryny.

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

Na przykład, może mieć sens wyświetlanie formularza kontaktowego w jednej linii, aby zaoszczędzić miejsce na stronie WordPress i sprawić, by formularz był bardziej responsywny mobilnie.

Mając to na uwadze, pokażemy Ci, jak wyświetlić formularz jednoliniowy na Twojej stronie WordPress.

Jak utworzyć formularz jednoliniowy w WordPress

W tym samouczku będziemy używać wtyczki WPForms. Posiada ona kreator metodą przeciągnij i upuść, który pozwala szybko tworzyć dowolne formularze WordPress. Ponadto integruje się z popularnymi narzędziami do e-mail marketingu, dzięki czemu możesz łatwo powiększyć swoją listę e-mailową.

W WPBeginner używamy tego narzędzia do tworzenia formularzy kontaktowych i corocznych ankiet i widzimy świetne wyniki. Aby uzyskać więcej informacji, zapoznaj się z naszą pełną recenzją WPForms.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress. 

Po aktywacji przejdź do strony WPForms » Dodaj nowy w bocznym menu administracyjnym WordPress i nadaj swojemu formularzowi nazwę. Następnie musisz wybrać szablon formularza.

Wybierzemy szablon „Formularz zapisu”. Po prostu najedź na szablon i kliknij przycisk „Użyj szablonu”.

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

Zobaczysz, że wybrany przez nas szablon automatycznie zawiera pola imienia i adresu e-mail oraz przycisk wysyłania.

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

Możesz również przeciągać i upuszczać pola, aby zmienić ich kolejność.

Po zakończeniu dostosowywania pól możesz wyświetlić swój formularz w jednej linii.

Aby to zrobić, przełącz się na zakładkę Ustawienia » Ogólne w kreatorze formularzy, a następnie kliknij menu rozwijane „Zaawansowane”.

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

Zastosuje to tę klasę CSS do formularza. Ponieważ WPForms zawiera style dla klasy „inline-fields”, automatycznie zmieni układ całego formularza i ładnie wyświetli go w jednej linii.

Następnie możesz jeszcze bardziej zmniejszyć formularz, ukrywając etykiety pól.

Aby to zrobić, po prostu kliknij pole w formularzu, aby otworzyć jego ustawienia w lewej kolumnie.

Po wykonaniu tej czynności wybierz opcję menu „Zaawansowane” i kliknij przełącznik „Ukryj etykietę”, aby go włączyć.

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

Następnie, w tej samej sekcji „Zaawansowane”, możesz wprowadzić tekst w polu „Placeholder” (Tekst zastępczy). 

To mówi użytkownikom, do czego służy każde pole formularza. 

Po zakończeniu dostosowywania formularza, upewnij się, że klikniesz przycisk „Zapisz”, aby przechowywać swoje 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. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem, jak prawidłowo tworzyć newsletter e-mail. 

Dodawanie formularza jednowierszowego do Twojej witryny WordPress

Teraz czas dodać formularz w jednej linii do swojej 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 dodajesz go do innego obszaru swojego bloga WordPress.

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

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

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

Po wybraniu formularza wtyczka załaduje podgląd formularza w edytorze treści. Następnie kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby opublikować nowy formularz.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć swój nowy formularz w akcji. 

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

Oprócz tworzenia formularzy w jednej linii, możesz również tworzyć na swojej stronie pływające formularze kontaktowe, wyskakujące okienka zapisu i banery, aby przechwytywać leady e-mail.

Aby to zrobić, możesz użyć OptinMonster, które 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 usługi pro i newsletter, i uwielbiamy go. Aby dowiedzieć się więcej, zapoznaj się z naszą pełną recenzją OptinMonster.

Narzędzie pozwala tworzyć piękne formularze zapisu, które wyświetlają spersonalizowane i trafne informacje na podstawie zainteresowań użytkownika, i ułatwia przechwytywanie potencjalnych klientów.

Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym samouczkiem, jak tworzyć wyskakujące okienko formularza kontaktowego w WordPress.

Poza tym możesz również tworzyć atrakcyjne banery dla swojej witryny, prosząc użytkowników o zapisanie się i dołączenie do Twojego newslettera.

W ten sposób możesz przechwytywać dane użytkowników, nie zajmując dużo miejsca na stronie internetowej ani nie irytując ich.

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

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać formularz w jednej linii w WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak tworzyć bardziej interaktywne formularze lub naszym wyborem najlepszych alternatyw dla Typeform.

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.