Cara Mengubah Style Tombol Submit Plugin Contact Form 7 di WordPress

Info Menarik – Artikel ini adalah lanjutan dari artikel cara membuat form kontak di WordPress. Jika Kamu tidak menyukai tampilan tombol submit pada plugin Contact Form 7, sebetulnya kita masih bisa mengubahnya. Kemudian jika Kamu tidak tahu bagaimana caranya, pada artikel ini saya akan membagikan kode untuk mengubah style tombol submit tersebut.

Kemudian bukan hanya style tombol submit saja yang dapat kita ubah, untuk bagian lainnya seperti form Nama, Email, dan Textarea juga bisa kita ubah. Untuk mengubahnya cukup menambahkan kode css sesuai dengan selektor tag yang digunakan oleh plugin Contact Form 7.

Tutorial ini hanya untuk pengguna WordPress.org saja. Artinya ini hanya untuk pengguna WordPress Self Hosted atau platform WordPress yang kita install di hosting sendiri. Karena jika kita menggunakan WordPress pada domain dan hosting sendiri lebih bebas bereksperimen. Kita dapat mengubah seluruh struktur kode WordPress seperti HTML, CSS, PHP, dan Javascript.

Berbeda dengan platform WordPress.com atau website yang masing menumpang pada domain dan hosting WordPress versi gratisan. Pada platform ini pengguna tidak diperbolehkan untuk mengedit atau melakukan perubahan pada struktur kode seperti di WordPress hosting sendiri. Pengguna hanya bisa memasang kode HTML dan itupun hanya bisa kita pasang pada Widget Blog.

Berikut Cara Mengubah Style Tombol Submit Contact Form 7

1. Mengubah Style Tombol Submit

Style tombol submit dan form-form pada plugin Contact Form 7 secara default akan mengikuti pada style tema yang kita gunakan. Jika kita ingin membuat tampilan pada plugin Contact Form 7, silakan ikuti tutorial berikut.

Sebelum mengubah style atau tampilan pada plugin kontak ini, silakan Kamu pahami dulu selektor tag yang digunakan plugin. Untuk selektor tag tombol submit Contact Form 7 adalah:

input.wpcf7-submit

Jika sudah mengetahui selektor tag untuk memanggil tombol submit, selanjutnya kita tinggal menambahkan kode css untuk mengubah tampilannya. Contoh, Kamu bisa menggunakan kode seperti berikut ini:

input.wpcf7-submit {
background:none repeat scroll 0% 0% #383D45;
border-style: solid;
border-radius: 3px;
border:1px;
color:white;
padding: 0 20px;
font-size: 14px;
height: 32px;
text-transform: uppercase;
cursor:pointer;
transition:all 0.2s linear 0s;
}
input.wpcf7-submit:hover {
background:#0074a2;
}

Silakan Kamu tambahkan kode css di atas pada style.css tema yang Kamu gunakan. Namun saya sarankan agar Kamu menambahkan kode css pada menu Tampilan kemudian sub-menu Sesuaikan. Nanti Kamu tempatkan kode css pada Kustomisasi CSS Tambahan. Hal ini agar ketika kita update tema maka kode css tersebut tidak akan ke reset.

2. Mengubah Style Form

Selanjutnya jika kita ingin mengubah juga tampilan pada form nama, email, dan textarea silakan gunakan kode css yang akan saya berikan di bawah ini.

Selektor tag untuk memanggil form pada plugin Contact Form 7 adalah sebagai berikut:

Form nama dan email

input.wpcf7-text

Form textarea

textarea.wpcf7-textarea

Contoh, Kamu bisa menambahkan kode css berikut:

input.wpcf7-text,
textarea.wpcf7-textarea {
padding:10px;
width: 50%;
font-size:14px;
color: #5E656D;
border: 1px solid #c6dff1;
background:#ffffff;
}
input.wpcf7-text:hover,
textarea.wpcf7-textarea:hover {
border-color: #c6dff1;
background:#f8ffff;
}
input.wpcf7-text:focus,
textarea.wpcf7-textarea:focus {
outline: none;
box-shadow: 0 0 5px #b1ddfc;
}

Baca Juga: Cara Membuat Halaman Error 404 di WordPress Lengkap Dengan Kode Daftar Isi

Selamat mencoba dan semoga artikel ini bermanfaat …