Jak zmienić styl formularza kontaktowego WordPress

Chcesz zmienić styl formularza kontaktowego WordPress? W takim razie ten przewodnik jest dla Ciebie! Dowiesz się, jak stylizacja formularzy WordPress może być super prosta! Dowiedz się więcej.

Przybliżony czas czytania : 6 minut

Masz tylko jedną szansę, aby zrobić pierwsze wrażenie.

A zwrócenie uwagi gości piękną formą to sposób na wywarcie doskonałego wrażenia.

To także doskonały sposób, aby skłonić ich do wypełnienia formularza. W końcu, jak mogą go wypełnić, jeśli go nie widzą?

Tak więc, jeśli jesteś gotowy, aby przejść od podstawowych do pięknych formularzy, ten przewodnik jest dla Ciebie.

Pokażemy Ci dwa sposoby łatwej zmiany stylu formularza kontaktowego WordPress!

Wejdźmy w to.

Jak zmienić styl formularza kontaktowego WordPress

Jak wspomnieliśmy, istnieją dwa sposoby dostosowania stylu formularza

Który z nich wybierzesz, będzie zależeć od poziomu komfortu z kodowaniem. Ale pokażemy Ci obie metody, abyś znał wszystkie dostępne opcje.

Metoda 1: Edytuj kod formularza w WordPress

Więc chcesz rzucić się prosto w wody kodowania, co?

Zakładamy, że masz już zbudowany formularz i chcesz go dostosować. Jeśli nie masz formularza, przejdź do naszego przewodnika na temat tworzenia formularza, aby rozpocząć.

Krok 1: Uzyskaj identyfikator lub klasę swojego formularza

Aby rozpocząć, musisz uzyskać identyfikator lub klasę swojego formularza.

Łatwym sposobem na to jest przejście do swojej witryny, kliknięcie formularza prawym przyciskiem myszy i kliknięcie opcji Sprawdź . Tutaj zobaczymy szablon HTML formularza w Twoim motywie potomnym.

Pasek boczny Narzędzi Google dla programistów wysunie się i będziesz mógł przeglądać różne sekcje kodu swojego formularza.

Najważniejszą rzeczą jest znalezienie obszaru, który chcesz dostosować, i śledzenie identyfikatora lub nazwy klasy . Użyjesz tego do wprowadzenia zmian.

Na przykład, gdybyśmy chcieli zmienić kolor tła naszego szablonu formularza kontaktowego, znaleźliśmy najbardziej zewnętrzny fragment kodu. W tym przypadku jest to div z klasa api-form-box .

Możemy nawet przetestować, jak by to wyglądało z tej konsoli.

Jeśli klikniemy prawym przyciskiem myszy div i klikniemy Dodaj atrybut , możemy dodać styl koloru tła.

Naciśnij Enter, a zmiany zostaną natychmiast pokazane w oknie.

Ale nie martw się. Za każdym razem, gdy odświeżysz stronę, formularz wróci do normy.

Następnie przejdź do administratora WordPress, aby wprowadzić niezbędne zmiany w kodzie CSS.

Krok 2: Zmień CSS w panelu administracyjnym WordPress

Teraz, gdy zanotowałeś kilka rzeczy, które chcesz zmienić w naszym formularzu, przejdź do administratora WordPress, aby rozpocząć.

Następnie na pasku bocznym WordPress wybierz Wygląd → Dostosuj → Dodatkowy CSS, aby nadać styl formularzowi.

Tutaj możesz wprowadzić klasy CSS dla swojego formularza.

Na przykład zdecydowaliśmy się zmienić kilka rzeczy w naszym formularzu, więc oto kod, który wprowadziliśmy:

Aby oznaczyć klasę , musisz dołączyć plik . przed nazwą klasy. Jako identyfikator umieszczasz # .

Jeśli jednak używasz tej metody, zalecamy dowiedzieć się więcej o regułach CSS, aby lepiej zrozumieć zmiany.

Dla naszego przykładu wyglądałoby to tak:

• .api-form-box zmienia kolor tła na jasnoniebieski
• .frm-button-submit zmienia tło przycisku przesyłania na żółte, a tekst na czarny
• .frm-submit wyśrodkowuje przycisk w formularzu

Po tych zmianach nasz formularz wyglądałby tak:

Stąd twoja moc jest nieograniczona. Możesz dostosować swój formularz, jak chcesz, jeśli nauczysz się korzystać z CSS.

Istnieją jednak pewne wady tej metody.

Aktualizacja może spowodować uszkodzenie projektu formularza i spowodować, że zrobisz to ponownie. Nie mówiąc już o tym, że jest to czasochłonne. Jeśli masz wiele formularzy kontaktowych, będziesz musiał edytować kod HTML i dodać niestandardowy CSS do każdego z nich.

Ale jeśli chcesz czegoś prostszego i niezniszczalnego, zalecamy sprawdzenie następującej metody.

Metoda 2: Użyj konstruktora formularzy z wizualnym stylem

Kodowanie to umiejętność, której nauczenie się wymaga czasu.

A wielu ludzi nie ma czasu na naukę. Jeśli to ty, najlepszym rozwiązaniem jest narzędzie do tworzenia formularzy.

A jeden, który polecamy, to Formidable Forms .

Jest to najbardziej zaawansowana wtyczka WordPress do tworzenia formularzy WordPress, co oznacza, że ​​tworzenie formularzy jest proste i oszczędza czas, co pozwala poświęcić więcej czasu na inne obszary witryny.

Bez względu na rodzaj formularza w Twojej witrynie, Formidable poradzi sobie z nim szybko.

Bez kodowania, bez kłopotów — po prostu łatwe tworzenie formularzy.

Do wyboru są inne narzędzia do tworzenia formularzy (WPForms, Gravity Forms i inne), ale nie oferują one możliwości stylizacji, które są dostępne w Formidable. A to oznacza, że ​​masz większą kontrolę nad tym, jak wygląda Twoja forma.

Zalecamy również sprawdzenie planów premium Formidable.

Chociaż nie są wymagane do nadawania stylu formularzowi, masz wiele wspaniałych funkcji:

• Dostęp do szablonów projektów formularzy
• Możliwość dostosowania obrazu tła
• Więcej szablonów formularzy, aby szybciej rozpocząć korzystanie z formularza
• I wiele więcej

Tak więc, gdy już zainstalujesz i aktywujesz Formidable, będziesz gotowy do startu.

Zdobądź Formidable Forms już teraz!

Wystarczą trzy proste kroki, aby dostosować styl formularza i udostępnić go w witrynie:

1. Utwórz formularz
2. Stylizuj formę
3. Wyświetl formularz

Krok 1: Utwórz formularz

Aby stylizować formę, potrzebujesz formy do stylizacji, prawda?

Udaj się więc do administratora WordPress i przejdź do Formidable → Formularze → Dodaj nowy .

Aby rozpocząć, możesz wybrać jeden z wielu gotowych szablonów (funkcja premium) lub pusty formularz .

Następnie nadaj formularzowi nazwę i kliknij Utwórz .

Wtyczka przeniesie Cię do kreatora typu „przeciągnij i upuść”, w którym możesz łatwo edytować swój formularz.

Dodaj dowolne pola formularza, dostosuj etykiety pól, zmień typ wprowadzania danych i nie tylko z menu na pasku bocznym.

Jeśli tworzysz formularz kontaktowy, najlepiej dodać następujące elementy:

• Pole tekstowe na nazwisko odwiedzającego
• E-mail , aby dowiedzieć się, jak się z nimi skontaktować
• Akapit wiadomości, którą chcą dodać

Po skonfigurowaniu formularza kontaktowego kliknij Aktualizuj , aby zapisać zmiany.

Następnie przejdziemy do zakładki Styl .

Krok 2: Stylizuj formularz

Na karcie Styl zobaczysz kilka opcji.

Możesz wybrać jeden z naszych gotowych szablonów projektów, aby zaoszczędzić czas (premium) lub rozpocząć projektowanie własnych.

Aby zaprojektować własny, kliknij trzy kropki obok Formidable Style i kliknij Edytuj . Styl Formidable jest domyślnym stylem w grze Formidable.

Spowoduje to przejście do naszego projektanta Formidable Style, w którym możesz dostosować swój formularz.

Możesz zmienić rozmiar i kolor etykiet, pól wprowadzania, rozmiaru czcionki i koloru tła, a nawet przesłać obraz tła!

Na przykład dla witryny testowej o nazwie Tanie i tandetne zaprojektowaliśmy formularz, który odzwierciedla działalność firmy:

Możliwości są nieograniczone dla Ciebie i Twojego formularza kontaktowego!

Kliknij Aktualizuj , aby zapisać zmiany po dostosowaniu formularza.

Teraz musimy go tylko wyeksponować!

Krok 3: Wyświetl formularz

Wyświetlanie formularza jest jeszcze łatwiejsze niż jego tworzenie.

Najpierw przejdź do posta lub strony, na której chcesz pokazać swój formularz i dodaj nowy blok WordPress.

Następnie wyszukaj blok Formidable Forms , dodaj go i wybierz swój formularz z menu rozwijanego.

Na koniec zaktualizuj swój post lub stronę, a Twój formularz będzie aktywny na Twojej stronie!

Powiedzieliśmy ci, że to łatwe, jak wszystko z Formidable.

Zdobądź Formidable Forms już teraz!

Gotowy do stylizowania formularzy kontaktowych WordPress w swojej witrynie?

Możliwość stylizowania formularzy kontaktowych jest czymś, czego potrzebujesz , a nie chcesz.

Możesz zobaczyć wyszukiwania wtyczki Contact Form 7 związane z ich dostosowaniem. Rzeczy takie jak Contact Form 7 CSS, wpisz tekst w WPCF7 lub wpisz e-mail w WPCF7.

Nic z tego nie jest konieczne w przypadku tych dwóch metod. A ten post nauczył Cię, jak dostosować formularz kontaktowy w WordPress, aby Twój formularz wyglądał tak, jak chcesz. Niezależnie od tego, czy wprowadzasz niestandardowy kod HTML, CSS i inne, czy korzystasz z Formidable Forms. Nie będziesz rozczarowany.

Więc nie czekaj dłużej. Chwyć Formidable Forms i zacznij projektować swoje formularze!

Śledź nas na Facebooku, Twitterze i YouTube, aby uzyskać więcej świetnych wskazówek i sztuczek dotyczących formularzy!

Przeczytaj więcej na blogu Formidable

• Formidable Forms 6.0! Szablony stylów, akcja formularza potwierdzenia + więcej
  Czytaj więcej

  Jotform vs Typeform vs Formidable Forms [Porównanie]
  Czytaj więcej

  Jak korzystać z formularza kontaktowego WordPress do przekierowania po przesłaniu
  Czytaj więcej

Czy wiesz, że Formidable Forms to jedna z najszybszych dostępnych obecnie wtyczek WordPress do tworzenia formularzy? Jeśli jeszcze go nie używasz, zacznij od naszej bezpłatnej wtyczki lub w pełni funkcjonalnej wersji pro!