Formularz kontaktowy 7 to wtyczka WordPress niezwykle popularny do tworzenia formularzy kontaktowych. Pozwala tworzyć formularze bez kodowania HTML. te formularze może oferować funkcje takie jak CAPTCHA, pobieranie plików, pola ankiet itd ...

Chociaż domyślny styl Formularza kontaktowego 7 jest wystarczający dla większości podstawowych formularzy kontaktowych, często trzeba go zmienić.

Zmienia to domyślną strukturę formularza, aby uczynić go bardziej dostępnym. Dodaje również krótki kod [responsywny] nad formularzem tak, aby w przypadku błędu podczas przesyłania formularza był on zaznaczony na formularzu.

Jeśli nigdy nie tworzyłeś witryny WordPress, dowiedz się Jak zainstalować blog WordPress za pomocą klienta FTP

W przypadku standardowego formularza kod generowany przez wtyczkę to:

[odpowiedź] Twoje imię i nazwisko (wymagane) [tekst * twoje-imię i nazwisko: twoje-imię] Twój e-mail (wymagane) [e-mail * twój-adres e-mail: twój-e-mail] Twój temat [tekst twój-temat: twój-temat] Twoja wiadomość [textarea twoja-wiadomość id: twoja-wiadomość] [prześlij "Wyślij"]

Niektóre wtyczki dostosowane do formularza kontaktowego 7

1. Formularz kontaktowy Styl 7

wtyczka Formularz kontaktowy Styl 7 ma wiele stylów do wyboru.

Dla użytkowników motywu Twenty Fifteen istnieje również kompatybilny styl.

Aby zastosować styl, przejdź do „ Style kontaktu> Szybka edycja Sprawdź formę, w której chcesz zastosować styl, a następnie kliknij „ Aktualizacja ".

2. Formularz kontaktowy Skórki 7

Aby używać Skóry Formularz kontaktowy 7, Stwórz nowy formularz kontaktowy i przewiń stronę w dół do sekcji Skórki. Możesz wybrać szablon i styl dla swojego formularza.

Znajdziesz modele dedykowane formomevenements, rejestracja i zawiadomienie.

Tak wygląda formularz ankiety w stylu Topaz przy użyciu motywu Twenty Fifteen.

3. Materiał do formularza kontaktowego

Style są oparte na stylu Materiał Projektowanie.

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

Oto przykład z motywem Hestia. Zwróć uwagę na pływającą etykietę, gdy wskaźnik zostanie przeniesiony do pola w formularzu.

Formularz kontaktowy 7 test na niektórych Motywy WordPress

Formularz kontaktowy z motywem ColorMag WordPress

Przez większość czasu Formularz kontaktowy 7 odziedziczy styl motywu WordPress. Tak jest w przypadku motywu Coral Dark.

Formularz kontaktowy z motywem WordPress ColorMag

Oto formularz bez własnego stylu. Dziedziczy kolor niebieskiego przycisku Motyw ColorMag WordPress.

Zacząłem od przesłania zdjęcia, które będzie używane jako obraz tła formularza i zmiany kodu etykiet formularza z szarego na biały z niebieskim cieniem na tekście.

Kolejne zmiany polegały na zwiększeniu marginesów między etykietami formularzy a polami formularzy, zmodyfikowaniu przycisku odejmowania i dodaniu obramowania, gdy wskaźnik znajdzie się w polach formularza.

Sposób wyświetlania komunikatów o błędach / powodzeniu podczas przesyłania formularza również powinien zostać zmieniony, aby były wyświetlane poprawnie.

GIF obracający się po przesłaniu formularza nie wyświetlał się poprawnie, znalazłem alternatywę dla Loading.io i odniosłem się do niej za pomocą CSS.

Oto wynikowy formularz:

Oto kod:

div.wpcf7 {margin: 0; dopełnienie: 1.5em; background: url ("your_background_image_url_here"); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 label, .wpcf7-submit {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; text-align: center; szerokość: 92.5%; margin: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; display: inline-block; width: auto; dopełnienie: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); szerokość: 50px; wysokość: 50px; }

Jeśli nie musisz bazgrać w kodzie, zalecamy sprawdzenie naszego Wtyczki 10 WordPress, aby utworzyć formularz kontaktowy na swoim blogu

Odkryj także alternatywne opcje 3, które pomogą Ci utworzyć formularze kontaktowe. 

1. Formularz kontaktowy W8

Formularz kontaktowy W8 jest jedną z wtyczek programu formularz kontaktowy najpopularniejszy na WordPressie. Oferuje wiele funkcji, takich jak przesyłanie do wielu odbiorców, obsługa animacji, nieograniczone tworzenie formularzy, różne style i szeroki wachlarz dodatkowych opcji dostosowywania.

Ponadto zapewnia Twojej witrynie lub blogu profesjonalny system ułatwiający kontakt z klientami. Będziesz mógł dostosować wszystkie swoje formularze do swoich potrzeb i upodobań.

Pobierz | Demo | hosting

2. Skontaktuj się z nami

Formularz kontaktowy to responsywna wtyczka WordPress i proste narzędzie, ale bogate w opcje dostosowywania, które pozwalają wyświetlać przejrzysty i zachęcający formularz, w którym odwiedzający mogą skontaktować się z Tobą, pozostawiając swoją wiadomość.

Będziesz mógł zdefiniować niezbędne pola, wybrać najlepszy układ pól i całkowicie go dostosować, aby zachęcić klientów lub odwiedzających do pozostawienia swoich sugestii lub wiadomości.

Wystarczy ustawić adres e-mail, na który chcesz otrzymywać wiadomości, i użyć go do rozwoju firmy w najbardziej dochodowym kierunku.

Pobierz | Demo | hosting

3. Zręczny Popup Pro

Slick Popup Pro to Wtyczka WordPressa dość prosty i lekki, który konwertuje dowolny formularz stworzony przez wtyczkę Formularz kontaktowy 7 w wyskakującym okienku. Korzysta z formularza i przekształca go w piękne i doskonale reagujące wyskakujące okienko.

Formularz podręczny może mieć kilka zastosowań, w tym: formularz gromadzenia informacji, a formularz kontaktowy, formularz rejestracyjny, formularz wyceny, formularz sugestii / reklamacji i inne.

Pobierz | Demo | hosting

Polecane zasoby

Zapoznaj się z innymi zalecanymi zasobami, które pomogą Ci lepiej tworzyć formularze kontaktowe i zarządzać nimi w witrynie lub blogu. 

• Wtyczki 6 WordPress do weryfikacji przez CAPTCHA w formularzach
• Jak dodać formularz kontaktowy z WordPress Formularz kontaktowy 7
• Jak tworzyć formularze zgodne z GDPR na WordPress

Wnioski

Voila! To wszystko w tym samouczku. Mam nadzieję, że będziesz mieć więcej pomysłów na dostosowanie formularza kontaktowego. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych. 

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...