Home / WordPress / Cara Merubah Tombol Submit Contact Form 7 Di WordPress

Cara Merubah Tombol Submit Contact Form 7 Di WordPress

Cara Merubah Tombol Submit Contact Form 7 Di WordPress – Tulisan ini lanjutan dari tulisan Begini Cara Membuat Form Kontak di WordPress. Dan tentunya untuk merubah tombol submit halaman kontak ini hanya berlaku bagi WordPress Self Hosting. Karena seperti yang sudah diketahui, WordPress.com (gratisan) pengguna tidak diberi keleluasaan untuk edit style.css.

Baca Juga : Cara Modifikasi Tampilan Halaman Error 404 Di WordPress

CMS WordPress.org secara default tidak menyediakan fasilitas untuk membuat form kontak seperti halnya WordPress.com. Tapi Anda bisa memanfa’atkan Plugin Contact Form 7 untuk memenuhi kebutuhan tersebut. Plugin Contact Form 7 ini sangat populer digunakan di beberapa web platform WordPress.org, dan sayapun sampai saat ini masih menggunakan Plugin Contact Form 7 yang dipasang dihalaman Kontak.

Cara-Merubah-Tombol-Submit-Contact-Form-7-Di-WordPress

Plugin Contact Form 7 selain bisa digunakan secara gratis, dan juga pengaturan konfigurasinya sangat mudah. Cuma sayangnya tombol submit Plugin Contact Form 7 secara default tampilannya tidak menarik.

Namun bagi Anda pengguna Plugin Contact Form 7 tidak perlu khawatir. Karena kita bisa merubah tombol submit Contact Form 7 sesuai dengan selera kita dengan menambahkan CSS didalamnya. Sehingga kepuasan Anda menggunakan Plugin Contact Form 7 menjadi maksimal, gratis, mudah, dan dapat diatur konfigurasinya sesuai dengan kemauan pengguna.

Berikut Cara Merubah Tombol Submit Contact Form 7 Di WordPress

Kode pemanggil untuk merubah tombol submit Contact Form 7 adalah sebagai berikut :

input.wpcf7-submit

Selanjutnya Anda tambahkan style untuk merubah tombol submit Contact Form 7 berdasarkan kode pemanggil diatas. Dan sebagai contoh, saya membuat style.css seperti ini :

/*-[ ContactForm7 ]-------------------*/
 input.wpcf7-submit {
 background:none repeat scroll 0% 0% #383D45;
 border-color: #0074A2;
 box-shadow: 0px 1px 0px rgba(120, 200, 230, 0.5) inset, 0px 1px 0px rgba(0, 0, 0, 0.15);
 border-style: solid;
 border-radius: 3px;
 border:1px;
 color:white;
 padding:5px;
 font-size: 14px;
 height: 32px;
 text-transform: uppercase;
 cursor:pointer;
 transition:all 0.2s linear 0s;
 }
 input.wpcf7-submit:hover{
 background:#0074a2;
 }

Silakan Anda modifikasi lagi sesuai kebutuhan. Tempatkan kode diatas di style.css tema yang Anda gunakan. Bisa melalui CPanel atau wp-admin Dashboard.

Agar lebih menarik lagi, modifikasi Tombol Submit Contact Form 7 Anda dengan background efek gradient.

Tambahan, Anda bisa juga melakukan modifikasi pada form input, textarea, dan select. Sebagai contoh, style.css yang saya gunakan adalah seperti ini :

/*-[ Form Input ]------------------*/
 input,textarea,select{
 padding:8px 12px;
 font-size:14px;
 color: #5E656D;
 border: 1px solid #c6dff1;
 background:#ffffff;
 }
 textarea{
 overflow:auto;
 resize:vertical;
 }
 select{
 padding:12px 20px;
 }
 input:hover,textarea:hover,
 input:focus,textarea:focus{
 border-color: #c6dff1;
 background:#f8ffff;
 }

Tempatkan juga kode diatas untuk merubah form input, textarea, dan select di style.css tema yang Anda gunakan. Bisa melalui CPanel atau wp-admin Dashboard.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

11 comments

  1. Wah saya belum bikin formulir kontak, tapi agak mals sih kalau pakai plugin. Ntar cari dulu caranya yang gak pakai plugin.

  2. Langsung praktek mas, soalnya saya baru aja membuat blog di wordpress :D

  3. Untuk masalah contact saya tidak menggunakan plugins Mas, dan lebih memilih menggunakan cara manual aja

  4. saya masih di wordpress.com jadi bisa praktek :mrgreen:

  5. mas, cara bikin modifikasi kode html yang contact form dan contact info bisa jadi satu halaman gimana ya ?

    • Bisa diperjelas lagi mas pertanyaannya? Contact Form adalah sebuah plugin dan biasanya kita tidak diperkenankan untuk merubah struktur kodenya.

Leave a Reply

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