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

Zastanawiasz się, jak stylizować twoje formularze WordPress?

Możesz dostosować swoje formularze do wyglądu witryny internetowej. Może to stworzyć bardziej atrakcyjny wizualnie i profesjonalny wygląd twojej witryny oraz poprawić komfort użytkowania.

W tym artykule pokażemy, jak krok po kroku łatwo dostosować i stylizować formularze WordPress.

Po co dostosowywać i stylizować twoje formularze WordPress?

Po dodaniu formularza do twojej witryny internetowej WordPress za pomocą wtyczki, powiadomienie jest zwykle proste i ma prosty układ.

Na przykład, jeśli dodasz formularz rejestracyjny do twojej witryny internetowej za pomocą wtyczki formularza rejestracyjnego użytkownika, zobaczysz, że jego układ jest nieco nudny. Może to nie przyciągnąć uwagi twojego użytkownika, a nawet zniechęcić go do wypełnienia formularza.

Dostosowując własne formularze, możesz dopasować je do twojego motywu WordPress i brandingu, aby uczynić je bardziej atrakcyjnymi.

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 Twojej witryny internetowej i charakterystycznych kolorów firmy, aby formularz był bardziej zapadający w pamięć i skuteczny.

Powiedziawszy to, zobaczmy, jak krok po kroku łatwo dostosować i stylizować twoje formularze WordPress. W tym wpisie omówimy dwie metody i możesz użyć poniższych szybkich odnośników, aby przejść do tej, której chcesz użyć:

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 do formularzy kontaktowych WordPress na rynku, używana przez ponad 6 milionów witryn internetowych.

WPForms jest wyposażony w kreator typu „przeciągnij i upuść”, który bardzo ułatwia tworzenie dowolnego rodzaju formularza. Ponadto posiada nawet bibliotekę gotowych motywów i wbudowane opcje konfiguratora dla twojego formularza, które nie wymagają żadnego kodowania.

Aby dowiedzieć się więcej, zobacz naszą szczegółową recenzję WPForms.

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Aby uzyskać szczegółowe instrukcje, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź na stronę WPForms ” Ustawienia z panelu bocznego administratora WordPress, aby wpisz swój klucz licencyjny.

Informacje te można znaleźć na Twoim koncie w witrynie internetowej WPForms.

Gdy już to zrobisz, przejdź do ekranu WPForms ” Utwórz nowy z kokpitu WordPress.

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

Na potrzeby tego poradnika stworzymy i dodamy prosty formularz kontaktowy do naszej witryny internetowej.

Spowoduje to uruchomienie szablonu w kreatorze formularzy WPForms, gdzie zobaczysz podgląd formularza po prawej stronie i pola formularza w lewej kolumnie.

Z tego miejsca możesz przeciągnąć i upuścić dowolne wybrane przez ciebie pole formularza do formularza zgodnie z twoimi upodobaniami. Można również zmienić kolejność pól lub je usunąć.

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

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

Następnie należy przejść na stronę WPForms ” Ustawienia z kokpitu WordPress i kliknąć pole wyboru „Użyj nowoczesnych znaczników”. Jeśli tego nie zrobisz, ustawienia konfiguratora WPForms nie będą dostępne w edytorze bloków.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.

Następnie otwórz stronę lub wpis, do którego chcesz dodać utworzony przed chwilą formularz.

W tym miejscu należy kliknąć przycisk dodawania bloku „+” w lewym górnym rogu, aby otworzyć menu bloków i dodać blok WPForms.

Gdy już to zrobisz, po prostu wybierz formularz, który chcesz dodać do swojej witryny z rozwijanego menu w samym bloku.

Po dodaniu formularza nadszedł czas, aby dostosować go i nadać mu styl.

Aby to zrobić, należy otworzyć panel bloków po prawej stronie ekranu i przewinąć w dół do sekcji „Motywy”. Z tego miejsca możesz wybrać z biblioteki ponad 40 wstępnie zaprojektowanych motywów, aby natychmiast nadać Twojemu formularzowi 111111 piękny wygląd.

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

Z menu rozwijanego można wybrać rozmiar pól twojego formularza, a nawet ustawić dla nich rozmiar i promień obramowania.

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

Tutaj możesz użyć charakterystycznych kolorów Twojej marki lub innych kolorów, które są używane na reszcie Twojego bloga WordPress, aby stworzyć atrakcyjny wizualnie formularz.

Gdy to zrobisz, przewiń w dół do sekcji „Style etykiet”, gdzie możesz wybrać wielkość liter etykiet z rozwijanego menu.

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

Aby dostosować przycisk w twoim formularzu, musisz przewinąć w dół do sekcji „Style przycisków” i wybrać jego rozmiar z rozwijanego menu.

Można również ustawić promień obramowania oraz zmienić tło i kolor tekstu przycisku przesyłania formularza.

Po zakończeniu konfiguratora formularza wystarczy kliknąć przycisk „Aktualizuj” lub „Opublikuj” u góry, aby zapisać twoje ustawienia.

Teraz możesz przejść na twoją witrynę, aby zobaczyć stylizowany formularz WordPress w działaniu.

Metoda 2: Jak stylizować formularze WordPress za pomocą CSS (zaawansowany konfigurator)

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

Aby to zrobić, najpierw należy utworzyć formularz za pomocą WPForms, który jest kreatorem formularzy nr 1 na rynku.

Jest to kreator typu „przeciągnij i upuść”, który zawiera wiele szablonów, których można używać do tworzenia formularzy kontaktowych, formularzy przesyłania plików, formularzy rejestracyjnych, formularzy RSVP i wielu innych.

Szczegółowe instrukcje można znaleźć w naszym poradniku na temat tworzenia formularza kontaktowego w WordPress lub w metodzie 1.

Po utworzeniu formularza nadszedł czas, aby dostosować go za pomocą WPCode, który jest najlepszą wtyczką do fragmentów kodu WordPress na rynku.

Jest to najprostszy i najbezpieczniejszy sposób na dodanie kodu CSS do stylizacji twojego formularza WordPress.

Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź na stronę Code Snippets ” + Add Snippet z kokpitu WordPress.

Gdy już się tam znajdziesz, po prostu kliknij przycisk „Użyj fragmentu kodu” pod opcją „Dodaj swój własny kod (nowy fragment kodu)”.

Spowoduje to przejście do strony „Create Custom Snippet”, gdzie można rozpocząć od wpisania rodzaju nazwy dla twojego fragmentu kodu.

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

Następnie skopiuj i wklej poniższy kod w polu „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;
}

Gdy już to zrobisz, będziesz musiał zastąpić domyślny krótki kod u góry krótkim kodem formularza, który chcesz dostosować.

Aby to zrobić, przejdź na stronę WPForms ” Wszystkie formularze z kokpitu WordPress i skopiuj identyfikator WPForms formularza, który chcesz stylizować.

Następnie wklej numer identyfikatora formularza obok linii wpForms- w kodzie. Teraz cały kod będzie wykonywany tylko w tym konkretnym formularzu.

Następnie możesz łatwo zmienić kod szesnastkowy dla koloru tła, dodać wybraną przez ciebie rodzinę pisma oraz skonfigurować dopełnienie i promienie obramowania formularza, zmieniając fragment kodu.

Gdy już to zrobisz, przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.

Kod zostanie automatycznie wykonany na twojej witrynie po włączaniu.

Na koniec przewiń z powrotem do góry strony i przełącz przełącznik na „Włączanie”.

Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Teraz formularz WordPress zostanie automatycznie dostosowany zgodnie z fragmentem kodu CSS i będzie można go zobaczyć.

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

Gdy już się tam znajdziesz, 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ć twoje ustawienia.

Teraz możesz przejść na twoją witrynę WordPress, aby zobaczyć dostosowany formularz w działaniu.

Bonus: Jak tworzyć własne strony witryny internetowej?

Stylizacja formularzy WordPress to tylko jeden ze sposobów na uczynienie twojej witryny bardziej atrakcyjną i interesującą wizualnie. Możesz również zaprojektować swoje własne, w pełni dostosowane strony witryn internetowych za pomocą SeedProd.

Jest to najlepsza na rynku wtyczka do tworzenia stron WordPress, która umożliwia tworzenie atrakcyjnych stron bez użycia jakiegokolwiek kodu.

SeedProd zawiera kreator typu „przeciągnij i upuść”, gotowe szablony i zestawy witryn, łatwe opcje konfiguratora, palety kolorów i zaawansowane bloki stron. Ponadto w edytorze SeedProd można łatwo osadzać twoje formularze WPForms.

Możesz nawet użyć SeedProd do stworzenia wiralowej strony listy oczekujących, strony sprzedażowej, strony obsługi technicznej, strony wkrótce dostępnej i wielu innych.

Więcej szczegółów można znaleźć w naszym poradniku na temat tworzenia strony docelowej w WordPress.

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

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.