W artykule:
Z ponad 1 milionem aktywnych użytkowników formularz kontaktowy 7 jest jedną z najpopularniejszych wtyczek do formularzy kontaktowych dla WordPress. Ich największym minusem jest to, że formularze po wyjęciu z pudełka, które dodajesz, są bardzo proste. Na szczęście formularz kontaktowy 7 można łatwo stylizować za pomocą CSS w motywie WordPress. W tym artykule pokażemy Ci, jak stylizować formularz kontaktowy 7 formularzy w WordPress.
Uwaga: Nie zalecamy już wtyczki Contact Form 7. Zamiast tego zalecamy WPForms, która jest najbardziej przyjazną dla początkujących wtyczką do formularzy kontaktowych. Możesz również pobrać WPForms Lite za darmo.
Mamy przewodnik krok po kroku, jak utworzyć formularz kontaktowy w WordPress.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Pierwsze Kroki
Zakładamy, że masz już zainstalowaną wtyczkę Contact Form 7 i utworzyłeś swój pierwszy formularz kontaktowy. Następnym krokiem jest skopiowanie krótkiego kodu formularza kontaktowego i wklejenie go w poście WordPress lub stronie, na której ma się pojawić formularz.
Ze względu na ten artykuł użyliśmy domyślnego formularza kontaktowego i dodaliśmy go do strony WordPress. Tak wyglądał formularz kontaktowy na naszej stronie testowej.
Jak widać, formularz kontaktowy dziedziczy niektóre style formularzy z Twojego motywu WordPress. Poza tym to bardzo proste.
Będziemy stylizować formularz kontaktowy 7 formularzy za pomocą CSS. Cały CSS trafia do arkusza stylów motywu lub motywu podrzędnego.
Stylizacja formularz kontaktowy 7 formularzy w WordPress
Formularz kontaktowy 7 generuje bardzo przydatny i Zgodny ze standardem kod dla formularzy. Każdy element w formularzu ma odpowiedni identyfikator i powiązaną z nim klasę CSS.
Każdy formularz kontaktowy wykorzystuje klasę CSS .wpcf7 które można wykorzystać do stylizacji formy.
W tym przykładzie używamy czcionki Google Lora w naszych polach wejściowych. Zobacz jak dodać Google Fonts w WordPress.
div.wpcf7 {
background-color: # fbefde;
border: 1px solid # f28f27;
padding: 20px;
}
.wpcf7 input[type = "text"],
.wpcf7 input[type = "email"],
.wpcf7 textarea {
tło: # 725f4c;
color: # FFF;
font-family: lora, sans-serif;
font-style: italic;
}
.wpcf7 input[type = "submit"],
.wpcf7 input[type= "button"] {
background-color: # 725f4c;
Szerokość: 100%;
text-align:center;
text-transform: wielkie litery;
}
Tak wyglądał nasz formularz kontaktowy po zastosowaniu tego CSS.
Stylizacja Wielu Formularzy Kontaktowych 7 Formularzy
Problem z CSS, którego użyliśmy powyżej, polega na tym, że zostanie on zastosowany do wszystkich formularzy formularza kontaktowego 7 na twojej stronie. Jeśli używasz wielu formularzy kontaktowych i chcesz je stylizować inaczej, musisz użyć identyfikatora wygenerowanego przez formularz kontaktowy 7 dla każdego formularza.
Po prostu otwórz stronę zawierającą formularz, który chcesz zmodyfikować. Przenieś mysz do pierwszego pola w formularzu, kliknij prawym przyciskiem myszy i wybierz Inspect Element. Ekran przeglądarki zostanie podzielony, a zobaczysz kod źródłowy strony. W kodzie źródłowym musisz zlokalizować linię początkową kodu formularza.
Jak widać na powyższym zrzucie ekranu, nasz kod formularza kontaktowego zaczyna się od linii:
< div role= "form" class = "wpcf7" id = " wpcf7-f201-p203-o1 "lang=" en-US"dir = "ltr">
Atrybut id jest unikalnym identyfikatorem generowanym przez formularz kontaktowy 7 dla tego konkretnego formularza. Jest to kombinacja form id I post id, gdzie ten formularz jest dodawany.
Użyjemy tego identyfikatora w naszym CSS, aby stylizować nasz formularz kontaktowy. Zastąpimy .wpcf7 w naszym pierwszym fragmencie CSS z # wpcf7-f201-p203-o1.
div # wpcf7-f201-p203-o1{
background-color: # fbefde;
border: 1px solid # f28f27;
padding: 20px;
}
# wpcf7-f201-p203-O1 input [type= "text"],
# wpcf7-f201-p203-O1 input[type = "email"],
# wpcf7-f201-p203-o1 textarea {
tło: # 725f4c;
color: # FFF;
rodzina czcionek: lora, "Open Sans", sans-serif;
font-style: italic;
}
# wpcf7-f201-p203-O1 input [type= "submit"],
# wpcf7-F201-p203-O1 input[type="button"] {
background-color: # 725f4c;
Szerokość: 100%;
text-align:center;
text-transform: wielkie litery;
}
Stylizacja formularz kontaktowy 7 formularzy z CSS Hero
Wielu początkujących WordPress nie ma żadnego doświadczenia w pisaniu CSS i nie chcą spędzać czasu na nauce go. Na szczęście istnieje wspaniałe rozwiązanie dla początkujących, które pozwoli Ci nie tylko stylizować formularz kontaktowy, ale prawie każdy aspekt witryny WordPress.
Wystarczy zainstalować i aktywować wtyczkę CSS Hero i przejść do strony zawierającej formularz. Kliknij pasek narzędzi Bohatera CSS, a następnie kliknij element, który chcesz stylizować. CSS Hero zapewni Ci łatwy interfejs użytkownika do edycji CSS bez pisania kodu.
Zobacz naszą pełną recenzję CSS Hero I jak go używać do stylizacji czegokolwiek w witrynie WordPress. Możesz użyć kodu kuponu CSS Hero WPBeginner aby uzyskać ekskluzywny 34% zniżki.
To wszystko, mamy nadzieję, że ten artykuł pomógł Ci nauczyć się stylizować formularz kontaktowy 7 w WordPress. Możesz również zobaczyć nasz przewodnik, Jak dodać wyskakujące okienko formularza kontaktowego w WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
