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.
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
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:
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.
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).
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.
- Przejdź na stronę administratora reCAPTCHA Google .
- Zarejestruj swoją witrynę.
- Uzyskaj klucz lokacji i tajny klucz.
Skopiuj parę kluczy na ekran administratora WordPress zarejestrowanej witryny.
- Przejdź do menu administratora Kontakt > Integracja .
- Znajdź panel reCAPTCHA i kliknij Konfiguruj klucze .
- 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]
Możesz wyjaśnić ponieważ mówisz aby skopiować powstały kod
[contact-form-7 id="4" title="Formularz 1"]
i wkleić go na stronę, wpis lub widget.
jak ma wyglądać ten kod strony bo nie wiem ?????
i gdzie mój wpis ???????? Pomoże ktoś?
Wejdz po lewej w menu w kontakt w zakładke formularze kiliknij edytuj na ten który chcesz i pomiedzy nazwą a panelem do edycji masz kod
[contact-form-7 id="4" title="Formularz 1"] taki jak ten kopiujesz go idzesz na strone gdzie chcesz go wstawić dodajesz pole tekstowe albo nagłówek w niego wklejasz [contact-form-7 id="4" title="Formularz 1"] potem aktualizuj i masz.
Wejdz po lewej w menu w kontakt w zakładke formularze kiliknij edytuj na ten który chcesz i pomiedzy nazwą a panelem do edycji masz kod
[contact-form-7 id="4" title="Formularz 1"] taki jak ten kopiujesz go idzesz na strone gdzie chcesz go wstawić dodajesz pole tekstowe albo nagłówek w niego wklejasz [contact-form-7 id="4" title="Formularz 1"] potem aktualizuj i masz.
Wie ktoś jak zmienić tło formularza? żeby tylko napis było widać bez tego białego gówna z tyłu.
W formularzu jest tekst, który w całości wyświetla się na laptopie, ale na smartfonie jest ucięty i Klient nie może przeczytać go w całości można powiększyć komórkę pola tekstowego lub wstawić płynący tekst lub jest jakieś inne rozwiązanie?