Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!

Gdy posiadamy stronę internetową istotnym jej elementem jest możliwość skontaktowania się z nami.

W jednym z wcześniejszych wpisów przedstawiłem, jak w prosty sposób sprawić, by WordPress wysyłał wiadomości za pośrednictwem zewnętrznych serwerów SMTP. Dziś będzie o kolejnym istotnym elemencie komunikacji za pośrednictwem wiadomości e-mail na naszej stronie – zwłaszcza w przypadku firmowej strony internetowej – czyli o formularzach kontaktowych…

WordPress i Contact Form 7, czyli formularz kontaktowy

Sam WordPress z siebie wprawdzie nie oferuje czegoś takiego jak formularze – ale od czego mamy wtyczki… ;-)

Wpis został zaktualizowany we wrześniu 2015.

Wtyczek do obsługi formularzy znajdziecie pełno, zarówno od tych bardzo prostych – po prawdziwe kombajny… Ja polecam zacząć od wtyczki Contact Form 7, która nawet początkującym – po chwili zabawy – nie powinna sprawić większych problemów, a zarazem oferuje całkiem sporo przydatnych opcji.

wordpress_plugins_contact-form-7_baner

Do wyboru mamy takie pola jak:

  • Pole tekstowe
  • Email
  • Adres URL
  • Numer telefonu
  • Liczba (spinbox)
  • Liczba (slider)
  • Data
  • Obszar tekstowy
  • Rozwijane menu
  • Pole wyboru
  • Przyciski
  • Akceptowanie
  • Quiz
  • Captcha
  • reCAPTCHA (od 2015.09)
  • Przesyłanie plików
  • Przycisk wysyłania

Każdy typ pola to nie tylko inny wygląd, ale i dodatkowe funkcje i opcje (np. walidacja).

Konfiguracja nie taka skomplikowana jak się (na początku) może wydawać

Na początku obsługa (konfiguracja formularza) może wydawać się skomplikowana, ale wystarczy poświęcić chwile na „poeksperymentowanie” by złapać co i jak:

wordpress_plugins_contact-form-7_ustawienia

W aktualnej wersji (wrzesień 2015) ekran ustawień/edycji formularza wygląda trochę inaczej, pojawiły się zakładki/panele w których pogrupowano ustawienia…

Contact Form 7 i Google Analytics

Jeśli korzystacie na swojej stronie ze statystyk Google Analytics, to być może będziecie chcieli śledzić również zdarzenia związane z wciśnięciem przycisku „wyślij wiadomość”.

W tym celu należy korzystać z kodu Google Analytics w wersji Universal Analytics, oraz w „dodatkowym ustawieniach” formularza dodać np. taki wpis:

on_sent_ok: "_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);"

wordpress_plugin_fontactform_additional-settings_01

CSS, czyli modyfikujemy wygląd formularza

Wyglądem samego formularza można sterować za pomocą pliku CSS naszego szablonu (polecam korzystać z szablonów potomnych). Każdemu elementowi formularza możemy dodać klasę (a nawet kilka) i/lub identyfikator w widoku kodu całego formularza:

[text text-365 id:id-naszego-elementu class:nasza-klasa-css01 class:nasza-klasa-css02]

Lub na etapie dodawania elementu:

wordpress_plugin_contact-form-7_css-elementu01

Później wystarczy tylko dopisać do pliku CSS kilka reguł sterujących wyglądem danych klas lub ID:

.nasza-klasa-css01 { parametry; }

#id-naszego-elementu { parametry; }

#id-naszego-elementu .nasza-klasa-css02 { parametry; }

Klasy globalne WPCF7

Oprócz tego wtyczka Contact Form 7 dodaj swoje własne, uniwersalne (globalne) klasy do kodu formularza, m.in.:

  • wpcf7
  • wpcf7-form
  • wpcf7-form-control-wrap
  • wpcf7-text
  • wpcf7 input
  • wpcf7-textarea
  • wpcf7-submit
  • wpcf7-checkbox
  • wpcf7-validates-as-required
  • wpcf7-list-item
  • wpcf7-list-item-label

Oprócz tego każdy formularz dostaje automatycznie swój unikalny identyfikator:

<div role="form" class="wpcf7" id="wpcf7-f9225-p2558-o1" lang="pl-PL" dir="ltr">

Dlatego warto zajrzeć do kodu źródłowego strony, gdzie znajdziecie wszelkie niezbędne informacje…

Flamingo, czyli w kierunku systemu CRM

Na razie – jak sam pisze autor wtyczki – jest to dość prosta wtyczka, która docelowo w połączeniu z Contact Form 7 (choć wg autora Flamingo ma działać również z innymi wtyczkami…) ma zmienić WordPressa w prawdziwy CRM, choć na razie do tego jeszcze daleka droga.

Po aktywacji wtyczki w menu WordPressa (boczne menu panelu zarządzania) pojawi się nowa opcja Flamingo, a w niej 2 pozycje:

  • Adress Book – książka adresowa, czyli osoby które wysyłały do nas wiadomości
  • Inbound Messages – wiadomości przychodzące do nas, wysłane nam np. za pośrednictwem formularza CF7

Lista wiadomości:

wordpress_plugin_flamingo_01

Szczegóły wiadomości:

wordpress_plugin_flamingo_02

Korekta nadawcy i tematu

Jak zapewne niektórzy z Was już zauważyli – zarówno na liście wiadomości, jak i w szczegółach niektóre pola są błędnie wypełnione:

Subject: [your-subject] From: [your-name] <[your-email]>

Dzieje się tak, gdy w formularzu kontaktowym (CF7) zmieniliśmy domyślne nazwy pól na własne. By to skorygować należy albo zmienić je na domyślne, lub posłużyć się zakładką „ustawienia dodatkowe” (tam gdzie kilka akapitów wcześniej dodawaliśmy kod związany z Google Analytics) w ustawieniach naszego formularza i dodać tam np. taki kod:

flamingo_email: "[kontakt-email]"
flamingo_name: "[kontakt-nazwa]"
flamingo_subject: "[kontakt-temat]"

wordpress_plugin_fontactform_additional-settings_01

Od tego momentu wszystkie nowe wiadomości będą zapisywane już poprawnie:

wordpress_plugin_flamingo_03wordpress_plugin_flamingo_04

Oczywiście formularz kontaktowy sam z siebie jeszcze nic nie zrobi – potrzebny jest jakiś system odpowiedzialny za wysyłanie wiadomości e-mail, o czym więcej pisałem niedawno w tym wpisie…

Zgłoś błąd na stronie

Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!

WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które - w miarę możliwości - spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. "linki partnerskie", co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte... :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.

Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!