Rabu, 11 Desember 2024

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 …

About Info Menarik

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

13 comments

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

    • InfoMenarik

      Sipa mas, nanti saya coba oprek-oprek kode untuk membuat kontak tanpa plugin …

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

    • InfoMenarik

      Masa sih mas, ah yg benar … ? :D

    • Pakai wordpress.com atau wordpress.org, beda loh.. :D

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

    • InfoMenarik

      Wah boleh bagi-bagi ilmunya mas cara membuat form kontak tanpa plugin … ?

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

    • InfoMenarik

      Ok mas, langsung dipraktekkan saja jika memang diperlukan …

  5. fajar

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

    • InfoMenarik

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

  6. Sayangnya tampilan keseluruahn kotak kaku, coba bisa sedikit lebih fleksibel, tapi untuk tampilan kontak form yang menarik memang berbayar dan kalau gratis juga terbatas. jadi ya buat yang kantongnya terbatas mending pakai form 7 ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *