Custom Form untuk Berbagai Kebutuhan

Form (atau formulir) adalah suatu cara agar visitor dapat memberikan input atau berinteraksi melalaui website Anda. Di WordPress kita dapat membangun custom form untuk kebutuhan spesifik dengan membuat plugin sendiri.

Memulai dari yang Sederhana

Kali ini saya akan menunjukan cara untuk membangun plugin yang dapat menerima input dari pengunjung melalui form, kemudian ketika disubmit akan mengirimkan email ke administrator website, seperti pada plugin contact form pada umumnya.

Untuk menambah library pihak ketiga Anda perlu memasang Composer

Buat direktori(folder) baru pada wp-content/plugins dengan nama custom-form, kemudian buat juga direktori baru dibawah custom-form dengan nama assets & views. Silahkan lihat struktur dibawah ini untuk lebih jelas.

root_wp
--- wp-content
------ plugins
--------- custom-form
------------ assets
------------ views

Buka terminal (atau cmd atau shell), kemudian masuk ke direktori custom-form.

cd wp-content/plugins/custom-form

Kita membutuhkan library Formidable untuk memudahkan dalam manipulasi form. Silahkan install melalui composer dengan perintah berikut.

composer require gregwar/formidable

Menambahkan Library Javascript

Skenario form ini menggunakan ajax untuk mengirim formulir yang dikirimkan pengunjung, untuk menunjukan adanya proses ketika Ajax Request kita butuh plugin jquery loading. Silahkan download dan copy ke direktori assets/.

Menulis Plugin

Buat file dengan nama custom-form.php pada direktori custom-form/. Tambahkan informasi plugin dan starter code seperti dibawah ini.

Pada direktori views, tambahkan file contact-form.php untuk membuat form dan menentukan field-fieldnya. Anda dapat menambahkan atau memodifikasi strukturnya sesuai kebutuhan.

Siapkan 2 file kosong (kita akan menulisnya nanti) pada direktori assets, beri nama contact-form.js (file javascript) dan contact-form.css (file css). Kemudian pada file custom-form.php (file utama) tambahkan script untuk meregistrasi file js & css.

Menulis Custom Shortcode untuk Menampilkan Form

Masih pada file custom-form.php, tambahkan script untuk menampilkan form dalam bentuk shortcode dan memproses hasilnya melalui Ajax Request.

Pada method handle diatas, sebenarnya Anda dapat menuliskan proses apapun, misal menyimpan data ke dalam table di database atau proses perhitungan.

Silahkan pelajari fungsi-fungsi yang tersedia pada Formidable jika Anda perlu menambahkan proses-proses lain.

Menulis Kode JS & CSS

Buka file assets/contact-form.js yang sudah dibuat sebelumnya, isi dengan script untuk mengirim data form menggunakan ajax request.

Tambahkan juga styling pada file assets/contact-form.css, berikut adalah contoh yang bisa diterapkan.

Silahkan tambahkan styling-styling lain untuk lebih mempercantik tampilan form Anda.

Uji Coba Plugin

Cek halaman plugin, kemudian aktifkan. Lalu buat page baru dan tambahkan shortcode [ sp_contact_form ] seperti pada contoh dibawah ini.

Uji coba hasilnya disini https://solusipress.com/demo/test-custom-form/

Happy Coding 🙂

0 0 votes
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
DioS
DioS
4 years ago

Selamat malam bang Yerie... Saya salah satu pembaca setia blog abang solusipress.com. Banyak tutorial abang yang sudah saya terapkan dan works semua.. sekalian mau ucap terima kasih nii bang.. Saya juga pengguna setia oxygen plugin dan generate press theme bang, lisensi ori bang ya, bukan nulled hehehe. Mau curhat sedikit bang, kemarin saya dapat dapat proyek wp untuk klinik dokter gigi didaerah saya.. fitur request klinik nya form pasien dengan nomor antrian (auto-generated). Awalnya saya pake CF7 tapi krna mereka mau ada printout dan pdf file jadi banting setir ke WP Forms. Terus ikuti https://wordpress.org/support/topic/can-i-show-entry-submission-id-on-the-form/ untuk buat nomor antrian nya.… Read more »

DioS
DioS
4 years ago
Reply to  Yerie Piscesa

Terima kasih bang. Siap diterapkan.

envelope-otagscalendarwhatsapp
3
0
Would love your thoughts, please comment.x
()
x