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 tambahkan kode seperti snippet dibawah ini

Baris kode yang ditambahkan adalah sebagai berikut:

  • Baris 6 dan 7
  • Baris 17 dan 18
  • Baris 29 s/d 40

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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

envelope-otagseditcalendarexternal-linksuitcasewhatsapp