Cara menata formulir di Contact Form 7 menggunakan CSS di WordPress
Ingin formulir WordPress Anda terlihat setajam bagian lain dari situs Anda? Dengan Contact Form 7, Anda memiliki kendali penuh atas tampilan formulir menggunakan CSS. Panduan ini akan memandu Anda langkah demi langkah dalam menata formulir Contact Form 7, sehingga Anda dapat menciptakan pengalaman yang mulus dan sesuai merek untuk pengunjung Anda.
Mengapa menata formulir Contact Form 7?
Contact Form 7 adalah salah satu plugin WordPress paling populer untuk membuat formulir—tetapi tampilannya secara default sangat sederhana. Penataan kustom pada tema WordPress klasik memungkinkan Anda:
Sesuaikan dengan branding situs Anda
Tingkatkan kegunaan dan aksesibilitas
Buat formulir lebih menarik dan profesional
Langkah 1: Identifikasi selektor CSS formulir Anda
Sebelum mulai menata, Anda perlu mengetahui selektor CSS mana yang menargetkan elemen formulir Anda.
Setiap formulir Contact Form 7 dibungkus dalam kelas unik: .wpcf7
Elemen individual seperti bidang input, textarea, dan tombol submit menggunakan tag HTML standar
Langkah 2: Tambahkan CSS kustom ke situs WordPress Anda
Anda dapat menambahkan CSS dengan dua cara utama:
Melalui Customizer:
Buka Tampilan > Sesuaikan > CSS Tambahan dan tempelkan gaya Anda.
CATATAN: Tambahkan CSS Anda ke file style.css tema anak Anda untuk kustomisasi yang lebih lanjut.
Langkah 3: Tulis CSS kustom Anda
Berikut beberapa contoh umum untuk memulai, menggunakan komponen formulir “text” dan “submit” sebagai contoh:
Menata semua formulir Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-class dalam CSS, seperti :hover, memungkinkan Anda menata elemen berdasarkan keadaan atau interaksi pengguna. Misalnya, pseudo-class :hover menerapkan gaya saat pengguna mengarahkan pointer mouse ke tombol atau bidang. Ini sering digunakan untuk menyorot tombol atau mengubah warnanya saat diarahkan, sehingga formulir Anda lebih interaktif dan menarik secara visual. Pseudo-class lain yang berguna termasuk :focus (saat input dipilih) dan :active (saat elemen diklik). Menggunakan pseudo-class membantu meningkatkan pengalaman pengguna dengan memberikan umpan balik langsung saat pengunjung berinteraksi dengan formulir Anda.
Targetkan formulir tertentu
Setiap formulir memiliki ID unik, seperti #wpcf7-f123-o1. Gunakan ini untuk menata hanya formulir tersebut:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Ganti f123-o1 dengan ID formulir Anda yang sebenarnya. Anda dapat menemukan ID unik formulir Anda dengan melihat halaman tempat formulir Contact Form 7 Anda disematkan, klik kanan pada formulir, dan pilih “Inspect” (atau “Inspect Element”) di browser Anda. Cari <div> dengan kelas .wpcf7—ID akan muncul seperti id="wpcf7-f123-o1" di kode HTML. Gunakan ID ini di selektor CSS Anda untuk menargetkan hanya formulir tertentu tersebut.
Langkah 4: Gunakan kelas bawaan Contact Form 7
Contact Form 7 secara otomatis menambahkan kelas ke elemen, sehingga penargetan menjadi lebih mudah. Contohnya:
.wpcf7-form-control – Semua kontrol formulir
.wpcf7-submit – Tombol submit
Anda juga dapat menambahkan kelas sendiri di editor formulir untuk kontrol yang lebih lanjut.
Contoh
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Langkah 5: Pratinjau dan sesuaikan
Setelah menyimpan CSS Anda, segarkan situs Anda untuk melihat perubahannya. Gunakan alat inspector browser Anda untuk menyesuaikan gaya secara real time sebelum menyalinnya ke situs Anda. Pastikan untuk menghapus cache situs web Anda setelah melakukan perubahan agar pembaruan terlihat oleh pengunjung.
Berikut contoh sebelum dan sesudah dari sebuah formulir di situs demo, di mana kami menggunakan kode CSS dari Langkah 3 untuk membuat kotak di sekitar setiap bidang formulir menjadi biru.
Tips cepat untuk penataan formulir yang lebih baik
Pastikan aksesibilitas: Pastikan kontras warna yang baik dan ukuran font yang mudah dibaca
Gunakan spasi: Tambahkan padding dan margin untuk tampilan yang bersih dan tidak berantakan
Sorot kesalahan: Tata pesan kesalahan dengan warna yang jelas (seperti merah) untuk membantu pengguna memperbaiki kesalahan
Uji di perangkat seluler: Pastikan formulir Anda terlihat bagus di semua perangkat
Pemecahan masalah
Jika gaya Anda tidak muncul, coba langkah-langkah berikut:
Bersihkan cache browser dan situs Anda – Terkadang file cache mencegah CSS baru ditampilkan. Jika Anda menggunakan plugin cache atau hosting terkelola, bersihkan cache tersebut juga.
Periksa masalah spesifisitas CSS – Jika gaya Anda tidak diterapkan, coba buat selektor Anda lebih spesifik untuk menimpa gaya yang sudah ada.
Pastikan Anda mengedit file atau bagian CSS yang benar – Periksa kembali bahwa Anda menambahkan kode di tempat yang benar, seperti panel CSS Tambahan, style.css tema anak Anda, atau plugin CSS kustom.
Tinjau kelas CSS untuk kesalahan pengetikan atau error – Cari nama kelas yang salah ketik, spasi yang tidak perlu, atau penggunaan kelas yang salah. Juga, pastikan kelas yang Anda targetkan benar-benar ada di HTML formulir Anda.
Periksa kelas yang duplikat atau bertabrakan – Pastikan kelas yang Anda gunakan tidak sudah diterapkan di tempat lain dengan gaya berbeda yang mungkin menimpa perubahan Anda.
Ikuti praktik terbaik umum – Gunakan penamaan kelas yang jelas dan konsisten, akhiri setiap aturan CSS dengan titik koma, dan selalu tutup blok kode dengan kurung kurawal (}).
Meninjau kode Anda dengan cermat untuk masalah umum ini akan membantu memastikan gaya kustom Anda muncul dengan benar di situs Anda.
Contoh: CSS kustom lengkap untuk formulir Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Berikut adalah contoh formulir yang ditata dengan kode CSS di atas. Kode CSS ini menyesuaikan tampilan beberapa elemen utama di formulir Contact Form 7 Anda. Kode ini menargetkan semua bidang teks, bidang email, dan textarea, memberikan mereka border abu-abu muda, sudut membulat, padding yang nyaman, dan lebar konsisten untuk tampilan yang bersih dan modern.
Kode ini juga menata tombol submit dengan latar belakang hijau, teks putih, tepi membulat, dan font tebal yang mudah dibaca. Saat pengguna mengarahkan mouse ke tombol submit, warna latar belakang menjadi hijau yang lebih gelap, memberikan umpan balik interaktif.
Menambahkan CSS: tema klasik vs tema blok
Langkah-langkah dalam panduan ini untuk menata formulir Contact Form 7 dengan CSS dirancang untuk Tema Klasik di WordPress. Tema Klasik, seperti Astra yang populer, menggunakan Customizer, di mana Anda dapat dengan mudah menambahkan CSS kustom di bagian “CSS Tambahan”. Ini membuat penataan formulir Anda menjadi mudah dan perubahan dapat langsung dilihat.
Namun, jika situs Anda menggunakan Tema Blok (kadang disebut Tema Full Site Editing atau FSE), prosesnya berbeda. Tema Blok tidak selalu menyertakan Customizer atau bidang “CSS Tambahan” secara default. Sebagai gantinya, Anda menggunakan Site Editor untuk melakukan perubahan desain. Meskipun Anda dapat menyesuaikan gaya global untuk warna, tipografi, dan tata letak, menambahkan CSS kustom secara sembarangan tidak selalu tersedia di UI.
Apa yang harus dilakukan jika Anda menggunakan Tema Blok
Buka dasbor WordPress Anda dan pergi ke Tampilan > Editor (Site Editor).
Di Site Editor, cari panel Styles (ikon lingkaran setengah berbayang).
Beberapa Tema Blok sekarang menawarkan opsi “CSS Tambahan” di panel Styles, tetapi ini tergantung pada tema dan versi WordPress Anda.
Jika Anda tidak melihat opsi untuk menambahkan CSS kustom, Anda dapat menggunakan plugin seperti WPCode untuk menambahkan CSS kustom ke seluruh situs. WPCode ramah pemula dan bekerja dengan tema apa pun, memastikan Anda tetap dapat menata formulir meskipun tema Anda tidak mendukung pengeditan CSS langsung di UI. Perlu diketahui bahwa menginstal plugin ini dapat memengaruhi gaya formulir lain yang sudah ada di situs web Anda.
Sumber daya tambahan
Menata formulir Contact Form 7 Anda adalah cara sederhana namun kuat untuk meningkatkan pengalaman pengguna situs Anda. Hanya dengan beberapa baris CSS, Anda dapat membuat formulir Anda terlihat dan terasa seperti bagian alami dari merek Anda.