Podczas budowy strony internetowej dosyć istotną rolę odgrywa by nasi obecni jak i przyszli klienci mogli się z nami w łatwy sposób skontaktować.
Umieszczenie na stronie samego adresu e-mail w praktyce nie zawsze wystarczy. Skopiowanie adresu i zalogowanie się do skrzynki pocztowej może skutecznie zniechęcić część osób a i nigdy nie mamy pewności czy koś nie spisze sobie tego adresu i nie za spamuj nam skrzynki. Dlatego warto jest pomyśleć o formularzu kontaktowym.
Trochę o formularzach w CMS
Na platformę WordPress stworzonych zostało wiele wtyczek, dzięki którym możemy szybko i w łatwy sposób zbudować formularz. Obsługa większości z nich nie wymaga praktycznie żadnej wiedzy informatycznej – jedynie poświęcenia chwili na doczytanie co napisał autor. Jedną z nich jest właśnie Contact Form 7. Plugin ten przeznaczony jest zarówno do tworzenia prostych jak i nieco bardziej rozbudowanych formularzy kontaktowych.
Sama wtyczka jest w miarę intuicyjna – praktycznie konfiguracja podstawowego formularza zajmie nam najwyżej kilka minut. Dlatego jest też polecana przez wiele osób jako jedna z najlepszych. Na korzyść wtyczki z pewnością przemawia również dostępność w języku polskim – tak więc język angielski nie jest wymogiem koniecznym (choć może się przydać przy bardziej skomplikowanych konfiguracjach).
Od czego zacząć pracę z Contact Form 7
Pracę z wtyczką zaczynamy jak zwykle od jej instalacji. Proces instalacji pluginów w WordPress opisałam w innym wpisie dlatego tylko zostawię wam do tego wpisu link. Po uruchomieniu wtyczki musimy ją skonfigurować. Opcje Contact Form 7 znajdziemy w panelu bocznym – połączeniu powinien pojawić się tam nowy odnośnik „Formularze”
Po wejściu w niego zobaczymy od razu pierwszy przykładowy formularz.
Budowa formularza
W nowo otwartym oknie zobaczymy listę istniejących już formularzy. Na samym początku będzie to jeden już gotowy jeden przykładowy formularz. Obiekt ten możemy edytować lub utworzyć nowy. Warto w tym miejscu wspomnieć, że jeśli zdecydujemy się utworzyć nowy to będzie on dokładnie taki samo jak pierwszy przykładowy – gdyż zawiera on wyłącznie podstawową strukturę.
Oprócz nazwy formularza w tym oknie będziemy mogli zobaczyć jaki jest „skrót” do formularza (shortcode) oraz datę utworzenia. Kod ten przyda nam się w momencie gdy będziemy chcieli umieścić formularz w treści strony lub wpisu.
W celu wejścia w formularz klikamy w jego nazwę.
Nowy formularz będzie wyglądał jak na załączonym obrazku poniżej. Jak widać składa się on z kilku sekcji.
W górnej części znajduje się pole z nazwą formularza, oraz kodem który umieszczamy w miejscu gdzie chcemy, by został opublikowany formularz. Poniżej znajduje się właściwa część formularza składająca się proste menu w formie tabów z ustawieniami formularza oraz pole zmieniające swoją zawartość w zależności od tego, którą opcję wejdziemy.
Pierwszą kartą jest formularz.
Na początku dysponuje on następującymi polami:
- [text* your-name]
- [email* your-email]
- [text your-subject]
- [textarea your-message]
Taki formularz praktycznie powinien już wystarczyć do kontaktu. Jeśli jednak zdecydujecie się go rozbudować to jego ewentualna rozbudowa nie powinna przysparzać też dużych problemów. Praktycznie wszystkie dodatkowe pola jakie możemy dodać znajdują się nad polem tekstowym. Jedyne co do nas należy wybrać i umieścić je w odpowiednim miejscu.
Wysyłanie formularza
Teraz warto wejść w zakładkę email (gdzie zamieszczone są opcje wysyłki) i zmienić adres e-mail na ten na który mają przychodzić wiadomości.
- Odbiorca – w to miejsce wpisujemy adres na jaki mają przychodzić wiadomości e-mail
- Nadawca – adres z którego jest wysyłany (najlepiej, by był to powiązany z domeną np. biuro@aurainweb.pl dla domeny http://www.aurainweb.pl – inny może powodować nie dochodzenie wiadomości)
- Temat – pole z tematem (domyślnie wprowadzane jest z formularza [temat] można jednak usunąć i ustawić wartość domyślną np. wiadomość z strony)
- Dodatkowe nagłówki
- Treść wiadomości – treść wiadomości, w tym polu umieszczamy kody z naszego formularza, które zostaną zastąpione treścią
- Załączniki – pole na załączniki
- Email (2) – daje możliwość wysyłania kopi wiadomości
Na koniec wprowadzania zmian wszystko zapisujemy.
Komunikaty
Ważne jest też ustawienie komunikatów tak, by wypełniająca osoba wiedziała gdzie popełnia ewentualny błąd.
Umieszczanie na stronie
Tak jak piałam już wcześniej należy skopiować indywidualny shortcode formularza np.:
[contact-form-7 id="6052" title="Formularz 1"]
umieścić go w miejscu na stronie tam gdzie chcemy pokazać formularz.
Po aktualizacji formularz nie musimy umieszczać na nowo kodu jeśli wprowadzimy jakąś zmianę na stronie – automatycznie zostanie to zaktualizowane.
przykładowy formularz:
[contact-form-7 id=”6052″ title=”Formularz 1″]
Formularz można edytować podobnie jak każdy inny odwołując się do jego klasy.
Redukowanie spamu w formularzu
Bez wątpienia stanowi to wyjątkowo irytujące zjawisko. Dlatego w celu jego ograniczenia można do formularza dodatkowo zainstalować wtyczkę Really Simple CAPTCHA. W nowszej wersji pole wtyczki jest widoczne na belce narzędzi – nie jest ona jednak dostępna.
W celu skonfigurowania wtyczki musimy pobrać indywidualny klucz z Google.
Contact Form 7 wiadomości nie docierają
Na początek sprawdź czy Nadawca jest w domenie strony.
Bywa tak czasem tak że nasz hosting nie pozwala na wykorzystanie funkcji php mail, wymaga jest za to autoryzacja smtp. Domyślnie wtyczka jednak nie posiada takiej możliwości. Dlatego trzeba zainstalować dodatkową wtyczkę np. WP Mail SMTP.
Zmiana wyglądu formularza
Wygląd formularza możemy zmienić samodzielnie z pomocą HTML i CSS lub zainstalować wtyczkę Contact Form 7 Style dzięki której będziemy mogli dokonać zmiany wyglądu z poziomu edytora.
Nowsza wersja pluginu została trochę zmodyfikowana jednak zasady jej działania w CMS WordPress nie uległy zmianie.
Aktualizacja [26.09.2017]
Dodatkowe tagi:
contact form 7 konfiguracja
zaawansowane formularze kontaktowe w WordPressie
instalacja
