Pracując z formularzami na skrypcie Wordpress, ciężko nie natchnąć się na wtyczkę "Contact Form 7" - wordpress.org/plugins/contact-form-7/
Pomimo rozbudowanych funkcjonaliści, niektórzy mogą odczuwać pewne braki w możliwościach formatowania pól formularza a w szczególności dodawaniu własnych pól, nie przewidzianych wcześniej przez autora wtyczki.
Jednym z takich przykładów może być wielo-poziomowy znacznik SELECT, więc lista rozwijana, gdzie użytkownik może wybierać dowolną pozycje, która automatycznie spowoduje załadowanie do kolejnego znacznika SELECT.
Przykładem takiego multi-level select jest wybór miasta, powiedzmy, że w naszym formularzu umieścimy pole SELECT z wyborem województwa a poniżej zablokowane pole w wyborem miasta. Dopiero po wyboru jakiegoś województwa, użytkownik dostanie dostęp do wyboru miasta, spośród wczytanej listy miast tylko z wybranego województwa.
DEMO: strona demonstracyjna (obecnie nieaktywna)
LICENCJA: MIT (darmowa, open-source)
Aktualizacja 9 kwietnia 2015
Wtyczka dostosowana do frameworka Bootstrap
Wymagania:
- minimalna znajomość PHP, obsługi FTP, podstawy HTML
- podstawowa znajomość Wordpress
- zainstalowana wtyczka "Contact Form 7" i dostęp do FTP
- poradnik został pisany dla wersji wtyczki 3.9.3
-
Zaczynamy od lokalizacji katalogu wtyczki na FTP, przeważnie będzie to:
./wp-content/plugins/contact-form-7/ -
Uruchamiamy plik:
./wp-content/plugins/contact-form-7/includes/functions.php
Znajdujemy funkcje "wpcf7_load_modules" (wiersz około 361) w środku tej funkcji szukamy następującej linii:
foreach ( $mods as $mod ) {
Przed tą linią dodajemy następujący kod:
$mods[] = 'mmselect';
Tak więc fragment tej funkcji będzie wyglądał:
$mods = array(
'acceptance', 'flamingo', 'special-mail-tags','akismet', 'jetpack', 'submit', 'captcha', 'number','text', 'checkbox', 'quiz', 'textarea', 'date','response', 'file', 'select', 'listo' ;
$mods[] = 'mmselect';
foreach ( $mods as $mod ) {
- pobieramy i rozpakowujemy plik Pobierz plikmmselect.php.zip
Rozpakowany plik PHP umieszczamy na FTP w folderze:
./wp-content/plugins/contact-form-7/modules/
TO WSZYSTKO, teraz można przejść do edycji formularza:
- Tworzymy plik tekstowy (polecam program Notepad++) z wartościami pól SELECT w formie drzewka, czyli każda wartość select-a w osobnej linii, natomiast podrzędna wartość musi być poprzedzona TABULATOREM.
Plik zapisujemy jako "mmselect_data.txt" i wrzucamy w dowolne miejsce na FTP (trzeba znać pełną ścieżkę do pliku!)
- Uruchamiamy panel admina naszego bloga, przechodzimy do sekcji "Formularze > Formularze" następnie wybieramy dodany wcześniej formularz lub tworzymy nowy i w polu "Formularz" umieszczamy poniższy zapis:
<p>[mmselect nazwa_pola "/PELNA-SCIEZKA-DO/mmselect_data.txt" "Wybierz kraj" "Wybierz województwo" "Wybierz miasto"]</p>
Gdzie:
"nazwa_pola" - wygenerowana wartość utworzona przez złączenie wszystkich poszczególnych pól SELECT wchodzących w skład "mmselect" (odpowiednik parametru <select name="nazwa_pola">).
"/PELNA-SCIEZKA-DO/mmselect_data.txt" to pełna ścieżka do pliku tekstowego TXT wrzuconego na FTP (patrz punkt 4)
"Wybierz kraj" "Wybierz województwo" "Wybierz miasto" - lista opisów pól SELECT. UWAGA! Opisów musi być dokładnie tyle ile wynosi maksymalny poziom pliku tekstowego (patrz punkt 4).
Jeśli potrzebujemy jedynie dwa poziomy (pola SELECT) o nazwach: "Marka auta" i kolejne o nazwie "Model auta", musimy utworzyc taki kod:
<p>[mmselect nazwa_pola "/PELNA-SCIEZKA-DO/mmselect_data.txt" "Marka auta" "Model auta"]</p>
Analogicznie dla większej ilości pól.
- Zapisujemy wartość pól SELECT: na podstronie edycji naszego formularza w polu "Treść wiadomości:" dodajemy kod:
Wartość mmselect = [nazwa_pola]
Po wypełnieniu formularza przez użytkownika na podany przez nas mail w ustawieniach dojdzie wiadomość o przykładowej treści:
Wartość mmselect = Polska - Podkarpackie - Mielec
--
Wtyczka testowana dla trzech poziomów SELECTów, ale powinna działać dla dowolnej ilości
Wtyczka pisana "na kolanie" więc może zawierać pewne błędy lub niedociągnięcia, w przypadku wykrycia takich błędów - prosze o kontakt
![[wordpress] [Contact Form 7] multi level select](/_next/image?url=https%3A%2F%2Fs3.c.kastin.pl%2Fwebowiec-net%2Fcover_wordpress_contact_form_7_multi_level_select_9571c1aa42.jpg&w=3840&q=75)

![[wordpress] Go TOP of the page – skocz na górę strony](/_next/image?url=https%3A%2F%2Fs3.c.kastin.pl%2Fwebowiec-net%2Fgotop_hero_a54150217e.webp&w=3840&q=75)