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ż skrót [response] nad formularzem, dzięki czemu jeśli wystąpi błąd w przesyłaniu formularza, zostanie on zgłoszony nad samym formularzem.
Dla standardowego formularza kod generowany przez wtyczkę jest:
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.
Dla dwudziestu piętnastu użytkowników motywów istnieje również styl do dopasowania.
Aby zastosować styl, przejdź do kontaktu Style > Szybka edycja, Sprawdź formularz, do którego chcesz zastosować styl i kliknij Aktualizuj.
Formularz Kontaktowy 7 Styl Niestandardowe Style
Dodaj własne style i zobacz wyniki w locie, przechodząc do kontaktu 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:
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.>
Oto jak wygląda formularz ankiety ze stylizacją Topaz z wykorzystaniem motywu Twenty Fifteen.
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.
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.
Formularz kontaktowy na zamówienie 7 Design For Colormag Theme
Oto forma bez stylizacji. Dziedziczy niebieski kolor przycisku z motywu ColorMag.
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:
A to jest kod:
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ą. The great thing about these plugins jest to, że są wolne, więc możesz dać im szansę i zobaczyć, jak działają przed zaangażowaniem.
A jeśli jesteś zainteresowany przeniesieniem rzeczy na wyższy poziom, sprawdź nasz post o tym, jak jeszcze bardziej rozszerzyć formularz kontaktowy.
Tagi:
