Contact Form 7 – formularz kontaktowy w WordPressie

Contact Form 7 – formularz kontaktowy w WordPressie

Kiedy tworzymy stronę internetową zazwyczaj chcemy, by każdy potencjalny użytkownik, osoba zainteresowana ofertą czy przyszły klient mógł się z nami skontaktować. Zamiast umieszczać adres e-mail który może zostać wykorzystany przez boty do rozsyłania spamu, proponujemy zainstalować prostą wtyczkę do tworzenia formularza kontaktowego. Contact Form 7 bo o niej mowa, jest bardzo prosta w obsłudze, a jednocześnie daje nam bardzo duże możliwości i zwiększa wygodę komunikacji.

Ponieważ WordPress nie ma domyślnego formularza kontaktowego, w poniższym artykule, chcieliśmy wam krok po kroku przedstawić, jak podpiąć do WordPressa wtyczkę oraz przeprowadzić proces konfiguracji.

Obecnie Contact Form 7 jest na pierwszym miejscu w zestawieniu najpopularniejszych wtyczek WordPressa.

Najpopularniejsze wtyczki WordPressa

Najpopularniejsze wtyczki WordPressa

Wtyczkę można zainstalować korzystając z Repozytorium wtyczek WordPress lub ładując spakowaną w .zip wtyczkę za pomocą strony internetowej z panelu Kokpitu.

WordPress Plugins: Contact Form 7

Pierwsze kroki z Contact Form 7

Teraz, gdy już mamy zainstalowany Contact Form 7 możemy rozpocząć konfigurację tej wtyczki. Aby zacząć w pełni z niej korzystać należy stworzyć nowy formularz w menu Formularze lub skorzystać z przykładowego stworzonego podczas instalacji, skopiować powstały kod [contact-form-7 id="21" title="Formularz 1"] i wkleić go na stronę, wpis lub widget.

Formularz

Formularze Contact Form 7

Formularze Contact Form 7

Strona

Formularz kontaktowy Contact Form 7

Formularz kontaktowy Contact Form 7

Dokumentacja wtyczki Contact Form 7

Składnia

Contact Form 7 pozwala na edycję szablonów formularzy kontaktowych i swojej poczty (mail i nagłówki wiadomości) z różnymi „tagami” W terminologii Contact Form 7, tag oznacza mały utworzony ciąg w nawiasach kwadratowych ([ ]). np.

[text* your-name]

[email* your-email]

[text your-subject]

[textarea your-message]

Pola tekstowe

Pola wprowadzania tekstu są najczęściej używanymi czynniki formularza kontaktowego.

Pole tekstowe Contact Form 7

Pole tekstowe Contact Form 7

Pole data

Jeśli wartość nie jest określona w data dziedzinie, wartość musi być w formacie YYYY-MM-DD. Dodatkowo możemy konfigurować formularz zmieniając opcje:

  • min: (date) – Dozwolona minimalna wartość dla tego pola.
  • max: (date) – Dozwolona maksymalna wartość dla tego pola.
  • step: (num) – Zwiększenie wartości atrybutu wejściowego elementu.
  • id: (id) – ID wartość atrybutu wejściowego elementu.
  • class: (class)
  • tabindex: (num)
  • placeholder watermark – Zastępczy znak wodny

Przykład:

[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]

Pole data Contact Form 7

Pole data Contact Form 7

Pola wyboru, przyciski opcji i menu

Contact Form 7 zapewnia kilka rodzajów znaczników formularzy do reprezentowania pola wyboru, przycisków opcji i menu rozwijanych.

Przykład:

[checkbox your-country "China" "India" "San Marino"]

[select your-country "China" "India" "San Marino"]

Pola wyboru Contact Form 7

Pola wyboru Contact Form 7

Wgrywanie plików i załączników

Dzięki tej funkcji, można umożliwić użytkownikom przesyłanie swoich plików za pomocą formularza, a następnie e-mail z załącznikami z plików zostanie wysłany do Ciebie.

Formularz kontaktowy ma ograniczenia domyślne dla tego typu i rozmiaru plików, gdy nie zmienisz ustawień w opcji domyślnie dopuszczalne typy plików to:
jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav i wmv. Domyślnie dopuszczalny rozmiar pliku to 1 MB (1048576 bajtów).

Przykład:

[file your-file filetypes:pdf|txt limit:2mb]

Wgrywanie plików i załączników Contact Form 7

Wgrywanie plików i załączników Contact Form 7

Really Simple CAPTCHA w celu uniknięcia spamu

Aby skorzystać z takiego pola w formularzu kontaktowym, musisz zainstalować Really Simple CAPTCHA. To rozszerzenie do Contact Form 7 służy do uniknięcia przesyłania spamu poprzez formularza kontaktowy.

Really Simple CAPTCHA

Really Simple CAPTCHA

11 komentarzy

  1. Pingback: Popularne wtyczki WordPress

  2. Świetny artykuł. Właśnie takiego opisu szukałem. Co do wtyczki to jest chyba najlepsze prosta i niezamulająca WP.

  3. Jak zrobić, by data ustawiała się automatycznie? Np. codziennie. Wartością minimalną jest data w danym dniu?

  4. Witam,
    czy ten formularz zapisuje również gdzieś w wordpresie treść formularza oraz dane osoby wysyłającej? Nie wstawiłem do treści wiadomości zwrotnej email, wszystkich pól jakie są w formularzu i nie mam m.in. nr telefonu, a konieczne jest jego wpisanie.

  5. Witam , a czy jest możliwość zabezpieczenia pól w tym formularzu? Mam kilka pól i czasami są wypełniane błędne informacje dla przykładu :
    Imię nazwisko – zabezpieczenie aby były dwa człony (Jan Kowalski) i możliwość wprowadzania samych liter
    pesel – zabezpieczenie np ilością znaków i możliwością wpisywania samych cyfr
    kod pocztowy – podobne jak wyżej
    e mail – jak wyżej
    itd.
    I jeszcze jedno pytanie czy istnieje inne zabezpieczenie przed spamem a niżeli captcha i tym podobne .

  6. Witam, w jaki sposób moge dodać pole telefon do formularza?

  7. dzięki za formularz, wszystko fajnie wyjaśnione :)) pozdrawiam

  8. Witam srdecznie

    Czy istniej możliwość utworzenia „odwrotnego” formularza tzn:
    Mam następujących ZAREJESTROWANYCH użytkowników:
    Admin – 1 osoba
    Sprzedawca – 3 osoby
    Klient – 10 osób

    chciałbym dla każdej z grup stworzyć osobne formularze kontaktowe które miały by następujące możliwości:

    Sprzedawca – mógłby wybrać z listy klienta do którego wysyła wiadomość oraz mieć możliwość załączenia wcześniej przygotowanych plików pdf również wybieranych z listy (najlepiej odznaczanych „ptaszkami”)

    Analogicznie formularz dla Klienta i Administratora.

    Wszędzie są tutoriale z możliwością podawania swojego emaila i dodawania swoich plików a ja chcę odwrotnie.

    Pozdrawiam

  9. potrzebuje zrobić zgłoszenie klienta przez formularz tak abym otrzymywał w powiadomieniu wszystkie dane z pól wprowadzanych a nie tylko treść samej wiadomości
    pozdrawiam

  10. Contact Form najlepszy 😉

Dodaj komentarz