Dodawanie formularzy do strony internetowej nigdy nie było takie proste jak obecnie. Kiedyś trzeba było wdrażać skomplikowane skrypty, które wyświetlały pola, sprawdzały czy wszystkie obowiązkowe pola zostały wypełnione, a następnie dane z wypełnionych pól były wysyłane za pośrednictwem serwera pocztowego na określony adres mailowy. Dziś wystarczy zainstalować jedną wtyczkę i odpowiednio ją skonfigurować aby uzyskać w pełni działający zaawansowany formularz na stronie.

Aby zainstalować wtyczkę obsługującą formularze wejdź do panelu dodawania nowej wtyczki i wpisz w wyszukiwarce Contact Form 7 (jeśli dokonałeś personalizacji swojej strony w serwisie 500 sekund wystarczy że klikniesz tutaj). Zainstaluj i włącz wtyczkę.

Przyglądamy się konstrukcji domyślnego formularza

Po lewej stronie w menu powinieneś zobaczyć opcję:

Nakieruj myszką na tą opcję i wybierz z rozwijanego menu  Formularze. Powinieneś zobaczyć przykładowy formularz kontaktowy zainstalowany domyślnie z wtyczką. Warto przejść do jego edycji aby zobaczyć jak wygląda konstrukcja budowanego formularza i jak konfigurować wiadomość, którą otrzymasz w momencie, kiedy ktoś ten formularz wypełni.

Opcje każdego formularza składają się z czterech zakładek:

[wc_tabgroup layout=”box”]

[wc_tab title=”Formularz”]

Pierwsza z nich (Formularze) pozwala na zbudowanie przy pomocy prostych shortcodów (fragmentów kodu zamkniętych w ostrych nawiasach w prostszej formie aniżeli kod PHP) formularza, który będzie wyświetlał się na stronie.

Formularz domyślny zawierał poniższy fragment kodu:

<p>Imię i nazwisko (wymagane)<br />
     </p>

<p>Adres email (wymagane)<br />
    [email* your-email] </p>

<p>Temat<br />
     </p>

<p>Treść wiadomości<br />
    [textarea your-message] </p>

<p>[submit "Wyślij"]</p>

Najczęściej jeśli umieszczam na stronie formularz kontaktowy na podstawie domyślnego dokonuję jednej prostej zmiany – usuwam linię 7 i 8. Wychodzę bowiem z założenia, że jeśli ktoś chce w konkretnej sprawie się do mnie zgłosić, wtedy nie potrzebuje dodatkowego pola z tematem, a opisze całą sprawę w treści wiadomości. Im krótszy formularz tym większa szansa, że zostanie wypełniony do końca i wysłany, dlatego właśnie zawsze usuwam pole Temat.

Zwróć uwagę na to, że w nawiasy ostre mają zwykle taką samą konstrukcję. Na początku otwarcie [ a po nim typ pola które ma się wyświetlić czyli text, email jeśli to pole do wpisania adresu mailowego albo textarea jeśli ma się wyświetlić pole do wpisania dłuższej wiadomości. W dalszej kolejności opcjonalnie * która oznacza, że pole jest wymagane i formularz nie będzie wysłany jeśli nie zostanie uzupełnione. Później po spacji dowolna nazwa, która będzie nam potrzebna w drugiej zakładce przy konstruowaniu maila wysyłanego po wypełnieniu formularza. Na końcu tak jak na początku nawias ostry ].

[/wc_tab]

[wc_tab title=”Email”]

Druga zakładka (Email) pozwala na ustawienie adresu na który będzie wysyłana wiadomość z formularza, tematu tej wiadomości oraz konstrukcji zawierającej wszystkie dane wpisane w formularz. Bez poprawnie skonfigurowanego maila część danych może nie trafić do odbiorcy, dlatego na konfigurację tej zakładki poświęć możliwie najwięcej czasu.

Aby formularz działał poprawnie należy wpisać adres email, na który będzie dostarczana wiadomość (To) oraz adres, z którego będzie wysyłana (From). Niektóre serwery blokują wysyłkę z obcych adresów, także jeśli posiadasz stronę na Home.pl wtedy warto założyć osobny mail w domenie takiej jak witryna (przykładowo na 500sekund wysyłam i odbieram maile z formularza na ten sam adres, który ma po znaku @ adres 500sekund.pl). Opcjonalnie możesz uzupełnić pole Temat tak aby np. wszystkie wiadomości z formularza miały na początku taki sam zwrot. W kolejnym polu czyli Additional Headers możesz zadeklarować aby kopia wiadomości trafiała do osoby, która ją wysłała. Aby to zrobić wpisz w to pole:

Reply-to: [your-name] <[your-email]>

oczywiście pod warunkiem, że wpisane przez wypełniającego formularz imię zostało wpisane w polu wyświetlonym przy pomocy

a adres mailowy został podany w polu [email* your-email]. W przeciwnym wypadku powyższa linia powinna zostać dopasowana do zadeklarowanych przez Ciebie nazw. Jeśli nie potrzebujesz wysyłać kopii – wystarczy, że z pola Additional Headers usuniesz to, co jest tam domyślnie wpisane.

Najważniejszym po adresach mailowych z pierwszych pól jest Message Body. To tutaj powinny się znaleźć shortcody odpowiadające za wyświetlenie w mailu tego, co ktoś wpisał do pól formularza. Domyślnie szablon formularza kontaktowego wygląda w następujący sposób:

Nadawca: [your-name] 
Adres e-mail nadawcy: [your-email]
Temat: [your-subject]

Treść wiadomości:
[your-message]

--
This e-mail was sent from a contact form on 500sekund.pl (https://500sekund.pl/)

Po drobnych modyfikacjach związanych m.in. z usunięciem tematu z formularza mój zmodyfikowany szablon wygląda tak:

Nadawca: [your-name] 
Adres e-mail nadawcy: [your-email]

Treść wiadomości:
[your-message]

--
Ten email został wysłany za pomocą formularza kontaktowego w serwisie 500 sekund (https://500sekund.pl/)

Kolejne pole File Attachments pozwala na dodanie do maila załączników.

Ostatni checkbox czyli Email (2) daje możliwość wysłania drugiego maila na zupełnie inny adres i z innym szablonem.

[/wc_tab]

[wc_tab title=”Komunikaty”]

Trzecia zakładka (Komunikaty) umożliwia edycję komunikatów pojawiających się przy określonych okazjach. Większość z nich będzie zapewne przetłumaczona, warto jednak sprawdzić tę zakładkę, bowiem nie wszystkie doczekały się polskiej wersji językowej i trzeba kilka z nich przetłumaczyć.

[/wc_tab]

[wc_tab title=”Ustawienia dodatkowe”]

Ostatnia zakładka (Ustawienia dodatkowe) pozwala na dopisanie kilku dodatkowych reguł do formularza, m.in. włączyć wersję demo albo włączyć dodatkowy komunikat informujący o wysłaniu formularza. Szczegółowo dodatkowe opcje opisane są w dokumentacji wtyczki.

[/wc_tab]

[/wc_tabgroup]

Dodatkowe pola w formularzu

Oprócz tradycyjnych pól tekstowych czy większych obszarów do wpisywania treści wtyczka Contact Form 7 pozwala nam dowolnie rozbudowywać przygotowywany przez  nas formularz. Wśród elementów, które możesz dodać są: pola jednokrotnego i wielokrotnego wyboru, rozwijane menu, pole typu quiz oraz miejsce gdzie można załączyć plik.

Poniżej znajdziesz krótką instrukcją dotyczącą dodawania poszczególnych elementów formularza.

Adres URL

Pole idealne do umieszczania adresu strony internetowej. Po wpisaniu adresu automatycznie dodaje się na początku http:// jeśli osoba wypełniająca formularz tego nie zrobiła.

Przykładowa konstrukcja w zakładce Formularz:

<p>Adres URL<br />
[url unikatowa-nazwa-pola-adres-url] </p>

Przykładowe wywołanie w zakładce Email:

[unikatowa-nazwa-pola-adres-url]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na adres URL, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Numer telefonu

Pole przeznaczone do przekazywania numerów. Podczas próby wpisania innych znaków otrzymamy komunikat: Podany numer telefonu jest niepoprawny.

Przykładowa konstrukcja w zakładce Formularz:

<p>Nr telefonu<br />
[tel unikatowa-nazwa-pola-tel] </p>

Przykładowe wywołanie w zakładce Email:

[unikatowa-nazwa-pola-tel]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na numer telefonu, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Numer

Pole służące do przekazywania numerów z elementem pozwalającym zwiększać/zmniejszać wpisany numer. Bardziej restrykcyjne aniżeli poprzednie pole, ponieważ nie pozwala na wpisanie innych znaków aniżeli cyfr.

Przykładowa konstrukcja w zakładce Formularz:

<p>Numer<br />
[number unikatowa-nazwa-pola-numer] </p>

Przykładowe wywołanie w zakładce Email:

[unikatowa-nazwa-pola-numer]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na numer , a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Data

Pole służące do podania daty. Oprócz formatowania dd.mm.rrrr posiada również strzałki więcej/mniej oraz strzałkę rozwijającą kalendarz pozwalający wybrać datę przy pomocy kursora.

Ponieważ pozwala na dodanie pojedynczej daty, dlatego przygotowując np. formularz rezerwacji pokoju na stronie hotelu wymagane jest umieszczenie dwóch pól: data rozpoczęcia pobytu i data zakończenia.

Przykładowa konstrukcja w zakładce Formularz:

<p>Data<br />
[date unikatowa-nazwa-pola-data]</p>

Przykładowe wywołanie w zakładce Email:

[unikatowa-nazwa-pola-data]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na datę, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Rozwijane menu

Pole umożliwiające wybór jednej z kilku opcji. Szczególnie przydatne w sytuacji kiedy mamy witrynę będącą katalogiem produktów i do każdego z nich podpięty jest formularz zamówienia z możliwością wyboru koloru, rozmiaru lub innej cechy precyzującej zamówienie.

Przykładowa konstrukcja w zakładce Formularz:

<p>Rozwijane menu<br />
[select unikalna-nazwa-menu-rozwijanego "pierwsza opcja" "druga opcja" "trzecia opcja"]</p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-menu-rozwijanego]

Konstrukcja różni się od poprzednich znaczników tym, że po unikalnej nazwie występują oddzielone spacją nazwy kolejnych opcji. Może być ich oczywiście więcej niż trzy. Wybrana opcja pojawi się w treści emaila wysłanego po zatwierdzeniu formularza. Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole menu rozwijanego jak również przekażemy tę informację w mailu.

Checkbox – pole wielokrotnego wyboru

Kwadratowe pole pozwalające na „zaptaszkowanie” wybranych opcji znane jest pewnie z zaawansowanych formularzy. Stosowane jest w sytuacji, kiedy pojawia się kilka możliwości i każda z nich może zostać wybrana.

Przykładowa konstrukcja w zakładce Formularz:

<p>Checkbox - pole wielokrotnego wyboru<br />
[checkbox unikalna-nazwa-pola-wielokrotnego-wyboru "pierwsza opcja" "druga opcja" "trzecia opcja"]</p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-pola-wielokrotnego-wyboru]

Konstrukcja jest podobna do rozwijanego menu – po unikalnej nazwie występują oddzielone spacją nazwy kolejnych opcji. Może być ich oczywiście więcej niż trzy. Wybrana opcja pojawi się w treści emaila wysłanego po zatwierdzeniu formularza. Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole wielokrotnego wyboru jak również przekażemy informację o dokonanym wyborze w mailu.

Przycisk typu radio czyli pole jednokrotnego wyboru

Okrągłe pole pozwalające na zaznaczenie tylko jednej opcji możesz znaleźć w zaawansowanych formularzach. Stosowane jest w sytuacji, kiedy pojawia się kilka możliwości i może zostać wybrana tylko jedna.

Przykładowa konstrukcja w zakładce Formularz:

<p>Radio-button - przełącznik jednokrotnego wyboru<br />
[radio unikalna-nazwa-przycisku-typu-radio "radio1" "radio2" "radio3"]</p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-przycisku-typu-radio]

Konstrukcja jest podobna do rozwijanego menu – po unikalnej nazwie występują oddzielone spacją nazwy kolejnych opcji. Może być ich oczywiście więcej niż trzy. Wybrana opcja pojawi się w treści emaila wysłanego po zatwierdzeniu formularza. Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole typu radio jak również przekażemy tę informację w mailu.

Checkbox typu acceptance

Kwadratowe pole pozwalające na „zaptaszkowanie” używane jest najczęściej do akceptacji regulaminu. Stosowane jest w sytuacji, kiedy przed wysłaniem formularza konieczna jest akceptacja zgody na przetwarzanie danych osobowych albo akceptacja regulaminu lub ważnej informacji dopisanej do formularza.

Przykładowa konstrukcja w zakładce Formularz:

<p>Akceptacja warunków regulaminu<br />
[acceptance unikalna-nazwa-pola-acceptance]</p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-pola-acceptance]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole z checkboxem. Dobra praktyką jest podpięcie pod słowo „regulaminu” podstrony, na której można regulamin znaleźć. W tej sytuacji w zakładce Formularz umieść poniższy fragment kodu:

<p>Akceptacja warunków <a href="http://twojastronawww.pl/regulamin" target="_blank">regulaminu</a><br />
[acceptance unikalna-nazwa-pola-acceptance]</p>

Zapytanie typu quiz

Pole typu quiz nie różni się na pierwszy rzut oka od zwyczajnego pola. Od miejsce do wpisania tekstu i komunikat powyżej. Z doświadczenia wiem że takie pole sprawdza się idealnie jako własnej roboty zabezpieczenie przed skryptami spamującymi. Niech nie myli Cię nazwa quiz. Możesz przy pomocy tego pola zadać pytanie odwiedzającemu stronę i jeśli wpisze właściwą odpowiedź, wtedy spełniony zostanie warunek konieczny do wysyłki formularza. Zachęcam Cię aby pytanie nie było równaniem matematycznym, ponieważ roboty spamujące radzą sobie z tego typu zagadkami. Lepiej jeśli będzie to pytanie wymagające pewnej wiedzy ogólnej np. „Jaka jest stolica Polski?” albo „Podaj datę bitwy pod Grunwaldem”.

Przykładowa konstrukcja w zakładce Formularz:

<p>Odpowiedz na pytanie i udowodnij, że nie jesteś robotem:<br />
[quiz unikalna-nazwa-quizu "Podaj rok bitwy pod Grunwaldem.|1410"]</p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-quizu]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole quizu, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Jest możliwa również bardziej złożona konstrukcja dla zakładki Formularz zawierająca więcej niż jedno pytanie. Pytań może być kilka ale pojawiać się będzie w formularzu tylko jedno (losowo wybrane) dla jednego pola typu quiz. Przykładowa konstrukcja z kilkoma pytaniami:

<p>Odpowiedz na pytanie i udowodnij, że nie jesteś robotem:<br />
[quiz unikalna-nazwa-quizu "W którym roku odbyła się bitwa pod Grunwaldem?|1410" "W którym roku odbył się Chrzest Polski?|966" "Którego dnia listopada przypada w Polsce Święto Odzyskania Niepodległości?|11" ]</p>

Umieszczając powyższy fragment w zakładce Formularz w Twoim formularzu pojawi się jedno z trzech poniższych pytań:

1. W którym roku odbyła się bitwa pod Grunwaldem?
2. W którym roku odbył się Chrzest Polski?
3. Którego dnia listopada przypada w Polsce Święto Odzyskania Niepodległości?

Jak z pewnością zauważyłeś pytania i odpowiedzi są umieszczone w cudzysłowie i przedzielone pionowym separatorem „|”.

Pole email

Pole typu email służy do podawania własnie adresu mailowego. Próba wprowadzenia adresu bez @ w środku sprawi, że zostanie wyświetlony komunikat sugerujący aby wprowadzić poprawny adres email.

Przykładowa konstrukcja w zakładce Formularz:

<p>Adres email<br />
[email unikalna-nazwa-pola-email] </p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-pola-email]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na email, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Pole na temat

Muszę Ci się do czegoś przyznać. Nigdy nie rozumiałem czemu ma służyć pole temat. Rozumiem, że gdyby internauci stosowali się do tego pola to zapewne pozwoliłoby się to zorientować w wiadomościach przesyłanych przez formularz jeszcze przed ich otwarciem. Osobiście jestem zwolennikiem maksymalnego zmniejszania ilości pól w formularzu, dlatego usuwam temat wiadomości. Niektórzy jednak go zostawiają i to dla nich specjalnie pisze poniższe wyjaśnienie.

<p>Temat<br /></p>

Przykładowe wywołanie w zakładce Email umieszczana w polu Temat:

[unikalna-nazwa-pola-tematu]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na temat, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Duże pole tekstowe – textarea

Jedno z ważniejszych pól w formularzach kontaktowych. Wygląda jak zwyczajne pole tekstowe jednak jest wyższe i pozwala zamieścić większą wiadomość.

Przykładowa konstrukcja w zakładce Formularz:

<p>Treść wiadomości<br />
[textarea unikalna-nazwa-pola-textarea] </p>

Przykładowe wywołanie w zakładce Email:

[unikalna-nazwa-pola-textarea]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Dzięki temu zostanie poprawnie wyświetlone pole przeznaczone na treść wiadomości, a jego zawartość zostanie przekazana w mailu, który zostanie wysłany po wypełnieniu formularza.

Pole do załączenia pliku

Bardzo przydatne pole w formularzach rekrutacyjnych do pracy gdzie trzeba oprócz wymaganych pól załączyć swoje CV.

Przykładowa konstrukcja w zakładce Formularz:

<p>Załaduj plik (do 1 MB):<br />
[file unikalna-nazwa-pola-file]</p>

Przykładowe wywołanie w zakładce Email w polu File Attachments:

[unikalna-nazwa-pola-file]

Pamiętaj aby w wywołaniu była wpisana unikatowa nazwa ujęta w nawiasy kwadratowe. Jeśli omyłkowo umieścisz unikalną nazwę pola file w treści wiadomości zamiast w przeznaczonej na to rubryce File Attachments wtedy w treści maila wyświetli się nazwa pliku. Niestety taki formularz nie przekaże załącznika, więc plik który ktoś załączył nie zostanie wysłany do Ciebie.

Formularz ma ograniczenia dotyczące rozszerzeń i wielkości plików. Domyślnie dopuszczalne są pliki o rozszerzeniach:

jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav i wmv 

oraz rozmiar 1 MB.

Opcję możesz zmienić dopisując do powyższej konstrukcji podawanej w zakładce Formularz dodatkowe opcje. Na poniższym przykładzie dopuszczalny rozmiar został powiększony do 2 MB, a rodzaje plików zawężone do .jpg, .png i .bmp:

<p>Załaduj plik<br />
[file unikalna-nazwa-pola-file limit:2mb filetypes:jpg|png|bmp]</p>

Jak umieścić formularz na stronie/wpisie?

Po przygotowaniu i zapisaniu formularza przejdź do zakładki Formularze -> Formularze. Znajdziesz tam tabelkę zawierającą tytuł formularza, skrót (shortcode), autora i datę. Aby umieścić formularz w dowolnym miejscu w treści wpisu/strony należy skopiować skrót i wkleić go w edytorze wizualnym lub tekstowym (dowolnie) wybranej strony np. strony kontaktowej.

Wywołanie formularza możesz również umieścić w widgetach, pamiętaj jednak aby był to widget tekstowy.

Przykładowy skrót (shortcode) wygląda tak:

Błąd: Brak formularza kontaktowego.

Umieszczenie formularza w motywie jest tylko trochę bardziej skomplikowane, ale myślę że szybko załapiesz różnicę. Spójrz na składnię na przykładzie powyższego formularza z tą różnicą, że umieszczonego w kodzie witryny (w plikach dostępnych przez Wygląd -> Edytor):

<?php echo do_shortcode( '[contact-form-7 id="7589" title="Formularz kontaktowy"]' ); ?>

Kod PHP wywołujący wybrany przez Ciebie skrót zawiera funkcję do_shortcode, która odpowiada w powyższym przypadku za wyświetlenie formularza. Aby umieścić w kodzie swój formularz należy wejść do edycji pliku z rozszerzeniem .php, wybrać dogodne miejsce na wyświetlenie formularza, a następnie wkleić:

<?php echo do_shortcode( 'O TU!' ); ?>

a w miejscu tekstu O TU! wkleić skrót (shortcode) znaleziony na stronie Formularze -> Formularze.