Jak dodać formularze kontaktowe za pomocą wtyczki – P1: Użyj formularza kontaktowego 7

Formularz kontaktowy to jeden z najważniejszych elementów, jeśli chcesz mieć profesjonalną stronę internetową. Stworzenie i skonfigurowanie formularza kontaktowego nawet nie jest trudne, jeśli korzystasz z dedykowanych wtyczek. Aby ułatwić i przyspieszyć tworzenie formularzy kontaktowych z wtyczkami, przygotowaliśmy i napisaliśmy instrukcje dotyczące korzystania z najpopularniejszych wtyczek do formularzy kontaktowych.

W pierwszej części serii „Formularz kontaktowy” dowiedzmy się:

• Co to jest formularz kontaktowy?
• Korzyści z formularza kontaktowego
• Jak wykorzystać wtyczkę Contact Form 7 do stworzenia formularza?

Co to jest formularz kontaktowy i jego zalety?

Co to jest formularz kontaktowy?

Formularz kontaktowy to termin znany marketerom. Korzystając z formularza kontaktowego, użytkownicy mogą wysyłać wiadomości e-mail i kontaktować się z Tobą bezpośrednio na stronie internetowej bez znajomości Twojego adresu e-mail.

Formularz kontaktowy zwykle ma wiele pól, w których użytkownicy mogą wypełnić wymagane informacje, takie jak e-mail, numer telefonu, imię i nazwisko, treść e-maila, … Poza tym zwykle jest on umieszczany na stronie Kontakt lub w obszarze, w którym musisz uzyskać dane kontaktowe klientów . Oto przykład:

Korzyści z formularza kontaktowego

Ponieważ użytkownicy mogą używać formularza kontaktowego do wysyłania informacji do właściciela witryny (aby zostawić swoje dane kontaktowe, wysłać prośby o pomoc lub inne prośby, ...) bezpośrednio na tej stronie, kontakt jest znacznie wygodniejszy i szybszy.

Ponadto korzystanie z formularza kontaktowego może zachować prywatność wiadomości e-mail, a także zmniejszyć spam i zagrożenia bezpieczeństwa. Dzięki temu nie będziesz musiał codziennie zajmować się skrzynką pocztową pełną spamu i śmieci.

Ponadto formularze kontaktowe ułatwiają zbieranie informacji o użytkownikach, ponieważ muszą oni wypełnić informacje, o które prosisz w formularzu. To jedna ze strategii pozyskiwania większej liczby leadów.

Generalnie, aby zbudować profesjonalną stronę internetową i uzyskać więcej korzyści dla swojego biznesu, powinieneś skorzystać z formularzy kontaktowych.

Jak stworzyć formularz kontaktowy

Możesz kodować, aby tworzyć pola i formularze, jak chcesz. Jeśli jednak nie jesteś programistą, nie jest to możliwe. Albo musisz zapłacić pewną sumę pieniędzy za wynajem kodera, aby to zrobić.

Dlatego najbardziej przydatnym rozwiązaniem do tworzenia formularzy kontaktowych dla użytkowników nietechnicznych, a nawet programistów (aby zaoszczędzić czas i wysiłek) jest użycie wtyczki. Obecnie istnieje wiele wtyczek do formularzy kontaktowych, które są proste, łatwe, szybkie i bezpłatne. Nie ma więc powodu, aby nie używać ich do tworzenia formularza kontaktowego, prawda?

We wszystkich artykułach z tej serii pokażę, jak utworzyć formularz rejestracyjny na uczelnię w następujący sposób:

Utwórz formularz za pomocą formularza kontaktowego 7

W tym pierwszym artykule z serii „Utwórz formularz kontaktowy za pomocą wtyczek” używam formularza kontaktowego 7 – jednej z najpopularniejszych dostępnych obecnie darmowych wtyczek do formularzy kontaktowych.

Przede wszystkim pobierz i zainstaluj tę wtyczkę z repozytorium wtyczek na wordpress.org lub przejdź do Dashboard > Plugin > Add New, aby ją zainstalować i aktywować.

Formularz kontaktowy 7

Autorzy: Takayuki Miyoshi

Aktualna wersja: 5.5.3

Ostatnia aktualizacja: 28 listopada 2021

formularz kontaktowy-7.5.5.3.zip

82% Ratings 5,000,000+ Zainstalowano WP 5.7+ Wymaga

Oto szczegółowe instrukcje dotyczące tworzenia powyższego formularza rejestracyjnego na uniwersytet za pomocą tej wtyczki.

Berło

Przejdź do Pulpit > Kontakt > Dodaj nowy, aby utworzyć nowy formularz kontaktowy. Oto interfejs, z którym będziesz pracować:

(1): Wpisz nazwę formularza kontaktowego
(2): Zakładki do tworzenia i konfigurowania formularza kontaktowego, w tym:

• Zakładka Formularz : utwórz pola dla formularza kontaktowego
• Zakładka Poczta : ustaw e-maile otrzymywane z formularza kontaktowego
• Zakładka Wiadomość : dołącz powiadomienia, które użytkownicy otrzymują, gdy wystąpi błąd w wpisaniu danych, nie można wysłać formularza, pomyślne przesłanie formularza, …
• Zakładka Ustawienia dodatkowe : dodaj inne elementy do formularza kontaktowego.

Utwórz pola dla formularza kontaktowego

Jak wspomniałem, formularz kontaktowy zawiera pola, które umożliwiają użytkownikom wprowadzanie informacji lub interakcję z nimi. Oto zakładka Formularz , która służy do tworzenia tych pól:

(1) składa się z pól, które należy dodać do formularza, takich jak imię i nazwisko, adres e-mail, numer, przycisk wyślij, … Aby dodać dowolne pole, po prostu kliknij nazwę odpowiedniego pola.

(2) to obszar wyświetlania struktury formularza w formacie HTML. Tworząc nowy formularz kontaktowy, będziesz mieć domyślną strukturę podstawowego formularza z prostymi polami, takimi jak e-mail, imię i nazwisko, temat i przycisk przesyłania. Możesz od razu skorzystać z tego formularza lub utworzyć na jego podstawie nowy formularz.

Ogólne instrukcje dotyczące pól

Po wybraniu żądanego pola pojawi się wyskakujące okienko, w którym wprowadzisz niezbędne informacje w polu. Każde pole wymaga innych informacji, ale ogólnie wszystkie mają następujące sekcje:

Nazwa : nazwa atrybut
Wartość domyślna : domyślna wartość pola
Atrybut identyfikatora : identyfikator pola
Atrybut klasy : klasa pola

Uwaga : atrybut ID i atrybut Class są opcjonalne i możesz tam wprowadzić swoje niestandardowe informacje. Jeśli chcesz, aby kolejne kroki stylizacji formularza kontaktowego były łatwiejsze, powinieneś wypełnić te 2 sekcje.

Po wypełnieniu tych informacji zobaczysz tag pola, które utworzyłeś na dole tego pola. Kliknij Wstaw tag, aby wstawić to pole do kodu HTML formularza.

Zwykle tag każdego pola w formularzu kontaktowym utworzonym za pomocą Contact Form 7 będzie miał następującą strukturę:

 [field* name_attribute id:field_id class:field_class "domyślna wartość pola"]

Wyjaśnienia:

• field * to typ wybranego pola. To najważniejsza i niezbędna część pola.
• * oznacza, że ​​to pole jest wymagane. Jeśli nie chcesz zmuszać użytkowników do jej wprowadzania, usuń * .

Aby dowiedzieć się więcej o strukturze znacznika pola w formularzu kontaktowym 7, zapoznaj się z tą dokumentacją. Zrozumienie znaczenia i struktury HTML formularza kontaktowego ułatwi edycję, tworzenie i dodawanie nowych pól za pomocą kodu. Szczególnie w przypadku programistów mogą oni napisać kod HTML, aby utworzyć formularz zgodnie z powyższą składnią. Jednak w przypadku niekodera może to być trudne, dlatego zalecam wykonanie poniższych kroków.

Przy formularzach kontaktowych z tej serii muszę wybrać następujące pola:

Wszystkie pola mają wspólne informacje, które powiedziałem powyżej. Dlatego po prostu prowadzę teraz konkretne części każdej dziedziny.

Poniżej znajdują się szczegółowe instrukcje dla każdego pola.

Utwórz pole do wpisania nazwy

Wybierz pole tekstowe i wprowadź podstawowe informacje dla pola w polu:

W sekcji Typ pola możesz wybrać wymaganie , aby to pole było obowiązkowe do wypełnienia (jest to opcjonalne).

Uwaga : w sekcji Wartość domyślna wybierz opcję Użyj tego tekstu jako symbolu zastępczego pola, aby wyświetlić tę zawartość w polu przed wprowadzeniem danych przez użytkowników. Powinieneś użyć tego trybu, aby wyjaśnić użytkownikom, czego potrzebują do wypełnienia pola.

Sekcja Akismet jest powiązana z wtyczką Akismet – wtyczką antyspamową. Jeśli nie masz tej wtyczki, nie przejmuj się tą sekcją.

Utwórz pole do wprowadzania numeru telefonu

Wybierz pole numeryczne i wypełnij podstawowe informacje w tym polu.

W sekcji Typ pola wybierz typ dla tego pola. Istnieją dwa rodzaje pól: Spinbox i Slider .

Suwak wyświetli skalę wyboru liczby w następujący sposób:

Ten styl jest odpowiedni do punktowania lub wybierania liczb na podstawie określonej skali.

Tymczasem Spinbox pozwala wpisać dowolny numer, sekwencję liczb w polu np. numer telefonu, numer karty, numer dowodu osobistego,… Czyli w tym przykładzie wybieram Spinbox.

Sekcja Zakres pozwala wybrać limit liczby. W tym przykładzie nie potrzebuję tej sekcji, więc niczego nie wypełniałem.

Utwórz pole do wyboru kierunków i lokalizacji studiów

W tym polu wybierz menu rozwijane .

Teraz wypełnij opcje dla kierunków i lokalizacji w sekcji Opcje , pamiętaj, że każda opcja to linia.

Jeśli chcesz zezwolić użytkownikom na wybieranie wielu opcji naraz, kliknij opcję Zezwalaj na wiele wyborów .

Utwórz pole do wyboru celu rejestracji

Zaznacz pole wyboru .

Sekcja Opcje jest podobna do tej w polu rozwijanego menu powyżej. Dodatkowo istnieje więcej opcji dla pól wyboru w następujący sposób

• Najpierw umieść etykietę, na końcu pole wyboru
• Owiń każdy przedmiot elementem etykiety
• Ustaw wyłączne pola wyboru (możesz wybrać tylko 1 opcję).

Utwórz przycisk przesyłania

Na koniec wybierz pole przesyłania i po prostu wypełnij informacje zgodnie z następującym wymogiem (zwróć uwagę, że etykieta to słowo, które pojawi się na tym przycisku, np. „Prześlij”, „Zarejestruj”, „Potwierdź”).

Warto zauważyć, że podczas tworzenia nowego formularza ta wtyczka automatycznie utworzyła przesłane pole. Dlatego możesz użyć tego pola bez tworzenia nowego.

Dodaj etykiety dla pól

Teraz zakończyłeś tworzenie pól do formularza kontaktowego. Jednak Twoje pola nie mają nazwy do wyświetlenia w formularzu kontaktowym w następujący sposób:

Dlatego musisz dodać etykiety do pól, wstawiając następującą strukturę kodu w części HTML formularza:

 <etykieta> Etykieta pola
[Znacznik pola] </label>

Następnie wpisz etykietę pola w sekcji Etykieta pola . Następnie wypełnij wszystkie powyższe informacje, kliknij Zapisz .

Po utworzeniu pól mój formularz kontaktowy ma następującą strukturę kodu, zauważ, że ułożyłem pola tak, aby wyświetlały się w pożądanej pozycji na interfejsie:

 <etykieta> Twoje imię (wymagane)
[tekst* twoje-imię "wpisz swoje imię"] </label> 

<etykieta> Twój numer telefonu
[symbol zastępczy numeru telefonu „wprowadź swój numer telefonu”] </label> <label> Twój adres e-mail (wymagane)
[email* your-e-mail "wprowadź swój adres e-mail"] </label>

<etykieta> Major
[wybierz* kierunek „Informatyka” „Lingwistyka” „Rolnictwo” „Inżynieria” „eCommerce”] </label>
<label> Lokalizacja do nauki 
[wybierz* Miejsce do nauki „Nowy Jork” „Chicago” „Los Angeles” „Washington DC” „Houston” „Filadelfia”] </label>

</label> Zarejestruj się w
[checkbox* register label_first „Studiuj” „Rozejrzyj się” „Skonsultuj się”] </label>

[Prześlij Prześlij"]

Tym razem Twój formularz kontaktowy nadal nie wyświetla się na stronie. Musisz wykonać kilka dodatkowych kroków, aby wyświetlić go na interfejsie.

Ustawienia formularza kontaktowego

Skonfiguruj pocztę e-mail

Karta Poczta umożliwia dostosowanie treści wiadomości e-mail, które otrzymasz po wysłaniu formularzy kontaktowych przez użytkowników. Aby skonfigurować tę sekcję, musisz wstawić tagi pocztowe pól w utworzonym formularzu kontaktowym. Oto przykład:

Wyjaśnienia:

• Do : Wprowadź adres e-mail osoby odpowiedzialnej za sprawdzenie formularza kontaktowego.
• Od i Temat : W tym miejscu należy ustawić nazwę, aby określić, kto wyśle ​​ten formularz kontaktowy.
• Treść wiadomości: add mail-tags tutaj, aby upewnić się, że po otrzymaniu wiadomości e-mail z formularza kontaktowego, to będzie wyświetlać wszystkie informacje, które Państwo zażądać od użytkowników.

Inne ustawienia

Karta wiadomości

Wprowadź wiadomości, które są używane w sytuacjach, jak widać w opisie zakładki. Na przykład po pomyślnym przesłaniu formularza przez użytkowników lub jego niepowodzeniu, należy dodać wiadomość, aby powiadomić ich o tym. Lub gdy użytkownicy zapomną wymagane pole, należy również dodać wiadomość, aby użytkownicy mogli wrócić i wypełnić to pole. Chociaż są to drobne szczegóły, należy zwrócić uwagę, aby poprawić wrażenia użytkownika.

Zakładka dodatkowych ustawień

Ta karta umożliwia dodawanie fragmentów kodu w celu zainstalowania następujących elementów:

• Tryb tylko dla subskrybentów
• Wersja demo
• Pomijanie poczty
• Akceptacja jako walidacja
• Ustawienia flaminga
• Blokowanie przechowywania wiadomości
• Kod JavaScript

Jest kilka całkiem przydatnych części, których powinieneś użyć, takich jak:

• Tryb tylko dla subskrybentów : W tym trybie tylko zalogowani użytkownicy Twojej witryny mogą przesłać formularz kontaktowy. Eliminuje to spam i jest tylko dla tych, którzy naprawdę chcą się z Tobą skontaktować.
• Akceptacja jako weryfikacja : dodaj funkcję wyświetlania powiadomień dla pola wyboru Akceptacja, gdy użytkownicy nie zaznaczają tego pola, ale przechodzą do innego pola. Ponieważ domyślnie, jeśli użytkownicy nie zaznaczą pola wyboru Akceptacja, komunikat o błędzie zostanie wyświetlony dopiero po przesłaniu formularza. To pole wyboru Akceptacja jest często używane do tworzenia pól, takich jak „Zgadzam się z warunkami witryny”, ale w przypadku tworzenia innych typów treści może być konieczne dodanie akceptacji jako weryfikacji .

Aby dowiedzieć się więcej o innych funkcjach w zakładce Ustawienia dodatkowe , możesz przeczytać więcej tutaj.

Wyświetl formularz kontaktowy na stronie internetowej

Ostatnim krokiem jest wyświetlenie formularza kontaktowego, który właśnie utworzyłeś na stronie.

Nadal w interfejsie, aby utworzyć nowy formularz, skopiuj krótki kod i wklej go na żądanej stronie lub poście.

Oto moje końcowe wyniki:

Jednak mój formularz kontaktowy nie wygląda zbyt dobrze, więc muszę go nieco wystylizować.

Jeśli chcesz zmienić styl formularza kontaktowego, tak jak szablon, który podałem na początku tego artykułu, musisz edytować kod HTML formularza w następujący sposób, aby ułatwić stylizację:

 <div class="form__field form__full-width">
<label>Twoje imię (wymagane)
[tekst* symbol zastępczy twojego imienia „wpisz swoje imię”]
</label>
</div>
<div class="form__field">
<label>Twój numer telefonu
[symbol zastępczy numeru telefonu „wprowadź swój numer telefonu”]
</label>
</div>
<div class="form__field">
<label>Twój e-mail (wymagane)
[email* Twój adres e-mail zastępczy „wprowadź swój adres e-mail”]
</label>
</div>
<div class="form__field">
<label>Major
[wybierz* kierunek „Informatyka” „Lingwistyka” „Rolnictwo” „Inżynieria” „eCommerce”]
</label>
</div>
<div class="form__field">
<label>Miejsce do nauki
[wybierz* Miejsce do nauki „Nowy Jork” „Chicago” „Los Angeles” „Washington DC” „Houston” „Filadelfia”]
</label>
</div>
<div class="form__field form__full-width">
<label>Zarejestruj się
[checkbox* register use_label_element „Badanie” „Rozejrzyj się” „Skonsultuj się”]
</label>
</div>
<div class="form__field form__full-width">
[prześlij „Prześlij”]</div>

Następnie przejdź do Customizer > Additional CSS swojego motywu i wklej następujący kod:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Na koniec kliknij Opublikuj, aby zapisać.

Ostatnie słowa

Kiedy po raz pierwszy używasz Contact Form 7, może się okazać, że nie jest on zaznajomiony z kodem HTML, jeśli nie jesteś programistą. Jednak po przeczytaniu tego samouczka myślę, że wszystko stało się łatwiejsze, prawda?

Jeśli chcesz spróbować stworzyć formularz kontaktowy za pomocą innych narzędzi, czekam na mój nadchodzący artykuł z tej serii. Którą wtyczkę chcesz zasugerować? Zostaw komentarz pod tym artykułem!