Wielu użytkowników WordPress zaczyna od Contact Form 7, ponieważ jest darmowy i popularny. Jednak początkowy entuzjazm często przeradza się we frustrację, gdy widzą, jak prosto wyglądają domyślne formularze.
Podstawowa szara stylizacja może kłócić się z resztą Twojej witryny i sprawić, że ogólny projekt będzie mniej dopracowany.
Niestety, Contact Form 7 nie posiada edytora wizualnego ani wbudowanych opcji stylizacji. Oznacza to, że nawet drobne zmiany mogą być przytłaczające, jeśli nie czujesz się komfortowo z kodowaniem.
Więc jeśli kiedykolwiek czułeś się zagubiony, próbując dopasować swoje formularze do swojej marki, zdecydowanie nie jesteś sam!
Dobra wiadomość jest taka, że nie musisz być programistą, aby to naprawić. Za pomocą kilku poprawek CSS możesz nadać swoim formularzom czysty, nowoczesny i w pełni zgodny z marką wygląd.
W tym przyjaznym dla początkujących przewodniku pokażemy Ci krok po kroku, jak dostosować Contact Form 7 — bez potrzeby zaawansowanego kodowania ani umiejętności projektowania.
Dlaczego stylizować formularze Contact Form 7?
Contact Form 7 to jeden z najpopularniejszych pluginów formularzy kontaktowych dla WordPress. Jest darmowy i pozwala na dodanie formularza WordPress za pomocą krótkiego kodu.
Jednak Contact Form 7 jest bardzo ograniczony pod względem funkcji.
Jednym z problemów z Contact Form 7 jest to, że formularze są stylizowane prosto. Ponadto wtyczka nie oferuje żadnych wbudowanych opcji zmiany stylu formularzy.
Utrudnia to dopasowanie projektu formularza kontaktowego do motywu Twojej strony internetowej. Lub jeśli chcesz edytować czcionkę i kolor tła, aby Twój formularz się wyróżniał.
📦 Wskazówka dla wtajemniczonych: Jeśli chcesz bardziej konfigurowalne formularze z zaawansowanymi funkcjami, polecamy WPForms. Posiada kreator formularzy metodą przeciągnij i upuść, narzędzia AI, ponad 2000 gotowych szablonów formularzy i liczne opcje personalizacji.
W rzeczywistości używamy WPForms do prawie wszystkich naszych formularzy – od formularza kontaktowego WPBeginner po nasze coroczne ankiety dla czytelników i formularz zgłoszenia migracji strony. Sprawdź naszą szczegółową recenzję WPForms, aby dowiedzieć się, dlaczego gorąco polecamy ten kreator formularzy.
Jeśli masz ograniczony budżet, istnieje darmowa wersja WPForms. Zawiera ponad 60 szablonów, logikę warunkową, płatności Stripe i inne.
Mamy bezpośrednie porównanie Contact Form 7 vs WPForms, które możesz sprawdzić!
Powiedziawszy to, przyjrzymy się, jak stylizować formularz Contact Form 7 w WordPressie. Oto wszystkie rzeczy, które omówimy w następujących sekcjach:
- Rozpoczęcie pracy z Contact Form 7
- Metoda 1: Stylizacja formularzy Contact Form 7 za pomocą niestandardowego CSS
- Metoda 2: Stylizacja formularzy Contact Form 7 za pomocą CSS Hero
- Dodatkowa wskazówka 💡: Sposób na stylizację formularzy WordPress bez kodu
Zacznijmy!
Rozpoczęcie pracy z Contact Form 7
Najpierw musisz zainstalować i aktywować wtyczkę Contact Form 7 na swojej stronie. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
Po aktywacji możesz przejść do Kontakt » Dodaj nowy z panelu WordPress.
Teraz możesz edytować formularz dla swojej strony internetowej i zacząć od wprowadzenia tytułu dla swojego formularza.
Wtyczka automatycznie doda domyślną nazwę formularza, adres e-mail, temat i pola wiadomości. Możesz jednak dodać więcej pól, po prostu przeciągając i upuszczając je tam, gdzie chcesz.
Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz” i skopiować skróconego kodu.
Następnym krokiem jest osadzenie formularza w swoim poście na blogu lub stronie.
Aby to zrobić, po prostu edytuj post lub dodaj nowy.
Gdy już znajdziesz się w edytorze WordPress, kliknij znak „+” na górze, a następnie dodaj blok Shortcode.
Następnie po prostu wprowadź skrót dla swojego formularza Contact Form 7 w bloku skrótu. Będzie wyglądać mniej więcej tak:
[contact-form-7 id="117" title="Contact Form"]
Teraz opublikuj swój blog WordPress, aby zobaczyć formularz kontaktowy w akcji.
Do tego artykułu użyliśmy domyślnego formularza kontaktowego i dodaliśmy go do strony WordPress. Tak wyglądał formularz kontaktowy na naszej stronie testowej.
Czy jesteś gotowy, aby dostosować swój formularz Contact Form 7 w WordPressie?
Metoda 1: Stylizacja formularzy Contact Form 7 za pomocą niestandardowego CSS
Ponieważ Contact Form 7 nie ma wbudowanych opcji stylizacji, będziesz musiał użyć CSS do stylizacji swoich formularzy.
Contact Form 7 generuje kod formularzy zgodny ze standardami. Każdy element formularza ma przypisany odpowiedni identyfikator i klasę CSS, co ułatwia jego dostosowanie, jeśli znasz CSS.
Każdy formularz Contact Form 7 używa klasy CSS .wpcf7, której możesz użyć do stylizacji swojego formularza.
W tym przykładzie użyjemy niestandardowej czcionki o nazwie Lora w naszych polach wprowadzania i zmienimy kolor tła formularza.
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Jeśli potrzebujesz pomocy w dodawaniu niestandardowego CSS, zapoznaj się z naszym przewodnikiem jak łatwo dodać niestandardowy CSS do witryny WordPress.
Tak wyglądał nasz formularz kontaktowy po zastosowaniu tego CSS.
Stylizowanie wielu formularzy Contact Form 7
Jeśli używasz wielu formularzy kontaktowych i chcesz je stylizować inaczej, będziesz musiał użyć identyfikatora wygenerowanego przez Contact Form 7 dla każdego formularza.
Problem z używanym powyżej kodem CSS polega na tym, że zostanie on zastosowany do wszystkich formularzy Contact Form 7 na Twojej stronie internetowej.
Aby zacząć, po prostu otwórz stronę zawierającą formularz, który chcesz zmodyfikować. Następnie najedź kursorem na pierwsze pole w formularzu, kliknij prawym przyciskiem myszy i wybierz opcję „Inspektuj”.
Ekran przeglądarki podzieli się i 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-f113-p114-o1" lang="en-US" dir="ltr">
Atrybut ID to unikalny identyfikator generowany przez Contact Form 7 dla tego konkretnego formularza. Jest to kombinacja identyfikatora formularza i identyfikatora posta, do którego dodano ten formularz.
Użyjemy tego identyfikatora w naszym CSS do stylizacji naszego formularza kontaktowego i zastąpimy .wpcf7 w naszym pierwszym fragmencie CSS przez #wpcf7-f113-p114-o1.
div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Możesz teraz powtórzyć ten krok dla wszystkich swoich formularzy i zastąpić identyfikator formularza dla każdego formularza Contact Form 7, który chcesz dostosować.
Metoda 2: Stylizacja formularzy Contact Form 7 za pomocą CSS Hero
Łatwiejszym sposobem na zmianę stylu formularzy Contact Form 7 jest użycie CSS Hero. Pozwala on na edycję formularzy bez konieczności pisania kodu CSS.
Po prostu zainstaluj i aktywuj wtyczkę CSS Hero na swojej stronie internetowej. Możesz skorzystać z naszego przewodnika jak zainstalować wtyczkę WordPress.
Następnie przejdź do strony zawierającej Twój formularz i kliknij opcję „Dostosuj za pomocą CSS Hero” na pasku narzędzi u góry.
CSS Hero zapewni Ci łatwy interfejs użytkownika do edycji CSS bez pisania kodu.
Korzystając z wtyczki, możesz kliknąć na dowolne pole, nagłówek i inne elementy formularza, a następnie edytować kolor tła, czcionkę, obramowania, odstępy i wiele więcej.
Po dostosowaniu formularza wystarczy kliknąć przycisk „Zapisz i publikuj” na dole.
Dodatkowa wskazówka 💡: Sposób na stylizację formularzy WordPress bez kodu
Jeśli praca z CSS w Contact Form 7 wydaje Ci się zbyt techniczna, istnieje znacznie łatwiejsze rozwiązanie bez kodu: WPForms.
WPForms to najlepszy kreator formularzy na rynku. Posiada edytor wizualny i gotowe motywy, dzięki czemu możesz w pełni dostosować swoje formularze bez pisania ani jednej linijki kodu.
Oto jak łatwo jest stylizować formularz w WPForms:
Po dodaniu formularza do strony otwórz panel ustawień bloku po prawej stronie i przewiń do sekcji „Motywy”.
Następnie możesz po prostu wybrać spośród ponad 40 pięknych, gotowych motywów, aby natychmiast dopasować projekt swojej witryny.
Poza tym możesz:
- Dostosuj rozmiar pól, obramowania i kolory
- Dostosuj czcionki etykiet, podetykiet i komunikatów o błędach
- Stylizuj przycisk wysyłania, aby pasował do Twojej marki
Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat jak dostosować i stylizować formularze WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stylizować formularze Contact Form 7 w WordPress. Możesz również zapoznać się z naszymi wskazówkami ekspertów dotyczącymi wykorzystania logiki warunkowej w formularzach WordPress oraz naszym ostatecznym przewodnikiem po korzystaniu z formularzy WordPress.
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.
Alejandro
Dzięki!
Twoje instrukcje były bardzo pomocne.
Dziękuję za poświęcony czas na ich udostępnienie!
Wsparcie WPBeginner
Glad our guide was helpful
Admin
hmi
Witam Panie, gdzie mogę znaleźć kod CSS pól?
Dziękuję
Wsparcie WPBeginner
Aby znaleźć bieżący CSS, powinieneś użyć opcji "zbadaj element":
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Tony Tran
nie mogę zmienić koloru tła przycisku wysyłania css…. proszę o pomoc
Wsparcie WPBeginner
Możliwe, że celujesz w niewłaściwy obiekt, być może chcesz zapoznać się z naszym artykułem tutaj:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Deshave
Przycisk wysyłania w PDF przestał działać od czasu przesłania formularza na stronę WordPress.
Wsparcie WPBeginner
Polecany przez nas moduł osadzania plików PDF służy do przeglądania treści. Do wypełniania formularzy zalecamy użycie wtyczki formularza.
Admin
zeeshan alam
Dziękuję za udostępnienie, Panie
Wsparcie WPBeginner
You’re welcome
Admin
Steve
Witaj, czy jest możliwe dodanie komunikatu, jeśli nie wypełnię jednego lub więcej „wymaganych pól”, aby otrzymać komunikat? Ponieważ otrzymuję tylko „czerwone strzałki” przy „wymaganych polach”, których nie wypełniłem. Chciałbym dodatkowo komunikat o błędzie w stylu
„Jedno lub więcej wymaganych pól zawiera błąd. Sprawdź i spróbuj ponownie.”
Ale mam tylko czerwone strzałki, a problem polega na tym, że na telefonach komórkowych czerwone strzałki nie są widoczne w oknie, a Klient ich nie widzi.
Wsparcie WPBeginner
Musiałbyś skontaktować się z pomocą techniczną Contact Form 7, aby dowiedzieć się, co obecnie oferują.
Admin
FRED_VERSATILE
Cześć,
Dziękuję za ten tutorial.
Chciałbym dodać niestandardowy obrazek po prawej stronie etykiety „wyślij” na przycisku.
Zrobiłem to za pomocą :before dla innych przycisków na mojej stronie, ale nie mogę znaleźć elementu w formularzu wysyłania, do którego mógłbym zastosować CSS...
Wsparcie WPBeginner
Depending on your form ot would change what to target, if you use inspect element you should be able to see the ID or class of the object:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
You could also use :after instead of :before as another option
Admin
Muhammad Tahir
Jak zmienić kolor tekstu odpowiedzi DLA KONKRETNEGO formularza kontaktowego
waqas
Czy możemy dodać pole czasu w contact form 7 bez wtyczki?
Mary Lou Hoffman
Jestem nowicjuszem, ale zdeterminowanym, aby to rozgryźć! Więc proszę – podaj mi kroki dla początkujących, jeśli odpowiesz.
Mam formularz kontaktowy7 na mojej stronie internetowej. Czcionka etykiet (Twoje imię, Twój e-mail itp.) wyświetla się jako biała na białym tle.
Jak zmienić kolor – gdzie mam to zmienić?
Próbowałem kopiować i wklejać niektóre kody, które mieliście w waszych odpowiedziach powyżej, ale po prostu pojawiły się na mojej stronie, ale nie zmieniły czcionki.
Karu Price
Możesz tak docelowo obszar etykiety:
.wpcf7 form p label { color: white; background: black; font-family: sans-serif; }
Rita Accarpio
Cześć!
Mam problem z nagłówkami modalnymi. Zmieniłem tło formularza na ciemniejszy kolor, ale teraz chcę zmienić kolor nagłówka. Wydaje się, że wcale się nie zmienia, pomimo wszystkich różnych opcji, które do tej pory wypróbowałem.
Czy wiesz, jak to zrobić? Pomóż mi, proszę!
Dzięki!
Chris
Dzięki!
Abhijeet
Chcę zmniejszyć odstęp między polami imienia i adresu e-mail… jak to zrobić.
Naveen
Dzięki za świetny post, był bardzo pomocny.
Josh
To bardzo pomogło. Dzięki!
Joel Desrosiers
Mój formularz kontaktowy ma ciemne tło obrazu, więc potrzebuję, aby „twoje imię”, „twój e-mail” i „twoja wiadomość” były białe. Nie mogę znaleźć klasy ani identyfikatora dla tych elementów, próbowałem za pomocą narzędzia inspekcji, ale nic nie działa. To jedyny formularz kontaktowy na tej stronie. Używam CSS w arkuszu stylów mojego motywu potomnego i próbowałem różnych opcji, ale nie mogę zmienić koloru. Czy ktoś może mi pomóc?
Merriann Fu
Jestem całkiem nowy w Wordpress i wtyczkach w ogóle, ale mam zainstalowaną tę wtyczkę i wszystko działa poprawnie, ale zamiast widzieć wiadomość osoby, w treści e-maila pojawia się tylko [your-message]. Mam wszystko ustawione jak powyżej i napisane poprawnie, więc nie jestem pewien, co jest problemem. Będę wdzięczny za wszelką pomoc! Dzięki!
Don Walley
Mam ten sam problem. Jestem nowy w formularzach na WP, ale też utknąłem. Próbuję zbudować stronę rejestracji z nazwą firmy, adresem itp. wraz z osobistymi danymi kontaktowymi i listą rozwijaną, aby dokonać wyboru, i oczywiście polem komentarza. Po wielokrotnym testowaniu otrzymuję to samo co Ty; zawartość pola komentarza.
Szkoda, że nie było kilku przykładów na stronie dokumentacji Contact 7; czegoś poza domyślnym formularzem kontaktowym.
Miguel Ceballos
Nie sądzę, że Contact Form 7 jest najpopularniejszy. Jest preinstalowany z wieloma motywami i instalacjami WordPress, dlatego mają tak wielu użytkowników. Jest tak frustrujące edytować cokolwiek w tej wtyczce.
Osama Ali Khan
Witam, jeśli ktoś chce formularz kontaktowy z przezroczystym tłem lub chce dodać formularz kontaktowy 7 na dużym obrazku banerowym z przezroczystym tłem, dodaj ten kod do swojego niestandardowego CSS.
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
background-color: Transparent;
color: BLUE;
width: 100%;
}
div.wpcf7 { color: white; margin: 0; padding: 0; }
Deborah
Jesteś absolutnym wybawcą. Walczyłem z tym od godzin.
Jedna rzecz, którą bym zaznaczył, a która może być przydatna dla innych, to fakt, że próbowałem stylizować przycisk wysyłania, który znajdował się w formularzu kontaktowym 7, który umieściłem w moim pasku bocznym.
Działało to na pierwszej stronie, na której się znajdowało, ale potem nie działało na kolejnych stronach. Zauważyłem jednak, że kod f2 na drugiej stronie miał przyrostek „o2”, a kiedy dodałem go do mojego CSS, stylizacja na tej stronie również zadziałała.
Jeszcze raz dziękuję.
Wsparcie WPBeginner
Glad you found it helpful.
Admin
Mikko
Dzięki za świetny post, był bardzo pomocny. Jedna rzecz nadal mnie dręczy i jest taka, że nie znalazłem sposobu na dostosowanie pól wyboru. Czy znalazłeś sposób, aby na przykład zmienić rozmiar pola wyboru, tak aby działało na każdej przeglądarce?
Wygląda na to, że struktura wejściowa nie została zmodyfikowana, więc nie można było dodać dodatkowych elementów span, aby udawać pola wyboru, czy mam rację?
Cieszę się, jeśli masz czas, aby mi pomóc, pozdrawiam.
Wendy
O mój Boże! Nie masz pojęcia, jak bardzo jestem wdzięczny za ten post! DZIĘKUJĘ!
Chciałem po prostu zmienić czcionkę używaną w przycisku Prześlij. Szukałem godzinami i próbowałem różnych wariantów kodu CSS i nic nie działało, dopóki nie natknąłem się na Twój kod, a następnie dodałem do niego element czcionki. Problem rozwiązany!
pranav shinde
contact-form-7/includes/css/styles.css (nieaktywny) pojawia się to nad moim plikiem edycji css, przez co żadne zmiany nie są stosowane na stronie, pomóż mi, jak go aktywować
Wsparcie WPBeginner
Nie należy edytować plików podstawowych wtyczki. Zamiast tego należy dodać własny kod CSS do arkusza stylów motywu.
Admin
pranav shinde
Tak, zrozumiałem, czy możesz mi pomóc, jak to zrobić.. proszę pomóż mi szczegółowo
pranav shinde
dziękuję bardzo panie bardzo pomocne zasubskrybuję twój kanał
pranav shinde
czy mam skopiować ten kod do pliku css mojego motywu?
Monique
Witam,
Zastanawiam się, czy ktoś może mi pomóc naprawić formularz kontaktowy na urządzenia mobilne. Widzę formularz, ale jest on zbyt szeroki i jest ucinany.
Dziękuję.
puneet singh
ten bardzo pomocny, naprawdę fajny tutorial
Jiniya
Uważam, że Twoja strona internetowa jest bardzo pomocna. Tylko sugestia, byłoby wspaniale, gdybyście wkrótce uruchomili aplikację dla swojej strony internetowej… aplikacje są wygodniejsze niż śledzenie e-maili.
Wsparcie WPBeginner
Brzmi jak dobry pomysł. W międzyczasie możesz uzyskać dostęp do WPBeginner za pomocą aplikacji Feedly na swoim urządzeniu mobilnym.
Admin
Anee
Najważniejsze funkcje w WordPress, które możesz łatwo stylizować, nie potrzebując głębokiej wiedzy do zarządzania swoją witryną w WordPress. W formularzu Contact 7 możesz stworzyć własną strukturę, którą już zaprojektowałeś w HTML lub innym narzędziu.
Neil Murray
Jeśli praca z CSS jest nieco poza Twoimi obecnymi umiejętnościami, możesz również rozważyć użycie https://wordpress.org/plugins/contact-form-7-skins/.
Contact Form 7 Skins, które działają bezpośrednio w standardowym interfejsie Contact Form 7, ułatwiając zwykłym użytkownikom WordPress tworzenie profesjonalnie wyglądających formularzy Contact Form 7 przy użyciu szeregu kompatybilnych szablonów i stylów – nawet jeśli nie masz umiejętności HTML i CSS.
Sam
dzięki Neil
Andrew Wilkerson
Dzięki Neil, myślę, że to właśnie tego potrzebowałem. Byłem podekscytowany i zainstalowałem go, a potem wyczyściłem mój istniejący formularz, więc musiałem przywrócić kopię zapasową mojej witryny, aby działała ponownie. Przyjrzę się temu bliżej, gdy będę miał czas. Chyba będę musiał skopiować mój obecny formularz do niego lub zacząć od nowa z nowym. Idę obejrzeć kilka samouczków. Mam nadzieję, że to nadal najlepszy wybór. Wiem, że to stary post, ale na stronie wtyczki jest napisane, że została niedawno zaktualizowana.
Bhongo
Fantastyczny artykuł. Użyję tego do stylizacji mojej strony internetowej.
Mark
Kolejny dobry artykuł, w którym nie kończysz używając kolejnego wtyczki.