Jak dostosować i stylizować formularze WordPress (2 proste metody)

Zwykły, nieporęczny formularz WordPress może sprawić, że nawet najlepiej zaprojektowana strona internetowa będzie wyglądać na niedokończoną i zupełnie nie na miejscu. Najgorsze? Odwiedzający mogą mieć wątpliwości co do jego wypełnienia, jeśli nie pasuje on do reszty Twojej witryny.

Podczas naszej podróży z prowadzeniem bloga WordPress nauczyliśmy się, że dobrze zaprojektowane, markowe formularze mogą zrobić dużą różnicę.

W rzeczywistości, kiedy dopasowaliśmy nasze formularze do kolorów i układu naszej strony, zaobserwowaliśmy ogromny wzrost liczby zgłoszeń formularzy.

W tym przewodniku pokażemy Ci dwa proste, ale potężne sposoby dostosowywania i stylizowania formularzy WordPress, dzięki czemu nie tylko będą świetnie wyglądać, ale także będą działać lepiej. 🚀

Dlaczego warto dostosowywać i stylizować formularze WordPress?

Kiedy dodajesz formularz do swojej strony WordPress za pomocą wtyczki, zauważysz, że jego układ jest zazwyczaj prosty i mało wyrazisty.

Na przykład, jeśli dodasz formularz rejestracji do swojej witryny za pomocą wtyczki do formularzy rejestracji użytkowników, zauważysz, że jego układ jest nieco nudny. Może to nie przyciągnąć uwagi odwiedzających, a nawet zniechęcić ich do wypełnienia formularza.

Dostosowywanie formularzy może sprawić, że będą one bardziej atrakcyjne, dopasowując je do Twojego motywu WordPress i brandingu.

Może to prowadzić do większej liczby konwersji, ponieważ stylizowane formularze WordPress są łatwiejsze w nawigacji i mogą zachęcić więcej użytkowników do ich wypełnienia.

Stylizowane formularze mogą również zwiększyć świadomość Twojej marki wśród użytkowników. Na przykład możesz użyć logo swojej witryny i charakterystycznych kolorów firmy, aby Twój formularz był bardziej zapadający w pamięć i skuteczny.

Mówiąc to, pokażemy Ci, jak łatwo dostosować i stylizować formularze WordPress krok po kroku. W tym poście omówimy dwie metody, a poniższe szybkie linki pozwolą Ci przejść do tej, której chcesz użyć:

• Metoda 1: Jak dostosować i stylizować formularze WordPress za pomocą WPForms (metoda bez kodu)
• Metoda 2: Jak stylizować formularze WordPress za pomocą CSS (zaawansowane dostosowywanie)
• Dodatkowa wskazówka 🧑‍💻: Jak łatwo tworzyć niestandardowe strony internetowe

Zacznijmy!

Metoda 1: Jak dostosować i stylizować formularze WordPress za pomocą WPForms (metoda bez kodu)

Możesz łatwo dostosować i stylizować swoje formularze WordPress za pomocą WPForms. Jest to najlepsza wtyczka formularzy kontaktowych WordPress na rynku, używana przez ponad 6 milionów stron internetowych.

Sami używamy WPForms do wielu typów formularzy i możesz dowiedzieć się więcej o wtyczce w naszej szczegółowej recenzji WPForms.

WPForms posiada kreator typu „przeciągnij i upuść”, który sprawia, że tworzenie dowolnego rodzaju formularza jest niezwykle łatwe. Posiada nawet obszerną bibliotekę ponad 2000 gotowych motywów i wbudowane opcje dostosowywania formularza, które nie wymagają żadnego kodowania.

Posiada również narzędzia AI, które pomogą Ci tworzyć niestandardowe formularze od podstaw, używając prostego polecenia i generując wiele opcji dla pól takich jak rozwijane, przyciski radiowe lub pola wyboru.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji odwiedź stronę WPForms » Ustawienia z paska bocznego administratora WordPress, aby wprowadzić swój klucz licencyjny.

Te informacje znajdziesz na swoim koncie na stronie WPForms.

Po wykonaniu tej czynności przejdź do ekranu WPForms » Dodaj nowy z panelu WordPress.

Spowoduje to przejście do strony „Wybierz szablon”, gdzie możesz zacząć od wpisania nazwy swojego formularza. Następnie możesz wybrać dowolny szablon formularza i kliknąć przycisk „Użyj szablonu” pod nim.

Na potrzeby tego tutorialu stworzymy i dodamy prosty formularz kontaktowy do naszej strony internetowej.

Spowoduje to uruchomienie szablonu w kreatorze formularzy WPForms, gdzie po prawej stronie zobaczysz podgląd formularza, a po lewej kolumnę pól formularza.

Stąd możesz przeciągać i upuszczać dowolne pola formularza według własnego uznania. Możesz również zmieniać kolejność lub usuwać pola.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym samouczkiem na temat tworzenia formularza kontaktowego w WordPress.

Po zakończeniu pracy z formularzem po prostu kliknij przycisk „Zapisz” u góry, aby wyjść z kreatora formularzy.

Następnie musisz odwiedzić stronę Ustawienia WPForms z panelu administracyjnego WordPress i zaznaczyć pole wyboru „Użyj nowoczesnego znacznika”. Jeśli tego nie zrobisz, ustawienia dostosowywania WPForms nie będą dostępne w edytorze bloków.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.

Następnie otwórz stronę lub wpis, na którym chcesz dodać formularz, który właśnie utworzyłeś.

Stąd musisz kliknąć przycisk dodawania bloku „+” w lewym górnym rogu, aby otworzyć menu bloków i dodać blok WPForms.

Po wykonaniu tej czynności po prostu wybierz formularz, który chcesz dodać do swojej witryny, z menu rozwijanego w samym bloku.

Teraz, gdy dodałeś formularz, czas na jego dostosowanie i stylizację.

Aby to zrobić, musisz otworzyć panel bloków po prawej stronie ekranu i przewinąć w dół do sekcji „Motywy”.

Stąd możesz wybierać spośród biblioteki ponad 40 gotowych szablonów, aby natychmiast nadać swojemu formularzowi piękny wygląd.

Następnie możesz przewinąć w dół do sekcji „Style pól”, aby dalej dostosowywać swój formularz.

Możesz wybrać rozmiar pól formularza z menu rozwijanego, a nawet ustawić rozmiar ich obramowania i promień.

Następnie możesz zmienić kolor tła, tekstu i obramowania pól formularza za pomocą narzędzia do wyboru kolorów.

Tutaj możesz użyć charakterystycznych kolorów swojej marki lub innych kolorów używanych w pozostałej części Twojego bloga WordPress, aby stworzyć atrakcyjny wizualnie formularz.

Po wykonaniu tej czynności przewiń w dół do sekcji „Style etykiet”, gdzie możesz wybrać rozmiar czcionki etykiet z menu rozwijanego.

Następnie możesz również zmienić kolor czcionki etykiet pól, etykiet pomocniczych i komunikatów o błędach, które będą wyświetlane w Twoim formularzu.

Aby dostosować przycisk w formularzu, przewiń w dół do sekcji „Style przycisku” i wybierz jego rozmiar z menu rozwijanego.

Możesz również ustawić promień obramowania oraz zmienić kolor tła i tekstu przycisku wysyłania formularza.

Po zakończeniu dostosowywania formularza po prostu kliknij przycisk „Zaktualizuj” lub „Opublikuj” na górze, aby zapisać swoje ustawienia.

Teraz możesz odwiedzić swoją witrynę WordPress, aby zobaczyć stylizowany formularz w akcji.

Metoda 2: Jak stylizować formularze WordPress za pomocą CSS (zaawansowane dostosowywanie)

Jeśli nie chcesz korzystać z opcji dostosowywania oferowanych przez WPForms lub chcesz zastosować inne dostosowania za pomocą CSS, możesz również użyć niestandardowego fragmentu kodu CSS.

Aby to zrobić, najpierw musisz utworzyć formularz za pomocą WPForms, który jest najlepszym kreatorem formularzy na rynku.

Używa kreatora metodą przeciągnij i upuść i zawiera ponad 2000 szablonów, które pomogą Ci szybko tworzyć formularze, w tym formularze kontaktowe, formularze przesyłania plików, formularze rejestracyjne, formularze RSVP i wiele więcej!

Szczegółowe instrukcje znajdziesz w naszym tutorialu na temat tworzenia formularza kontaktowego w WordPress lub zobacz metodę 1.

Po utworzeniu formularza czas go dostosować za pomocą WPCode. Jest to najlepsza wtyczka fragmentów kodu WordPress na rynku, oferująca najłatwiejszy i najbezpieczniejszy sposób dodawania kodu CSS do stylizacji formularza WordPress.

Niektóre z naszych stron biznesowych używają WPCode do dodawania i zarządzania niestandardowymi fragmentami kodu, i działa to wyjątkowo dobrze. Zobacz naszą pełną recenzję WPCode, aby uzyskać szczegółowe informacje o narzędziu.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Code Snippets » + Dodaj fragment z panelu administracyjnego WordPress.

Gdy już tam będziesz, po prostu kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.

Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wpisania nazwy dla swojego fragmentu kodu.

Następnie wybierz opcję „Fragment kodu CSS” z menu rozwijanego w prawym rogu ekranu.

Następnie skopiuj i wklej poniższy kod do pola „Podgląd kodu”:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Po wykonaniu tej czynności będziesz musiał zastąpić domyślny skrócony kod na górze skróconym kodem formularza, który chcesz dostosować.

Aby to zrobić, przejdź do strony WPForms » Wszystkie formularze z panelu administracyjnego WordPress i skopiuj numer ID formularza WPForms, który chcesz stylizować.

Następnie wklej numer identyfikacyjny formularza obok linii wpforms- w kodzie. Teraz cały kod zostanie wykonany tylko w tym konkretnym formularzu.

Następnie możesz łatwo zmienić kod szesnastkowy dla koloru tła, dodać wybraną rodzinę czcionek oraz skonfigurować dopełnienie i zaokrąglenie narożników formularza, zmieniając fragment kodu.

Po wykonaniu tej czynności przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.

Kod zostanie automatycznie wykonany na Twojej stronie po aktywacji.

Na koniec przewiń z powrotem na górę strony i przełącz przełącznik na „Aktywny”.

Następnie kliknij przycisk „Zapisz snippet”, aby zapisać swoje ustawienia

Teraz formularz WordPress zostanie automatycznie dostosowany zgodnie ze snippetem CSS, a Ty możesz go wyświetlić.

Jeśli jednak nie dodałeś jeszcze formularza do swojej witryny, otwórz stronę lub wpis w edytorze bloków.

Gdy już tam będziesz, kliknij przycisk „+” w lewym górnym rogu, aby otworzyć menu bloków i dodać blok WPForms.

Następnie wybierz formularz, który stylizowałeś za pomocą fragmentu kodu CSS z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.

Teraz możesz odwiedzić swoją witrynę WordPress, aby zobaczyć dostosowany formularz w akcji.

Dodatkowa wskazówka 🧑‍💻: Jak łatwo tworzyć niestandardowe strony internetowe

Stylizowanie formularzy WordPress to tylko jeden ze sposobów na uczynienie Twojej witryny bardziej atrakcyjną i interesującą wizualnie. Możesz również zaprojektować własne, w pełni spersonalizowane strony internetowe za pomocą SeedProd.

Jest to najlepsza wtyczka do tworzenia stron WordPress na rynku. Pozwala ona na tworzenie atrakcyjnych stron bez użycia kodu.

Niektóre z naszych marek partnerskich zbudowały całe swoje strony internetowe przy użyciu SeedProd. Jest to potężny kreator typu „przeciągnij i upuść”, który wykracza poza zwykłe strony docelowe! Dowiedz się więcej o tym narzędziu w naszej kompletnej recenzji SeedProd.

SeedProd posiada również gotowe szablony i zestawy stron, łatwe opcje dostosowywania, palety kolorów i zaawansowane bloki stron. Ponadto, możesz łatwo osadzić swoje formularze WPForms w edytorze SeedProd.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym poradnikiem na temat tworzenia strony docelowej w WordPressie.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dostosować i stylizować formularze WordPress. Możesz również zapoznać się z naszym samouczkiem na temat jak łatwo dodać pole kodu kuponu do formularzy WordPress oraz naszym porównaniem WPForms vs. Gravity Forms vs. Formidable Forms.

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.