Jak dodać formularz kontaktowy w WordPressie?

Jako właściciel witryny internetowej możesz pozwolić swoim czytelnikom na interakcję z Tobą na wiele sposobów. Włączanie komentarzy na blogu, odpowiadanie na profilach społecznościowych i wysyłanie kampanii e-mail to jedne z najpopularniejszych sposobów. Oprócz wszystkich tych opcji, w każdej witrynie WordPress jest jedna najważniejsza strona. To jest strona kontaktowa umożliwiająca użytkownikom wysyłanie do Ciebie e-maili. W tym artykule dowiemy się, jak dodać formularz kontaktowy w witrynie WordPress.

Powiązane: Jak dodać i dostosować formularz kontaktowy w witrynie Weebly?

Dlaczego warto mieć stronę kontaktową w WordPressie?

Podstawową potrzebą strony kontaktowej jest umożliwienie czytelnikom wysyłania do Ciebie wiadomości e-mail. Istnieje jednak kilka innych zalet posiadania strony kontaktowej w Twojej witrynie.

• Wiarygodność – posiadanie strony kontaktowej zwiększa wiarygodność Twojej strony internetowej. Ludzie będą wierzyć, że jesteś prawdziwą osobą lub firmą, która odpowiada na pytania.
• Widoczność – formularz kontaktowy zwiększa widoczność Twojej strony zarówno w wyszukiwarkach, jak i wśród użytkowników. Możesz łatwo przyciągnąć użytkowników do swojej strony kontaktowej i zachęcić ich do podzielenia się swoimi potrzebami.
• Biznes – jeśli nie masz czasu na odpowiedź na czacie na żywo, kolejną najlepszą opcją prowadzenia biznesu jest skorzystanie z formularza kontaktowego. Działa to dobrze w branżach usługowych, takich jak pisanie CV i tworzenie oprogramowania.

Różnica między formularzem kontaktowym a e-mailami

Wielu z was może pomyśleć, dlaczego trzeba mieć osobny formularz kontaktowy zamiast bezpośrednio podawać swój adres e-mail w sekcjach stopki i paska bocznego.

• Pokazywanie swojego adresu e-mail publicznie spowoduje problemy z prywatnością. Otrzymasz setki wiadomości spamowych, ponieważ każdy może wysłać wiadomość, klikając Twój adres e-mail.
• Natomiast formularze kontaktowe nie ujawnią czytelnikom Twojego adresu e-mail. WordPress przetworzy wiadomość i wyśle ​​do Ciebie bez użytkowników znających Twój adres e-mail. W ten sposób będziesz otrzymywać wiadomości tylko od zainteresowanych użytkowników i unikniesz spamu oraz obraźliwych wiadomości prywatnych.
• Wtyczka bezproblemowo współpracuje z Akismet, aby zapobiec przesyłaniu spamu lub możesz dodać reCAPTCHA, aby upewnić się, że tylko ludzie mogą przesłać formularz, a nie automatyczne roboty. Ponadto Contact Form 7 wykorzystuje również domyślną opcję czarnej listy komentarzy WordPress do blokowania wiadomości.
• Możesz korzystać z wielu formularzy kontaktowych w jednej witrynie WordPress i dodawać parametry, aby śledzić wydajność każdego formularza. Na przykład, możesz osobno śledzić formularz na swojej stronie kontaktowej i na temat strony.
• Wtyczka nie przechowuje wiadomości w bazie danych, dzięki czemu zachowuje Twoją prywatność.

Dzięki tym wszystkim korzyściom formularze kontaktowe są znacznie bezpieczniejszym, profesjonalnym i łatwiejszym sposobem interakcji z czytelnikami.

Dobrą stroną jest to, że masz wiele wtyczek do formularzy kontaktowych dostępnych za darmo w sekcji repozytorium wtyczek WordPress. Contact Form 7 to jedna z najpopularniejszych spośród wszystkich dostępnych bezpłatnie wtyczek.

• Jest to bardzo łatwa w użyciu wtyczka posiadająca ponad 5 milionów aktywnych instalacji.
• Jest to kompletna darmowa wtyczka bez irytujących reklam lub dodatkowej wersji premium.
• Aktywnie rozwijany i utrzymywany.
• Wiele popularnych motywów WordPress integruje wtyczkę Contact Form 7 i oferuje niestandardowe formularze.
• Możesz wstawić formularz w dowolnym miejscu na swojej stronie za pomocą bloku Gutenberga.

Instalowanie wtyczki Formularz kontaktowy 7

Ponieważ Contact Form 7 jest darmową wtyczką, możesz zainstalować go bezpośrednio z panelu administracyjnego WordPressa. Po zalogowaniu się do panelu administracyjnego witryny przejdź do sekcji „Wtyczki > Dodaj nowy". Stamtąd możesz wyszukać i zainstalować wtyczkę Contact Form 7.

Zainstaluj wtyczkę formularza kontaktowego 7

Tworzenie pierwszego formularza kontaktowego

Po aktywacji wtyczki na Twojej stronie utworzy ona dodany element menu o nazwie „Kontakt”. Posiada trzy pozycje podmenu – Formularze Kontaktowe, Dodaj Nowy i Integracja.

Formularz kontaktowy 7 Menu

• Możesz wyświetlić wszystkie swoje formularze w sekcji „Formularze kontaktowe”.
• Przejdź do „Dodaj nowy”, aby utworzyć nowy formularz.
• Sekcja integracji umożliwia łączenie się z zewnętrznymi API z Constant Contact, reCAPTCHA i Sendinblue.

Konfiguracja wtyczki Formularz kontaktowy 7

Aby ułatwić Ci zadanie, Contact Form 7 doda w Twojej witrynie gotowy przykładowy formularz. Możesz edytować przykładowy formularz, przechodząc do sekcji „Formularze kontaktowe” i ponownie użyć lub utworzyć nowy od podstaw.

Wyświetl utworzone formularze

W tym artykule stworzymy nowy formularz i osadzimy shortcode. Przejdź do sekcji „Kontakt > Dodaj nowy”, aby wyświetlić wszystkie dostępne opcje tworzenia nowego formularza. Zobaczysz sekcje formularza, poczty, wiadomości i dodatkowych ustawień, w których możesz skonfigurować opcje i zaprojektować swój formularz. Wtyczka doda podstawowy szablon formularza, poczty i wiadomości w odpowiedniej sekcji na początek. Możesz dodać dodatkowe opcje odnosząc się do strony dokumentacji wtyczki.

Sekcja formularza

W sekcji „Formularz” możesz zobaczyć dostępne tagi do edycji szablonu formularza. Wtyczka doda podstawowe tagi, takie jak imię i nazwisko, adres e-mail, temat i przycisk przesyłania, które można dalej edytować i dostosowywać.

Dodaj nowy formularz kontaktowy

• Możesz dodać pola dla adresu URL, numeru telefonu, przycisków opcji, przesyłania plików, quizu, pól wyboru, menu rozwijanego itp., po prostu klikając przycisk.
• Na początku możesz nie czuć się komfortowo z przyciskami i kodem. Jednak kliknięcie każdego przycisku spowoduje wyświetlenie wyskakującego okienka, w którym można po prostu uzupełnić szczegóły.
• Nie musisz pamiętać tagów ani przygotowywać kodu.

Na przykład kliknij przycisk „plik”, aby wstawić opcję przesyłania pliku do formularza. W wyskakującym okienku podaj szczegóły dotyczące rozmiaru, typu, pola obowiązkowego itp. i zapisz.

Wypełnij szczegóły dla tagu

Po zakończeniu projektowania formularza szablon będzie posiadał następujące tagi. Możesz przenieść etykiety w inne miejsce, wycinając i wklejając odpowiedni kod.

<label> Your name
    [text your-name] </label>
<label> Your email
    [email your-email] </label>
<label> Subject
    [text your-subject] </label>
<label> Your message (optional)
    [textarea your-message] </label>
[file file-915 limit:1mb filetypes:.docx]
[submit "Submit"]

Na koniec podaj nazwę formularza i kliknij przycisk Zapisz. Otrzymasz krótki kod, który możesz skopiować i wkleić w dowolnym miejscu na swojej stronie.

Zapisano formularz kontaktowy

Sekcja poczty

Przed użyciem shortcode następnym krokiem jest skonfigurowanie szablonu wiadomości e-mail, przechodząc do sekcji „Poczta”.

Formularz kontaktowy 7 Ustawienia poczty

• Do i Od – wtyczka wykorzystuje adres e-mail administratora witryny jako adres i użyj tytułu witryny oraz podanego adresu e-mail z pola.
• Temat i Nagłówki – dane z pól formularza są wykorzystywane w szablonie maila.
• Treść wiadomości – ustaw format szablonu do otrzymywania wiadomości e-mail.
• Załącznik plikowy – pozostaw go pusty lub dodaj tag pliku, jeśli to konieczne, aby wyświetlić nazwę pliku w odbieranej wiadomości e-mail.

Treść wiadomości i załącznik do pliku

Ogólnie rzecz biorąc, nie musisz dokonywać żadnych modyfikacji w szablonie poczty. Utwórz drugi szablon poczty, aby użyć go jako autorespondera. Gdy wiadomość e-mail zostanie pomyślnie wysłana, wtyczka uruchomi szablon wiadomości autorespondera na wiadomość e-mail zgłaszającego.

Formularz kontaktowy 7 Autoresponder

Zapisz zmiany po zakończeniu konfiguracji szablonów poczty.

Sekcja Wiadomości

W tej sekcji możesz dostosować wiadomości tekstowe, które pojawiają się w różnych sytuacjach. Możesz zostawić tekstowe symbole zastępcze bez zmian, jeśli nie chcesz dostosowywać. Na przykład domyślnie wtyczka wyświetli komunikat „Dziękuję za wiadomość. Został wysłany. po pomyślnym przesłaniu formularza. Jeśli korzystasz z formularza do składania propozycji biznesowych, warto edytować ten tekst, aby dodać więcej szczegółów i dalsze kroki dla klientów.

Ustawienia wiadomości

Dodatkowe ustawienia

Możesz pozostawić sekcję dodatkowych ustawień bez zmian. Przejrzyj jednak opcje dostępne w dokumentacji, aby sprawdzić, czy jakieś pola są przydatne. Na przykład, możesz dodać subscribers_only: true w polu tekstowym, aby umożliwić przesyłanie formularza tylko zalogowanym użytkownikom .

Dodatkowe ustawienia

Dodawanie formularza na stronie kontaktowej

Kliknij przycisk Zapisz po sfinalizowaniu wszystkich ustawień. Zasadniczo wszystkie powyższe kroki są jednorazową konfiguracją i możesz tworzyć nowe formularze przy użyciu tej samej konfiguracji bez za każdym razem edytowania szablonów. Możesz jednak również użyć różnych pól i szablonów dla każdego formularza.

Teraz, gdy masz już skrócony kod formularza kontaktowego, następnym krokiem jest osadzenie go na swojej stronie. Przejdź do sekcji „Strony > Wszystkie strony” i utwórz/edytuj swoją stronę kontaktową. Wpisz /contact, aby przefiltrować blok Contact Form 7 Gutenberg i wstaw go w obszarze treści.

Formularz kontaktowy 7 Blok Gutenberga

Kliknij menu „Wybierz formularz kontaktowy” i wybierz nazwę formularza do osadzenia.

Umieść formularz kontaktowy

Jeśli używasz starego edytora klasycznego, po prostu wklej krótki kod formularza kontaktowego w edytorze.

Dodaj formularz kontaktowy w klasycznym edytorze

To wszystko, umieściłeś formularz kontaktowy na swojej stronie. Teraz możesz opublikować lub zaktualizować stronę, aby zobaczyć ją w akcji.

Powiązane: Jak osadzić formularze Google w WordPress?

Testowanie formularza kontaktowego

Wyświetl swoją stronę, aby zobaczyć, jak wygląda formularz. Zalecamy również przetestowanie formularza poprzez przesłanie fikcyjnej wiadomości.

Opublikowany formularz kontaktowy

Wtyczka użyje walidacji przeglądarki, aby upewnić się, że wszystkie wymagane pola są wypełnione. Podczas próby przesłania formularza bez obowiązkowych pól zobaczysz błędy zgodnie z konfiguracją w sekcji „Wiadomości”.

Walidacja formularza w przeglądarce

Prześlij pomyślną wiadomość i potwierdź, że Twój kontakt działa prawidłowo. Podobnie sprawdź otrzymaną wiadomość i dostosuj konfigurację w sekcji „Poczta”, aby w razie potrzeby zmienić szablon.

Wiadomość wysłana pomyślnie

Wniosek

W sumie możesz potrzebować mniej niż 30 minut, aby utworzyć i dodać formularz kontaktowy w witrynie WordPress za pomocą wtyczki Contact Form 7. Działa bezproblemowo bez konfliktów z innymi wtyczkami. Niewątpliwie formularz kontaktowy 7 jest częścią wielu witryn biznesowych WordPress i możesz go wypróbować, aby ulepszyć swój biznes.