[wordpress] [Contact Form 7] multi level select

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

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: https://webowiec.net/blog/test-mmselect/
L
ICENCJA: 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

1) Zaczynamy od lokalizacji katalogu wtyczki na FTP, przeważnie będzie to:
./wp-content/plugins/contact-form-7/

2) 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 ) {

3) pobieramy i rozpakowujemy plik mmselect.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:

4) 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, zobacz przykładowy plik w DEMO.

Plik zapisujemy jako “mmselect_data.txt” i wrzucamy w dowolne miejsce na FTP (trzeba znać pełną ścieżkę do pliku!)

5) 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.

6) 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

Powiązane artykuły

Featuring Top 2/2 of Optymalizacja strony www

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…