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.

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

Dokumentacja wtyczki Contact Form 7

1. Pierwsze kroki

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="4" title="Formularz 1"] i wkleić go na stronę, wpis lub widget.

2. Ekran administratora

3. Jak działają tagi

4. Edytowanie szablonu formularza

5. Konfigurowanie poczty

6. Komunikaty

7. Dodatkowe ustawienia

Tworzenie formularzy

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]

1. Pola tekstowe

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

W Contact Form 7 wszystkie typy znaczników z gwiazdką “*” oznaczają, że są to wymagane pola.

Generator znaczników formularza: tekst

Zakładka Formularz

[text* text-690]

Zakładka Email

[text-690]

Dostępne opcje dla pola tekstowego

Opcja

Przykłady

Opis

id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
akismet:author Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder
default:user_login
default:user_first_name
default:user_last_name
default:user_nickname
default:user_display_name
Options for retrieving logged-in user info as default value of field.

Przykład

[text* text-690 id:atrybut class:email placeholder akismet:author "John Smith"]

2. Pola liczbowe

Generator znaczników formularza: liczba

Zakładka Formularz

[number number-730]

Zakładka Email

[number-730]

Dostępne opcje dla pola liczbowe

Opcja

Przykłady

Opis

id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01].
minlength:(num) minlength:10 The minimum length allowed for this input field.
maxlength:(num) maxlength:90 The maximum length allowed for this input field.
size:(num) size:50 The value of size HTML attribute of this input field.
akismet:author Options for using Akismet.
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder
default:user_login
default:user_first_name
default:user_last_name
default:user_nickname
default:user_display_name
Options for retrieving logged-in user info as default value of field.

Przykład

[number* number-730 min:10 max:99 step:3 class:required "40"]

3. Pole daty

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:

Generator znaczników formularza: data

Zakładka Formularz

[date date-306]

Zakładka Email

[date-306]

Dostępne opcje dla pola data

OPCJA

PRZYKŁADY

OPIS

min:(date) min:2013-01-01 min attribute value of the input element. Allowed minimum value for this field. You can use a relative date format (e.g., ‘today+10days’, ‘today-2weeks’) as well.
max:(date) max:2013-12-31 max attribute value of the input element. Allowed maximum value for this field. You can use a relative date format (e.g., ‘today+10days’, ‘today-2weeks’) as well.
step:(num) step:3 step attribute value of the input element. When minimum date is 2013-01-01 and step is 3, acceptable inputs are 2013-01-01, 2013-01-04, 2013-01-07, …
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [date your-date class:y2008 class:m01 class:d01].
placeholder
watermark
Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

Przykład

[date date-306 min:2018-07-18 placeholder "10 styczeń 2019"]

4. Pola wyboru, przyciski radiowe i menu

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

Pola wyboru w Contact Form 7

Przykład

Generator znaczników formularza: menu rozwijane
[select menu-949 multiple "Menu 1" "Menu 2" "Menu 3"]
Generator znaczników formularza: pola wyboru
[checkbox checkbox-108 exclusive "Pole 1" "Pole 2" "Pole 3"]
Generator znaczników formularza: pola jednokrotnego wyboru
[radio radio-260 default:1 "Pole 1" "Pole 2 " "Pole 3"]

5. Przesyłanie plików i załączniki

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).

Generator znaczników formularza: plik

Zakładka Formularz

[file file-323]

Zakładka Email

[file-323]

Dostępne opcje dla pola plik

Opcja

Przykład

Opis

id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [file your-file class:y2008 class:m01 class:d01].
filetypes:(filetypes) filetypes:gif|png|jpg|jpeg Acceptable file types. List the file extensions after filetypes:, and separate them with ‘|’ (pipe) character when you set multiple file types.
limit:(num) limit:1048576
limit:1024kb
limit:1mb
Limit the max file size acceptable. You can use kb (kilo byte) or mb (mega byte) suffix optionally. If you omit suffix, the number means bytes. Note that you can’t use a decimal point in it (i.e., like this: [file your-file limit:1.5mb]) and it will be ignored if it exists.

Przykład

Generator znaczników formularza: plik
[file file-323 limit:12000 filetypes:jpg|png|gif]

6. reCAPTCHA

W formularzu kontaktowym 7 4.3 i nowszym, reCAPTCHA jest standardowym rozwiązaniem CAPTCHA. Aby rozpocząć korzystanie z usługi reCAPTCHA, potrzebujesz konta Google aby zarejestrować swoją witrynę pod kątem interfejsu API.

  1. Przejdź na stronę administratora reCAPTCHA Google .
  2. Zarejestruj swoją witrynę.
  3. Uzyskaj klucz lokacji i tajny klucz.

Skopiuj parę kluczy na ekran administratora WordPress zarejestrowanej witryny.

  1. Przejdź do menu administratora Kontakt > Integracja .
  2. Znajdź panel reCAPTCHA i kliknij Konfiguruj klucze .
  3. Skopiuj klucz strony i tajny klucz do pól i zapisz je.

Na koniec umieść symbol zastępczy widgetu reCAPTCHA ( [recaptcha]) w treści formularza kontaktowego.

Dostępne opcje dla pola tekstowego

Opcja

Przykład

Opis

theme:(theme) theme:dark The color theme of the widget. Available values are dark and light. The default value is light.
size:(size) size:compact The size of the widget. Available values are compact and normal. The default value is normal.
id:(id) id:foo id attribute value of the widget.
class:(class) class:bar class attribute value of the widget. To set two or more classes, you can use multiple class: option, like [recaptcha class:y2008 class:m01 class:d01].

Przykład

Generator znaczników formularza: reCAPTCHA
[recaptcha size:compact theme:dark]

Comments (5)

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany.



Strona internetowa w usłudze abonamentowej z hostingiem oraz domeną

Wychodząc naprzeciw oczekiwaniom naszych Klientów oferujemy usługę zaprojektowania i utrzymania strony internetowej w abonamencie, hostingiem oraz domeną.