Menambahkan Combo Box Bertingkat pada Contact Form 7

Mungkin bagi beberapa pengguna WordPress ada yang kepikiran bagaimana membuat combo box bertingkat pada sebuah form. Misal untuk input Propinsi, Kabupaten/Kota, Kecamatan dan Keluarahan. Jika kita mempunyai dasar pemrograman PHP dan Javascript/jQuery maka kita dapat menerapkannya pada WordPress dan Contact Form 7.

Persiapan

Untuk memulainya pastikan plugin Contact Form 7 telah terinstall pada WordPress Anda. Kemudian impor data-data provinces, regencies, districts & villages ke database MySQL Anda, data source dapat Anda perloleh dari https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia. Setelah mengimpor, jangan lupa rename tabel-tabel tersebut dengan menambahkan prefix yang sesuai dengan tabel-tabel lainnya pada database WordPress Anda ( defaultnya adalah wp_ ).

Persiapan selanjutnya adalah menyiapkan direktori baru pada /wp-content/plugins. Beri nama cf7-chained-select, kemudian dalam direktori tersebut buatlah 2 file. File pertama beri nama cf7-chained-select.php dan file kedua beri nama chainedselect.js.

Menambahkan Field pada Contact Form 7

Edit contact form default bawaan plugin Contact Form 7 ( contact form 1 ) pada menu Contact -> Contact Forms. Tambahkan field-field sebagai berikut setelah "Your Email"

Buat page baru, kemudian tambahkan shortcode contact form pada content editor. Beri nama cf7-administrative-data pada slug/permalink page baru tersebut.

Mulai Menulis Kode

Buka file cf7-chained-select.php, kemudian tambahkan header file sebagai berikut:

Untuk lebih lengkap mengenai header file, Anda dapat membaca dokumentasi lengkapnya pada WordPress Codex https://codex.wordpress.org/File_Header.

Load Data Provinces

Buka kembali file cf7-chained-select.php, tambahkan filter hook & callback untuk mengisi select box pertama dengan data-data propinsi yang didapat dari tabel provinces.

wpcf7_form_tag adalah hook bawaan Contact Form 7. Untuk lebih lengkap hook-hook bawaan Contact Form 7 dapat dilihat pada url http://hookr.io/plugins/contact-form-7/4.7/hooks/.

$wpdb adalah objek global untuk akses database pada WordPress. Untuk lebih lengkapnya silahkan baca-baca pada url https://codex.wordpress.org/Class_Reference/wpdb.

Simpan file cf7-chanied-select.php tersebut, kemudian buka menu Plugins, aktifkan plugin yang baru kita buat tersebut. Selanjutnya buka halaman http(s)://[url-anda.tld]/cf7-administrative-data/ untuk memastikan data-data propinsi terisi dengan benar.

Menyiapkan Request untuk Data Administratif Lainnya

Buka kembali file cf7-chained-select.php, tambahkan action hook untuk menangani request Ajax.

Menyiapkan Javascript Handle

Masih pada file cf7-chained-select.php, tambahkan action hook untuk me-load javascript pada halaman cf7-administrative-data.

Simpan file cf7-chained-select.php, kemudian buka file chainedselect.js, tambahkan kode berikut:

Simpan file tersebut dan buka kembali halaman http(s)://[url-anda.tld]/cf7-administrative-data/ Anda untuk melihat hasil akhir "mini plugin" kita.

Lihat demonya disini.

Kesimpulan

Plugin yang barusan kita buat masih sangat sederhana dan perlu diperhatikan organisasi kodenya untuk pengembangan kedepan. Namun sangat cukup untuk memberikan pengalaman coding pada WordPress karena didalamnya terdapat poin-poin berikut :

  1. Dasar pembuatan plugin
  2. Action & filter hook
  3. Custom sql query
  4. Javascript/Jquery
  5. Ajax

Happy WordPressing.

5 1 vote
Article Rating
Subscribe
Notify of
guest
77 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jazuly
Jazuly
5 years ago

Bro buatkan tutorial popular post daily, weekly, monthly, dan sepanjang masa.
Jadi sistemnya count dr IP biar gx banyak insert data ke database.

Rohmat Noer Fajril
Rohmat Noer Fajril
5 years ago

Masih bingung, saya coba malah gk muncul daftar provinsi nya

ezzy
ezzy
5 years ago

nama table database sdh di ganti menjadi wp_provinces, wp_regencies, wp_districts sesuai nama table bawaan wordpress tapi ternyata yang berfungsi propinsinya azah bos sedangkan yang lainnya ga ada yang fungsi bos. Mohon bantuannya

ezzy
ezzy
5 years ago
Reply to  Yerie Piscesa

kalau nama nama propinsi sudah tampil semua, tapi untuk nama kota, kecamatan dan kelurahan tidak bisa tampil seperti propinsi, java script sesuai dengan petunjuk dari https://solusipress.wpmudev.host/menambahkan-combo-box-bertingkat-pada-contact-form-7/ barangkali ada revisi script. mohon di kirim ke email saya ezzydawuansela@gmail.com. Terima kasih

ezzy
ezzy
5 years ago
Reply to  Yerie Piscesa

sudah ketemu pak, permasalahannya setelah saya pelajari krn tidak adanya load java script untuk regency, district dan village, boleh saya minta ketiga load script tersebut?

ezzy
ezzy
5 years ago

Setelah saya cermati dan saya tambahkan ternyata, loadscriptnya yang full dan bisa aktif seperti ini bos: Izin share Bos: get_results( "select * from {$wpdb->prefix}provinces order by id asc", OBJECT ); foreach( $provinces as $province ) { $scanned_tag['raw_values'][] = $province->name; $scanned_tag['values'][] = $province->id; $scanned_tag['labels'][] = $province->name; } } return $scanned_tag; }; add_filter( 'wpcf7_form_tag', 'filter_wpcf7_load_provinces', 10, 2 ); function filter_wpcf7_load_regencies( $scanned_tag, $this_exec ) { if( $scanned_tag['name'] == 'regency') { global $wpdb; $regencies = $wpdb->get_results( "select * from {$wpdb->prefix}regencies order by id asc", OBJECT ); foreach( $regencies as $regency ) { $scanned_tag['raw_values'][] = $regency->name; $scanned_tag['values'][] = $regency->id; $scanned_tag['labels'][] = $regency->name; } } return… Read more »

ezzy
ezzy
5 years ago
Reply to  Yerie Piscesa

Nah itu dia pak salah satu permasalahannya data di regency dan district dan village muncul semua, oh ya pak satu hal lagi di dalam database indonesia,sql ada beberapa desa yang sama kode areanya sehingga tidak bisa terimport, dan banyak desa yang belum masuk ke dalam database sehingga akhirnya di revisi ulang deh untuk menambahkan desa ataupun kelurahan yang belum ada dan merubah kodenya juga agar desa ataupun kotanya bisa terimport semua

sandy
sandy
5 years ago

thanks atas scriptnya sudah coba diaplikasikan,

pertanyaan lain bagaimana yah jika data yang di email itu langsung nama sesuai labelnya bukan value yang berupa angka, karena yg terkirim ke email itu berupa ID value yang beruapa angka, sementara untuk memudahkan kita ingin manampilkan label provice, regency, district, village.

ezzy
ezzy
5 years ago
Reply to  Yerie Piscesa

Mohon maaf setelah saya tambahkan script pada trigger change di baris ke 38 ternyata muncul tanda seru, apakah ada kesalahan dalam penulisan script? mohon petunjuknya pak.
$( '#province_name' ).val( ( $(this).find( "option:selected" ).text() ) );
} );

ezzy
ezzy
5 years ago
Reply to  Yerie Piscesa

Okey pak terima kasih script tersebut :
di masukan dibaris 15
$( ‘#province_name’ ).val( ( $(this).find( “option:selected” ).text() ) );
} );
di masukan dibaris 22
$( '#regency_name' ).val( ( $(this).find( "option:selected" ).text() ) );
di masukan dibaris 33
$( '#district_name' ).val( ( $(this).find( "option:selected" ).text() ) );
di masukan dibaris 43
$( '#village_name' ).val( ( $(this).find( "option:selected" ).text() ) );

Dwi Bagus
Dwi Bagus
3 years ago
Reply to  ezzy

Kang ezzy
ini yang vilage name di baris 43 tapi value namanya ndak muncul

rio
rio
5 years ago

om prefik table aku wpo8_
dah aku rename 4 table barunya kok ngk keluar profinsinya
mohon prncerahan

rio
rio
5 years ago

saya sudah import juga rename 4table dimana prefiksaya wpo8_
php juga sudah saya bikin .
knp ya bos ngk muncul provinciesnya

Arasy
Arasy
5 years ago

Mas klo bikin field required gmn?
Soalnya NGK di is I jg bs ke kirim

Terimakasih

Arasy
Arasy
5 years ago

1.Mas bikin upload image crop form 7 tutorialnya
2.gimana tampilan database provinsi DLL ,ngk cuma I'd aja ma's
Susan bacanya
Teeima kasih

arasy
arasy
5 years ago

https://yeriepiscesa.com/wp-content/plugins/cf7-chained-select/chainedselect.js?ver=4.9.8

saya sudah ikutin yg .js ini
kenapa ya di hasil database selalu id nya
ngk tampil text nya / nama namanya ?

salah di mananya ya om

arasy
arasy
5 years ago

udah bisa om database nya .. keluar nama nama ( dah okay )
terimakasih clue2nya

Mas bikin upload image crop form 7 tutorialnya

arasy
arasy
5 years ago

mas bisa sampe kelurahan ngk ??

Ferri
Ferri
4 years ago

Selamat pagi pak,
bis kah ini dipakai bersamaan dengan form cf7 yang ke WhatsApp?

Kalau isa, mohon pencerahannya pak untuk memasukkan data nya ke pesan WA.

Terimakasih

fendi
fendi
3 years ago

selamat sore mas, saya sudh coba ikuti semua tutorial yg diatas, hanya bisa tampil utk pilihan provinsi, sedangkan pilihan yg lain tidak bisa. kenapa ya?

Fendi
Fendi
3 years ago
Reply to  Yerie Piscesa
Fendi
Fendi
3 years ago
Reply to  Fendi

mohon bantuannya ya mas, tutorialnya sangat membantu kami yang masih belajar ini

Fendi
Fendi
3 years ago
Reply to  Yerie Piscesa

gimna ya mas, cara memperbaikinya ?

Hajar Aswad
Hajar Aswad
3 years ago

Mas klo saya pengen habis pilih keluran muncul kode posnya yg sudah saya tambahkan di tabel villages gmna ?

Erik
Erik
3 years ago

Bro, saya coba tambahkan tabel kode pos, join sama tabel provinsi, tp gak tampil ya?
apa query nya ada yg salah?

if( isset( $_POST['postal'] ) ) {
$postal_id = $_POST['postal'];
$sql = $wpdb->prepare( "select * from {$wpdb->prefix}provinces inner join {$wpdb->prefix}postal_code on {$wpdb->prefix}provinces.id = {$wpdb->prefix}postal_code.province_id", $postal_id );
}

Erik
Erik
3 years ago
Reply to  Yerie Piscesa

ok bro, udh bisa. saya buat berdasarkan kelurahan biar yg muncul 1 kodepos aj untuk memudahkan user.

oh iya, nambah attr (selected) di option yg udh di pilih Gmn ya bro? saya cari2 blm nemu

Erik
Erik
3 years ago
Reply to  Erik

udh bisa bro.
var select = $(this).val();
$("option[value=" + select +"]").attr("selected","selected");

Dade
Dade
3 years ago

Mas Yerie, pada saat di plugin diaktifkan fatal error Parse error: syntax error, unexpected '<', expecting end of file in C:\xampp\htdocs\idplay\wp-content\plugins\cf7-chained-select\cf7-chained-select.php on line 8, kenapa ya mas? tks

Dade
Dade
3 years ago
Reply to  Yerie Piscesa

iya mas tksh, saya buta script hanya mengikuti tutorial di atas.. kode '<' ada pada <?php..trus gmn mas Yerie

Dade
Dade
3 years ago
Reply to  Yerie Piscesa

saya ngga pake code snippets mas, pure ngacu ke tutorial di atas

radeniyhu
radeniyhu
2 years ago

ada panduan berupa video pak, soalnya baru belajar wp

radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

saya coba buat berkali2 gagal, data provinsi hingga desa tidak muncul
apa salah dalam membuat file2 plugin nya ya ?

radeniyhu
radeniyhu
2 years ago
Reply to  radeniyhu

jika ada pluginnya yg sdh siap pasang, boleh pak dishare

radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

msh belum bisa muncul apapun, https://bisabayar.id/daftar/
ngikutin panduan yang ada

radeniyhu
radeniyhu
2 years ago
Reply to  radeniyhu

kira2 ada salahnya ndak ya pak ?, maklum msh belajar

Last edited 2 years ago by radeniyhu
radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

Sudah pak

WhatsApp Image 2021-06-12 at 2.49.06 PM.jpeg
radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

Alhamdulillah, tahapan memunculkan data2 sudah bisa pak, hanya saja pas kami test.
Yang masuk pada email kami itu selain dari data2 table tersebut. Jadi data provinsi dkk tidak ada pada email penerima

0F77D82E-7FB6-4DF8-AA0F-9C0304FA35F7.png
radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

Alhamdulillah, tahapan memunculkan data2 sudah bisa pak, hanya saja pas kami test.
Yang masuk pada email kami itu dari data provinsi dkk hnya nomor id saja, sdh mencoba cara yg ada dkolom komntar untuk menggunakan hiden trigger change msh gagal jga
Link full js yg dkomentar ndak bisa dbuka lagi

radeniyhu
radeniyhu
2 years ago
Reply to  Yerie Piscesa

Terima kasih banyak pak

Iyan
Iyan
2 years ago

Mas, bs ga dibuatkan videonya di youtube, agar bs lebih faham lagi cara pembuatannya, soalnya saya masih pemula, dan bingung cara membuatnya. terima kasih

Iyan
Iyan
2 years ago
Reply to  Yerie Piscesa

mas.."Kemudian impor data-data provinces, regencies, districts & villages ke database MySQL" ini kita masukkan melalui cpanel ya?

Iyan
Iyan
2 years ago
Reply to  Yerie Piscesa

mas..waktu sy ambil data di  https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia.  sy dpt file dlm bentuk .zip..apakah hanya file csv nya sj yg sy upload ke data base? krn sy upload dlm bentuk zip lgs, hasilnya ga ada file yg terupload. mohon pencerahannya mas.

Iyan
Iyan
2 years ago
Reply to  Iyan

dan hasilnya spt ini ketika sy upload villages.csv nya..solusinya kira2 bgm mas?

a.jpg
Ahmad
Ahmad
2 years ago

Tampilan di emailnya kenapa ID ya bukan valuenya??

Screenshot 2021-07-15 091942.png
Ahmad
Ahmad
1 year ago

Kenapa jika saya tidak memilih Provinsi & Kota, diemail muncul 0, gimana caranya tidak usah muncul 0, kosong aja gitu?
State: 0
City: 0

Ahmad
Ahmad
1 year ago

Kenapa jika saya tidak memilih Provinsi & Kota, diemail muncul 0, gimana caranya tidak usah muncul 0, kosong aja gitu?
State: 0
City: 0

Screenshot_1.png
envelope-otagscalendarwhatsapp
77
0
Would love your thoughts, please comment.x
()
x