Menambahkan Number Spinner pada Forminator

Bagi pengguna plugin Forminator yang ingin menambahkan spinner pada field number dengan tanda plus (+) dan minus (-) untuk menaikan/menurunkan nilai silahkan lanjutkan membaca artikel ini.

Artikel ini adalah kelanjutan dari tutorial sebelumnya, silahkan baca terlebih dahulu sebelum melanjutkan.

Mendapatkan Script Spinner

Sebagai developer yang berorientasi pada bisnis, saya selalu memanfaatkan dari kode-kode open source yang sudah tersedia di internet, untuk spinner ini saya memperoleh script dasar dari halaman https://embed.plnkr.co/B5waxZ/.

Dalam contoh script diatas, buka file style.css dan script.js, copy masing-masing script, kemudian paste ke css code dan js code yang bisa Anda buat menggunakan plugin Simple Custom CSS and JS, seperti pada gambar dibawah ini.

Copy dan paste-kan style.css pada CSS Code

Atur options seperti pada gambar di atas, untuk kode css, tidak perlu di-deactivate.

Copy dan paste-kan script.js pada JS Code

Atur juga options seperti gambar diatas, setelah publish, jangan lupa untuk deactivate.

Menambahkan Spinner ke Field Number

Buka kembali code snippet yang telah Anda buat pada tutorial sebelumnya, kemudian atur ulang kode seperti terlihat pada snippet dibawah ini

Cek hasil akhir dari script pada halaman ini.

Kesimpulan

Sebagai pemain baru dalam plugin form, Forminator sangat menjanjikan dalam hal fitur-fitur rasa premium namun dengan harga sangat murah (baca: gratis). Diharapkan fitur seperti number spinner dan format angka dapat dijadikan core function pada versi-versi selanjutnya, sehingga memudahkan pengguna khususnya non developer.

Happy WordPressing 🙂

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

Mantab ini pak. Mohon dibantu untuk contact form 7 juga dong.. please..

Kompi
Kompi
3 years ago

Thanks atas ilmunya, mohon dibantu btw kenapa susunan spinner nya vertikal yah bukan horizontal
[-]
[nilai]
[+]

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