Contact Form 7 to niezwykle popularna wtyczka do tworzenia formularzy kontaktowych WordPress z ponad 3 milionami aktywnych instalacji. Wspiera budowanie formularzy bez kodowania HTML. Formularze mogą zawierać captcha, przesyłanie plików i pola quizu.

Podczas gdy domyślne znaczniki i styl formularza kontaktowego 7 są dobre dla większości podstawowych formularzy kontaktowych, często będziesz chciał je zmienić.

Poprawa Dostępności Formularza Kontaktowego 7: Szybka Uwaga

Jedną z wtyczek, którą polecam zainstalować krótko po dodaniu formularza kontaktowego 7, jest formularz kontaktowy Joe Dolsona 7: Dostępne domyślne ustawienia.

Zmienia to strukturę domyślnego formularza, aby uczynić go bardziej dostępnym poprzez powiązanie etykiet formularza z kontrolkami formularza.

Dodaje również [odpowiedz] shortcode nad formularzem tak, że jeśli wystąpi błąd przesyłania formularza, zostanie on zgłoszony nad samym formularzem.

Dla standardowego formularza kod generowany przez wtyczkę jest:

Ładowanie gist 5d72677b8908c169c16a4cd87138963b

Jeśli chcesz dowiedzieć się więcej o dostępności, sprawdź najlepszy przewodnik po dostępności i WordPress.

Łatwy Formularz Kontaktowy 7 Stylizacji Z Wtyczkami

Jeśli chcesz szybkiego stylu formularza, istnieją wtyczki, które mogą wykonać ciężką pracę, więc nie musisz.

Formularz Kontaktowy 7 Style

Formularz kontaktowy 7 Styl ma wiele gotowych stylów do wyboru, w tym stylów walentynkowych i bożonarodzeniowych.

6 of the styles available in Contact Form 7 Style
Sześć stylów dostępnych w formularzu kontaktowym 7 Style plug.

Dla dwudziestu piętnastu użytkowników motywów istnieje również styl do dopasowania.

Aby zastosować styl, przejdź do Style Kontaktu > Szybka Edycja, zaznacz formularz, do którego chcesz zastosować styl i kliknij Aktualizacja.

Valentine Style Contact Form
Formularz kontaktowy w stylu walentynkowym.

Formularz Kontaktowy 7 Styl Niestandardowe Style

Dodaj własne style i zobacz wyniki w locie, przechodząc do Kontakt Style > Dodaj Nowy.

Za pomocą tego narzędzia można dostosować prawie każdy aspekt formularza, w tym:

  • Marginesy
  • Granice
  • Padding
  • Kolor i tło-w tym Stany najechania
  • Czcionki-w zestawie znajduje się szereg czcionek Google

Po dodaniu wartości do (na przykład) wypełnienia edytor rozsądnie kopiuje wybraną wartość, generując tę samą wartość dla górnego, prawego, dolnego i lewego wypełnienia. Możesz oczywiście dostosować wartości. Jest rozwijane, aby wybrać między pikselami, em lub % też.

Niestandardowy styl, który możesz stworzyć, rozciąga się również na komunikaty o błędach i sukcesach.

Obszar podglądu znajduje się u dołu ekranu; przewiń w dół, aby zobaczyć zmiany.

Oto mój gotowy formularz, używając czcionki Cherry Swash:

Contact Form 7 Cherry Swash
Formularz kontaktowy 7 stylizacji z czcionką Cherry Swash.

Formularz Kontaktowy 7 Skins

Aby użyć formularza kontaktowego 7 skórek, utwórz nowy formularz kontaktowy i przewiń stronę do sekcji SKÓRKI. Tam możesz wybrać szablon i styl dla swojego formularza.

Szablony obejmują formularze wydarzeń, rejestracji i sugestii.

Some of the available templates in Contact Form 7 Skins
Niektóre z dostępnych szablonów w formularzu kontaktowym 7 skórek
Some of the available styles in Contact Form 7 Skins
Niektóre z dostępnych stylów w formularzu kontaktowym 7 skórek

Oto jak wygląda formularz ankiety ze stylizacją Topaz z wykorzystaniem motywu Twenty Fifteen.

Contact Form 7 skin
Formularz kontaktowy 7 skin

Projekt Materiału Dla Formularza Kontaktowego 7

Ta wtyczka stylizuje formularze w stylu projektowania materiału.

Wtyczka sugeruje usunięcie domyślnego formularza i użycie jego skrótów.

Oto przykład z tematem Hestii. Zwróć uwagę na pływającą Etykietę, gdy kursor zostanie przesunięty do określonego pola formularza.

Material Design for Contact Form 7 example
Wzór materiału dla formularza kontaktowego 7 przykład

Dostosowywanie stylu jest dostępne w wersji PRO wtyczki.

Stylizacja formularz kontaktowy 7, Aby Dopasować swój motyw

W większości przypadków formularz kontaktowy 7 dziedziczy stylizację z wybranego motywu. Zobacz ten przykład z motywem Coral Dark.

Contact Form 7 inherits the dark form fields and button with light labels from Coral Dark theme
Formularz kontaktowy 7 dziedziczy ciemne pola formularza i przycisk z jasnymi etykietami z motywu Coral Dark

Formularz kontaktowy na zamówienie 7 Design For Colormag Theme

Oto forma bez stylizacji. Dziedziczy niebieski kolor przycisku z motywu ColorMag.

Contact Form 7 in ColorMag theme, no styling applied
Formularz kontaktowy 7 w temacie ColorMag, bez stylizacji.

Zacząłem od przesłania zdjęcia do wykorzystania jako obraz tła formularza i zmiany kodu etykiet formularza z szarego na biały z Niebieskim cieniem tekstu.

Kolejne zmiany polegały na zwiększeniu marginesów między etykietami formularza a polami formularza, zmianie koloru przycisku Wyślij i dodaniu obramowania, gdy kursor wprowadzi pola formularza.

Wyświetlanie komunikatów o błędzie / sukcesie, gdy formularz jest przesyłany, również wymagało zmiany, aby wyświetlały się poprawnie.

Obracający się GIF po przesłaniu formularza nie pokazał się zbyt dobrze, więc znalazłem alternatywę na Loading.io i odwołuje się do CSS.

To jest ostateczna forma:

Custom Colour Contact Form 7 for ColorMag theme
Niestandardowy kolorowy formularz kontaktowy 7 dla motywu ColorMag

A to jest kod:

Wczytywanie gist d4b4fd201b1fc65cdce55edcdb2bff4d

Dostosowywanie formularza kontaktowego 7 za pomocą odpowiednich narzędzi

W przypadku darmowej wtyczki Formularz kontaktowy 7 jest potężny, zwłaszcza gdy zaczynasz stylizować go za pomocą CSS. Mam nadzieję, że wtyczki w tym samouczku pomogą Ci rozpocząć pracę z własną stylizacją. Wspaniałą rzeczą w tych wtyczkach jest to, że są bezpłatne, więc możesz dać im szansę i zobaczyć, jak działają przed podjęciem decyzji.

A jeśli jesteś zainteresowany przeniesieniem rzeczy na wyższy poziom, sprawdź nasz post o tym, jak jeszcze bardziej rozszerzyć formularz kontaktowy.

Czy korzystasz z formularza kontaktowego 7? Jakie podejście preferujesz do stylizacji formularzy kontaktowych-użyj wtyczki, czy zrób to sam? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…