Cara Merubah Desain Tombol Submit Contact Form7

Contact Form7

adalah plugin untuk membuat Formulir, plugin ini adalah salah satu plugin pembuat form yang paling populer dan salah satu yang saya gunakan di situs ini situs yang lain. Hal yang saya senangi dari plugin ini karena mudahnya custom dan pesan AJAX yang memberikan informasi kepada pengguna tanpa refresh halaman.

Saat menggunakan Contact Form7 anda pasti melihat tombol submit default dari contact form7 ini sangatlah tidak menarik, banyak sekali orang bingung bagaimana cara merubah desain Tombol atau button dari Contact Form7 ini, Pada artikel kali ini saya akan menunjukkan kepada anda cara merubah desain button contact form7, cukup copy code css dibawah ini kedalam file style.css theme WordPress yang anda gunakan.

Baca : Cara Install Contact Form7 WordPress

input.wpcf7-submit { background:#38B7EE ! important; border:1px; color:white ! important; font-weight: bold ! important; font-size: 12px ! important; border-radius: 2px; height: 32px ! important; text-transform:uppercase; behavior:url(border-radius.htc); -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; transition:all 0.2s linear 0s; cursor:pointer; } input.wpcf7-submit:hover{ background:#2a2a2a ! important; }

Class diatas diambil dari contact Form7 itu sendiri, karena css bawaan terdapat bersamaan plugins, jadi dengan solusi memasukkan code tersebut di file style.css maka setiap update baru contact form7 tidak akan mengalami perubahan seperti semula atau defaultnya lagi. Silahkan kreasikan desain tombol submit sesuai dengan keinginan anda. Lihat hasil perubahan button dibawah ini atau ke contact centerklik.

Baca : Membuat Formulir Konfirmasi Pembayaran dengan Contact Form7