Są dwa rodzaje biznesów: te które mają stronę internetową i te, które będą ją miały. Już chyba każdy, kto potrzebuje jakiejś usługi lub produktu w pierwszej kolejności zagląda do internetu. Dlatego warto mieć w internecie nawet najprostszą stronę-wizytówkę. Warto także udostępnić jakąś formę kontaktu. Możemy to osiągnąć przez formularz kontaktowy. W tym wpisie pokażę Ci jak stworzyć formularz kontaktowy na WordPressie.
Formularz kontaktowy na WordPressie: Contact Form 7
Super popularną wtyczką, którą stworzymy własny formularz kontaktowy, jest Contact Form 7. Jest to wtyczka darmowa dostępna z repozytorium WordPressa. Jest prosta, ale dużo można za jej pomocą zrobić zwłaszcza, że łatwo ją rozszerzać o jakieś niestandardowe funkcjonalności.
Nowy formularz
Po zainstalowaniu i włączeniu wtyczki zobaczysz w panelu administracyjnym nową opcję: „Kontakt”. Po kliknięciu w tę opcję zobaczysz listę już istniejących formularzy.
By dodać nowy formularz kliknij „Dodaj”. Zobaczysz wtedy podstawowy szablon formularza z polami „Imię i nazwisko”, „Twój adres email”, „Temat”, „Twoja wiadomość” oraz przycisk „Wyślij”.
Nie wygląda to super przyjaźnie, bo w tym widoku nie możemy zobaczyć reprezentacji graficznej. Zaraz Ci pokażę jak podejrzeć formularz, najpierw jednak wprowadź jakiś tytuł (czyli po prostu nazwę) formularza. Następnie kliknij przycisk „Zapisz”. Zobaczysz wtedy shortcode, który będzie służył do wyświetlania formularza.
Umieszczenie formularza kontaktowego na stronie
Umieścimy teraz nowo stworzony formularz na stronie. Stworzę nową stronę na WordPressie, którą nazwę po prostu „Kontakt”. Formularz możemy dodać na stronę na dwa sposoby. Po pierwsze za pomocą gotowego bloku. Jeżeli używasz Gutenberga (domyślnego edytora) to wystarczy, że wyszukasz na liście bloków bloku Contact Form 7.
Następnie musisz wybrać formularz, który chcesz umieścić na tej stronie.
Gdy podejrzysz stronę zobaczysz, że wyświetla się na niej stworzony przez nas formularz.
W taki sposób możesz podglądać zmiany w formularzu – odświeżając stronę na której osadzony jest formularz.
Formularz możesz też wrzucić w formie shortcode’a.
Da to taki sam efekt na stronie.
Dodawanie pól do formularza
Nowe pola możemy dodać klikając po prostu na kafelek z typem tego pola. W formularzach kontaktowych na ogół powinna się znaleźć informacja o tym, w jaki sposób będą wykorzystywane dane przesłane formularzu. Często ma to form checkboxa z linkiem do polityki prywatności. Takie właśnie „pole” dodamy teraz do naszego formularza.
W tym celu trzeba kliknąć na kafelek „wyrażanie zgody.” Po tej akcji otworzą się opcje nowego pola.
Jak widzisz w powyższym przykładzie podałam nazwę pola i warunek. Warunek to jest ten komunikat, który będzie się wyświetlał w formularzu obok checkboxa. Odznaczyłam też „Zaznacz to pole jako opcjonalne”, bo chcę by było obowiązkowe.
Atrybut ID i atrybut klasy nie będą Ci potrzebne w podstawowych ustawieniach. Te pola służą do ustawienia id i klasy na naszym nowo utworzonym polu.
Na samym dole, obok przycisku „Wstaw tag” widzisz ostateczny efekt. Tak nasze pole będzie przekazane w formularzy. Kliknij na „Wstaw tag”.
W zależności od tego, w którym miejscu formularza kliknęliśmy wcześniej myszką, tam wstawi się nasze nowe pole.
Teraz zapisz formularz i odśwież stronę, na której ten formularz jest umieszczony. Zobaczysz tam nowe pole.
Jedyne czego nam tutaj jeszcze brakuje, to podlinkowania tej polityki prywatności. Można to zrobić dodając po prostu element o tagu „a” do naszego formularza. Jeżeli nie znasz HTMLa to wystarczy, że rzucisz okiem na poniższy przykład i po prostu zmienisz link do polityki prywatności („/polityka-prywatnosci”) na swój. Jeżeli Twoja polityka prywatności znajduje się pod adresem https://jakaśtwojastrona.pl/politykaprywatnosci, to musisz ustawić link na „/politykaprywatnosci” albo podać cały link ” https://jakaśtwojastrona.pl/politykaprywatnosci”.
Co się dzieje z odpowiedziami z formularza?
Są wysyłane na Twojego maila, o ile skonfigurujesz to poprawnie. Odpowiedzi nie są nigdzie zapisywane, dlatego bardzo ważna jest poprawna konfiguracja i przetestowanie formularza na wszelki wypadek. Konfigurację znajdziesz w zakładce „Adres e-mail”.
To, co się znajduje w nawiasach kwadratowych to parametry. Odbiorca to adres email, na jaki przyjdzie każdy wysłany formularz kontaktowy. Domyślnie jest to email administratora strony (odpowiada za to parametr _site_admin_email).
Nadawca to po prostu adres email nadawcy. Czyli jeżeli jako administrator strony otrzymasz maila z formularza kontaktowego, to mail będzie wyglądał jak wysłany właśnie z tego maila. Parametr _site_title doda przed adresem email jeszcze tytuł Twojej strony.
Temat wiadomości będzie skonstruowany w powyższym przykładzie z połączenia tytułu strony i tytułu, jaki osoba chcąca się z Tobą skontaktować podała w formularzu (pole „Temat”).
W treści wiadomości znajdzie się przede wszystkim wiadomość od użytkownika (your-message), ale także jego imię, adres email i tytuł.
Te parametry z formularza to po prostu nazwy pól. To właśnie nazwami pola posługujemy się, żeby przekazać je w mailu, który potem przyjdzie do nas. Na samej górze możesz zobaczyć listę pól, które stworzyliśmy w formularzu. Jedno z nich jest pogrubione. Jest to pole z akceptacją polityki prywatności, które utworzyliśmy. To pole jest wyróżnione, bo nie przekazujemy go w mailu do nas. Przekażmy je więc.
A oto jak będzie wyglądał email, który otrzymamy, gdy ktoś wyśle nam wiadomość z formularza kontaktowego.
Czy to wszystko co umie Contact Form 7?
Nie, podstawowe funkcjonalności możemy rozszerzać zarówno za pomocą wtyczek jak i kodu. Za pomocą istniejących i do tego darmowych wtyczek możemy np. zamienić formularz Contact Form 7 w formularz przyjmujący płatności (dzięki integracji ze Stripe). Możemy także dodać jakieś warunkowe pola albo zapisywać wysłane formularze w bazie danych.
Bardzo polecam właśnie tę wtyczkę do formularzy ze względu na możliwości rozszerzania jej funkcjonalności, gdy będziemy tego potrzebowali.