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 pasować do reszty.
Najgorsze? Odwiedzający mogą czuć się niepewnie, wypełniając go, jeśli nie pasuje 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. 🚀
📚 Podsumowanie: Dostosowanie formularzy WordPress pomaga dopasować je do brandingu Twojej witryny i sprawia, że są bardziej godne zaufania dla Twoich odwiedzających. W tym przewodniku pokażemy Ci, jak stylizować formularze za pomocą wbudowanych ustawień WPForms lub dodając niestandardowy kod CSS za pomocą wtyczki WPCode.
Dlaczego warto dostosowywać i stylizować formularze WordPress?
Dostosowanie formularzy WordPress pomaga dopasować je do Twojej marki, co buduje zaufanie i może znacząco zwiększyć współczynniki konwersji formularzy. Stylizując formularze, sprawiasz, że są one bardziej atrakcyjne wizualnie i łatwiejsze do nawigacji dla Twoich odwiedzających.
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.
Teraz 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 możesz wykorzystać, aby przejść do tej, której chcesz użyć:
- Method 1: How to Customize and Style WordPress Forms With WPForms (Code-Free Method)
- Method 2: How to Style WordPress Forms With CSS (Advanced Customization)
- Dodatkowa wskazówka 🧑💻: Jak łatwo tworzyć niestandardowe strony internetowe
- Często zadawane pytania dotyczące dostosowywania i stylizowania formularzy WordPress
- Więcej przewodników po używaniu formularzy w WordPress
Zacznijmy!
Metoda 1: Jak dostosować i stylizować formularze WordPress za pomocą WPForms (metoda bez kodu)
WPForms to najlepsza wtyczka do formularzy kontaktowych WordPress z kreatorem typu przeciągnij i upuść. Oferuje ponad 2000 gotowych motywów i wbudowane opcje dostosowywania do stylizacji formularzy bez kodu, a także narzędzia AI do tworzenia formularzy.
Używamy WPForms na WPBeginner do formularzy kontaktowych, migracji stron internetowych i naszej corocznej ankiety. Aby dowiedzieć się więcej o naszym doświadczeniu, zapoznaj się z naszą pełną recenzją WPForms.
Krok 1. Zainstaluj i aktywuj wtyczkę WPForms
Najpierw zarejestrujmy konto WPForms.
Na ich stronie internetowej kliknij przycisk „Get WPForms Now”, wybierz plan i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zakończyć rejestrację.
📝 Uwaga: WPForms ma również wersję darmową, ale gotowe motywy i zaawansowane opcje dostosowywania pokazane w tym przewodniku wymagają wersji WPForms Pro.
Teraz musisz zainstalować i aktywować wtyczkę WPForms.
W obszarze administracyjnym WordPress przejdź do Wtyczki » Dodaj wtyczkę.
Na następnym ekranie możesz użyć paska wyszukiwania, aby szybko znaleźć wtyczkę WPForms.
Kliknij „Zainstaluj teraz”, a następnie „Aktywuj”, aby włączyć ją na swojej stronie WordPress.
Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Jeśli korzystasz z wersji Pro, przejdź do strony WPForms » Ustawienia w bocznym pasku administracyjnym WordPress, aby wprowadzić klucz licencyjny po aktywacji.
Te informacje znajdziesz na swoim koncie na stronie WPForms.
Następnie przejdź do WPForms » Ustawienia w swoim panelu administracyjnym i upewnij się, że zaznaczone jest pole wyboru „Użyj nowoczesnego znacznika”.
Musisz włączyć nowoczesny znacznik, aby odblokować zaawansowane ustawienia projektowania i opcje dostosowywania w edytorze bloków WordPress.
Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.
Krok 2. Utwórz swój formularz WordPress
Stąd przejdźmy do ekranu WPForms » Dodaj nowy z panelu administracyjnego WordPress, aby utworzyć formularz.
Spowoduje to przejście do strony „Konfiguracja”, gdzie możesz zacząć od wpisania nazwy swojego formularza.
Następnie możesz wybrać dowolny szablon formularza, najechać na niego kursorem i kliknąć przycisk „Użyj szablonu” pod nim. W tym samouczku utworzymy i dodamy prosty formularz kontaktowy do naszej witryny.
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.
Wskazówka eksperta: Ponieważ ten formularz zbiera dane odwiedzających, takie jak adresy e-mail i nazwiska, musisz ujawnić te informacje w swojej Polityce prywatności, aby zachować zgodność z RODO.
Po zakończeniu pracy z formularzem po prostu kliknij przycisk „Zapisz” u góry, aby wyjść z kreatora formularzy.
Krok 3. Dostosuj projekt swojego formularza za pomocą motywów WPForms
Jesteś teraz gotowy do dodania formularza do edytora bloków i jego dostosowania. Kliknij przycisk „Osadź” w kreatorze formularzy.
Otworzy się kreator osadzania, w którym możesz wybrać jedną z następujących opcji:
- Wybierz istniejącą stronę – Wybierz stronę w swojej witrynie WordPress i dodaj formularz za pomocą bloku WPForms.
- Utwórz nową stronę – Spowoduje to automatyczne dodanie formularza do nowej strony.
W tym przewodniku wybierzemy opcję „Utwórz nową stronę”.
Następnie dodajmy nazwę dla nowej strony, na przykład „Kontakt”.
Kliknij „Zaczynajmy!”, gdy skończysz.
Otworzy się edytor strony z już osadzonym formularzem.
Szczegółowe informacje znajdziesz w naszym przewodniku jak osadzać formularze w WordPress.
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.
Krok 1. Utwórz swój formularz za pomocą WPForms
Aby rozpocząć, musisz utworzyć formularz za pomocą WPForms. Jest to najlepsza wtyczka do formularzy kontaktowych WordPress z kreatorem typu „przeciągnij i upuść”, oferująca ponad 2000 szablonów, które pomogą Ci szybko tworzyć formularze kontaktowe, formularze przesyłania plików, formularze rejestracyjne i formularze RSVP.
Szczegółowe instrukcje znajdziesz w naszym tutorialu na temat tworzenia formularza kontaktowego w WordPress lub zobacz metodę 1.
Po wykonaniu tej czynności pobierz identyfikator formularza – będzie on potrzebny do niestandardowego fragmentu kodu.
Aby to zrobić, przejdź do strony WPForms » Wszystkie formularze w panelu administracyjnym WordPress i skopiuj numer identyfikacyjny WPForms formularza, który chcesz stylizować.
Krok 2. Zainstaluj i aktywuj WPCode
WPCode to najbezpieczniejszy i najłatwiejszy w użyciu wtyczka do fragmentów kodu WordPress do dodawania niestandardowego CSS w celu stylizacji formularzy. Posiada inteligentną walidację kodu, która zapobiega błędom, oraz gotową bibliotekę fragmentów do personalizacji WordPress.
Używamy WPCode na WPBeginner do dodawania i zarządzania niestandardowymi fragmentami kodu na naszych stronach biznesowych. Aby dowiedzieć się więcej o naszym doświadczeniu, zapoznaj się z naszą pełną recenzją WPCode.
Najpierw możesz utworzyć konto WPCode. Na stronie internetowej WPCode kliknij przycisk „Pobierz WPCode teraz”, wybierz plan i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby się zarejestrować.
📝 Uwaga: WPCode posiada darmową wersję, której możesz użyć do tego tutorialu. Jednakże, jeśli potrzebujesz zaawansowanego planowania kodu lub pełnego dostępu do historii rewizji, będziesz potrzebować WPCode Pro.
Teraz zainstalujmy i aktywujmy wtyczkę WPCode.
W swoim panelu administracyjnym WordPress przejdź do Wtyczki » Dodaj nową.
Następnie możesz użyć pola wyszukiwania, aby szybko znaleźć wtyczkę WPCode.
Gdy ją zobaczysz, kliknij przycisk „Zainstaluj teraz” i „Aktywuj”.
Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.
Krok 3. Dodaj niestandardowy fragment kodu, aby dostosować formularze WordPress
Po aktywacji przejdź do strony Code Snippets » + Dodaj fragment z panelu administracyjnego WordPress.
Następnie najedź kursorem na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Użyj fragmentu”.
Zobaczysz wtedy wyskakujące okienko z prośbą o wybranie typu kodu.
Wybierzmy „Fragment CSS”.
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”. Tagi !important informują przeglądarkę, aby nadała tym stylom priorytet nad domyślnymi ustawieniami Twojego motywu:
#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;
}
Oto jak może to wyglądać na Twoim ekranie:
📝 Uwaga: Nie zapomnij zastąpić tylko symbolu zastępczego 0000 swoim konkretnym identyfikatorem formularza. Upewnij się, że część #wpforms- pozostanie nienaruszona, aby kod działał poprawnie.
Następnie możesz zmienić kod szesnastkowy, np. #ADD8E6, aby dopasować go do konkretnego koloru Twojej marki. Kody te można znaleźć za pomocą dowolnego darmowego narzędzia do wyboru kolorów online.
Możesz również dodać wybraną rodzinę czcionek oraz skonfigurować dopełnienie (odstęp wewnątrz pola) i promień obramowania (zaokrąglone rogi) 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ą stronę WordPress w oknie Incognito lub Prywatnym, aby zobaczyć dostosowany formularz w akcji, ponieważ pamięć podręczna przeglądarki może czasami ukrywać ostatnie zmiany.
🌟 Wskazówka Pro: Po dodaniu niestandardowego CSS zawsze sprawdzaj swój formularz na urządzeniu mobilnym. Może być konieczne dostosowanie wartości dopełnienia, jeśli formularz wygląda zbyt wąsko na mniejszych ekranach.
Dodatkowa wskazówka 🧑💻: Jak łatwo tworzyć niestandardowe strony internetowe
Możesz stylizować swoje formularze WordPress, aby Twoja witryna była bardziej atrakcyjna i interesująca wizualnie. Możliwe jest również projektowanie własnych, w pełni spersonalizowanych stron internetowych przy użyciu SeedProd. Jest to najlepsza wtyczka do tworzenia stron WordPress typu przeciągnij i upuść, służąca do tworzenia stron internetowych i motywów bez kodu.
Dokładnie przetestowaliśmy SeedProd, aby zobaczyć, jak wypada w porównaniu z innymi rozwiązaniami. Aby dowiedzieć się więcej o naszych doświadczeniach, zapoznaj się z naszą pełną recenzją 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.
🌟 Profesjonalna wskazówka: Możesz nawet użyć SeedProd do stworzenia viralowej strony z listą oczekujących, strony sprzedaży, strony konserwacji, strony „wkrótce” i wielu innych.
Często zadawane pytania dotyczące dostosowywania i stylizowania formularzy WordPress
Nadal masz pytania? Oto niektóre z najczęściej zadawanych pytań, które otrzymujemy od czytelników – z odpowiedziami.
Co mogę dostosować w formularzu WordPress?
Możesz dostosować pola, układ, kolory, czcionki, etykiety, komunikaty o błędach i przycisk wysyłania, aby pasowały do projektu Twojej witryny.
Czy potrzebuję umiejętności kodowania, aby stylizować formularze WordPress?
Nie. Dzięki świetnym wtyczkom, takim jak WPForms, możesz dostosowywać i stylizować formularze za pomocą wbudowanych ustawień, bez potrzeby kodowania.
Czy mogę sprawić, aby moje formularze pasowały do brandingu mojej strony internetowej?
Tak. Możesz użyć swoich kolorów marki, czcionek i odstępów, aby formularz naturalnie wpasował się w Twój motyw WordPress.
Czy dostosowywanie i stylizacja formularza wpłynie na jego działanie?
Zmiany wizualne nie wpłyną na funkcjonalność. Po prostu upewnij się, że przetestujesz formularz, jeśli zmienisz wymagane pola lub zasady.
Czy mogę zmienić styl formularza później?
Absolutnie. Możesz zaktualizować projekt w dowolnym momencie, bez konieczności przebudowywania formularza od podstaw.
Więcej przewodników po używaniu formularzy w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dostosowywać i stylizować formularze WordPress.
Możesz również zapoznać się z naszymi poradnikami na temat:
- Jak przesyłać pliki z formularzy WordPress do Google Drive
- Jak pozwolić użytkownikom na robienie zdjęć i nagrywanie filmów na żywo w formularzach WordPress
- Wskazówki, jak sprawić, by Twoje formularze WordPress były bardziej interaktywne
- Jak zautomatyzować formularze WordPress za pomocą n8n, aby zaoszczędzić godziny pracy ręcznej
- Najlepsze alternatywy dla Google Forms (lepsze funkcje + za darmo)
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.
Mrteesurez
Częścią powodów, dla których lubię WPForms, jest fakt, że jest elastyczny i wysoce konfigurowalny dzięki wbudowanym szablonom lub przy użyciu kodu CSS, wystarczy zidentyfikować identyfikator konkretnego formularza, który się personalizuje.
Dobrze zaprojektowany i spersonalizowany formularz przemawia do użytkowników i pozycjonuje Twój formularz jako profesjonalny.
Dziękuję za poradnik.
Wsparcie WPBeginner
Proszę bardzo!
Admin
Jiří Vaněk
Dziękuję za tutorial. Umieściłem formularz kontaktowy na stronie internetowej za pomocą WPForms i pozostawiłem go w stanie domyślnym. Właściwie nawet nie myślałem, że mogę go jakoś dostosować. Dzięki temu artykułowi wpadłem na kilka pomysłów, jak uczynić go bardziej atrakcyjnym graficznie. Dziękuję
Ralph
Dziękuję za ten poradnik.
Teraz mój formularz kontaktowy będzie wyglądał lepiej i bardziej profesjonalnie niż domyślna biała pusta przestrzeń z jasnoszarymi liniami. To podniesie poziom projektu mojej strony internetowej!
Wsparcie WPBeginner
Glad we could help improve your site’s design
Admin