Cara Menyesuaikan Gaya Formulir Kontak 7 Agar Sesuai dengan Situs Web Anda

Dengan lebih dari satu juta pemasangan aktif, Formulir Kontak 7 sejauh ini merupakan salah satu plugin WordPress paling populer yang pernah ada. Popularitasnya mungkin berkaitan dengan kebenaran di balik deskripsinya: “Sederhana tapi fleksibel.”

Formulir Kontak 7 memungkinkan Anda untuk membuat beberapa formulir kontak hanya menggunakan markup HTML sederhana (yang dihasilkannya untuk Anda). Setelah dibuat, setiap formulir dapat diterapkan dengan cepat dengan menempatkan kode pendek yang sesuai di tempat yang Anda inginkan untuk menampilkan formulir; di halaman, posting, atau area widget. Pesan yang dikirimkan melalui formulir dikirim ke alamat email yang disediakan dalam pengaturan plugin dan spam dilawan melalui dukungan untuk CAPTCHA dan Akismet.

Formulir Kontak 7 sangat sederhana sehingga tampaknya siapa pun dapat menggunakannya secara efektif. Styling juga, dimaksudkan untuk menjadi sederhana. Tapi mungkin terlalu sederhana untuk beberapa orang. Secara default, plugin Contact Form 7 tidak menata bentuknya. Gaya apa pun yang mereka miliki adalah hasil dari gaya default yang ada di lembar gaya tema WordPress.

Biasanya menghasilkan sesuatu yang cukup mendasar, seperti ini:

Sayangnya, bentuk seperti ini, meskipun sederhana dan fleksibel, mungkin tidak didesain seindah elemen lain di situs web seseorang. Meninggalkan banyak pengguna yang senang mencari alternatif untuk Formulir Kontak 7 dengan lebih banyak opsi gaya. Untungnya, hanya dengan sedikit CSS, tidak diperlukan alternatif plugin.

Dalam posting hari ini saya akan membagikan serangkaian tip yang akan membuka berbagai kemungkinan penataan Formulir Kontak 7 untuk siapa saja, menggunakan tema apa pun.

Cara Menyesuaikan Gaya Formulir Kontak 7 Agar Sesuai dengan Situs Web Anda

Berlangganan Saluran Youtube Kami

Di mana Mengedit Formulir Kontak Anda 7 CSS (dan Mengapa)

Penting bahwa saat menambahkan CSS khusus, Anda tidak menambahkannya ke lembar gaya Formulir Kontak 7 atau tema induk Anda. Setiap perubahan atau penambahan yang Anda buat di sana akan ditimpa segera setelah tema dan/atau plugin diperbarui.

Sebagai gantinya, Anda ingin menambahkan CSS di bawah ini ke CSS tema anak Anda. Anda juga dapat menggunakan fitur CSS khusus di Jetpack, atau jika tema Anda menyediakan bagian di panel adminnya untuk CSS khusus, Anda juga dapat menggunakannya.

Ok, sekarang kita tahu di mana menempatkan gaya yang akan kita bahas di bawah, mari kita mulai!

Cara Membuat Gaya Formulir Lebar Situs

Mari kita mulai dengan membuat beberapa pengeditan umum yang akan diterapkan pada keseluruhan formulir. Kita dapat melakukan ini dengan menggunakan pemilih kelas .wpcf7 dan kemudian menambahkan gaya di bawahnya.

(Saya juga sangat menyarankan agar Anda menempatkan judul komentar yang saya tulis di bawah ini dalam lembar gaya Anda untuk menunjukkan di mana gaya Formulir Kontak 7 Anda dimulai.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Setelah menambahkan kode di atas ke lembar gaya Anda, setiap formulir yang Anda buat dengan Formulir Kontak 7 akan memiliki latar belakang dan gaya batas yang baru saja Anda tentukan. Di bawah ini adalah contoh.

Seperti yang Anda lihat, ada beberapa masalah jarak. Untuk memperbaikinya, Anda ingin menyesuaikan margin antara batas dan elemen formulir bagian dalam. Anda dapat melakukannya dengan kode di bawah ini.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Di situs pengujian saya, ini menghasilkan yang berikut:

Catatan: gaya ini dapat memengaruhi formulir Anda dengan cara yang sedikit berbeda karena fakta bahwa kami kemungkinan besar bekerja dengan tema yang berbeda. Itu tidak berarti bahwa kode ini tidak akan bekerja untuk Anda, hanya saja Anda mungkin harus sedikit mengubah angka untuk mendapatkan hal yang tepat untuk situs Anda.

Cara Membuat Gaya Bidang Bentuk Luas Situs

Salah satu permintaan paling umum yang dimiliki orang-orang dalam hal menata Formulir Kontak 7 adalah bagaimana mereka dapat menyesuaikan lebar bidang. Terutama area pesan yang tidak terlalu jauh.

Kode di bawah ini akan memperluas area pesan ke lebar yang Anda inginkan (bila disesuaikan). Saya telah menetapkan milik saya dalam contoh untuk 95% karena itulah yang tampak paling baik dalam kasus penggunaan yang saya bayangkan. Anda juga dapat mengaturnya agar sesuai dengan kebutuhan Anda–menggunakan persentase atau jumlah piksel tetap.

.wpcf7-textarea {

width: 85%;

}

Anda juga dapat menyesuaikan lebar bidang lain dengan menyesuaikan pemilih kelas input .

.wpcf7 input {

width: 50%;

}

Jika Anda tidak ingin menyesuaikan semua bidang masukan dengan kriteria yang sama, Anda dapat menelusuri sedikit dengan memilih hanya bidang yang Anda minati. Dalam contoh di bawah ini saya memilih untuk hanya mengubah bidang teks saya sehingga tombol kirim saya juga tidak terpengaruh.

.wpcf7-text {
width: 50%;
}

Setelah semua perubahan di atas, saya dapat menata formulir yang Anda lihat di bawah.

Saya pribadi tidak ingin mengubah warna tombol saya, tetapi saya pikir itu kemungkinan besar keinginan umum lainnya. Jadi jika Anda ingin mengubah warna tombol Anda, Anda dapat menggunakan CSS di bawah ini untuk bereksperimen.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Dengan bit CSS ini, setiap formulir yang dibuat dengan Formulir Kontak 7 akan terlihat seperti gambar akhir di atas. Tapi apa yang terjadi ketika Anda ingin satu bentuk tertentu terlihat berbeda dari yang lain?

Cara Menata Bentuk Tertentu

Mendapatkan ID CSS khusus yang diperlukan untuk membuat pengeditan gaya ke formulir tertentu bisa sedikit merepotkan, tetapi mungkin dengan sedikit mengutak-atik.

Hal pertama yang ingin Anda lakukan adalah menambahkan kode pendek formulir ke situs Anda dan mempratinjaunya. (Anda akan melihat bahwa di dalam kode pendek itu ada nomor untuk ID–tetapi itu sebenarnya bukan ID lengkap yang Anda perlukan.)

Kemudian, menggunakan fitur elemen inspeksi Google Chrome atau yang serupa di browser lain, lihat kode untuk formulir. Dengan menggunakan ini, Anda akan menemukan ID formulir lengkap.

Dalam kasus saya, nomor ID dalam kode pendek saya adalah 4407 . ID lengkapnya ternyata wpcf7-f4407-p4405-o1 . Yang berarti saya dapat melakukan pengeditan lebih lanjut, hanya untuk formulir khusus itu, dengan menggunakan kode di bawah ini dengan berbagai kriteria yang berbeda dari pengaturan seluruh situs saya.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Cara Menata Bidang Tertentu

Anda dapat melakukan hal yang sama dengan bidang tertentu. Alih-alih melacak kelas atau ID CSS tertentu di browser Anda, yang harus Anda lakukan adalah menambahkannya di pembuat formulir.

Saat Anda membuat tag untuk ditempatkan di pembuat formulir, Anda akan melihat bahwa ada dua opsi untuk membuat ID, Kelas, atau keduanya.

Dalam contoh ini saya memilih untuk membuat kelas yang disebut bidang khusus . Jika Anda melakukan hal yang sama (atau yang serupa), Anda akan dapat menata bidang itu saja menggunakan id (atau kelas) baru Anda seperti yang saya miliki di bawah ini.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Cara Membuat Tata Letak Formulir Kustom untuk Kotak Centang dan Tombol Radial

Secara default, kotak centang dan radius ditampilkan dari kiri ke kanan.

Tetapi karena preferensi pribadi atau kasus penggunaan tertentu di mana menampilkannya dari atas ke bawah mungkin lebih disukai, Anda dapat menggunakan salah satu dari dua opsi di bawah ini.

Untuk menampilkan kotak centang atau tombol radial dari atas ke bawah dan di kiri, gunakan ini.

.wpcf7-list-item {
display: block;
}

Untuk menampilkan kotak centang dan tombol radial dari atas ke bawah dan di kanan, gunakan ini. Pastikan juga bahwa ketika Anda membuat tag untuk opsi ini, Anda memilih kotak centang "label dulu".

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Kiat Bonus: Cara Menghapus Judul Bidang & Menggunakan Teks Placeholder Sebagai gantinya

Tip ini tidak memerlukan penggunaan CSS seperti yang lainnya di atas, melainkan tweak sederhana pada markup yang digunakan dalam pembuat formulir Contact Form 7.

Terkadang tidak perlu memiliki judul bidang, terutama bila Anda dapat menempatkan teks placeholder di dalam bidang itu sendiri yang menjelaskan informasi apa yang ada di sana.

Jika itu yang terjadi di situs Anda, maka yang harus Anda lakukan hanyalah menghapus judul di pembuat formulir dan menambahkan teks pengganti seperti yang telah saya lakukan pada contoh di bawah ini.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Hasilnya adalah bentuk yang lebih bersih dengan lebih sedikit kekacauan.

Kesimpulannya

Saya harap saya telah menunjukkan dalam contoh di atas bahwa plugin Contact Form 7 sangat dapat disesuaikan. Benar, itu memang membutuhkan sedikit mengutak-atik tetapi untuk plugin gratis yang mungkin diharapkan.

Saya pikir kurangnya opsi gaya secara default adalah bagian besar mengapa plugin bekerja dengan sangat baik untuk banyak orang. Jadi wajar saja jika siapa pun yang mendapatkan banyak nilai darinya yang menginginkan lebih banyak gaya untuk berkomitmen beberapa menit untuk memasukkan versi salah satu contoh kode di atas.

Apakah Anda memiliki tip gaya Formulir Kontak 7 Anda sendiri? Adakah favorit yang Anda gunakan yang ingin Anda bagikan? Beri kami garis di komentar di bawah!

Artikel Thumbnail melalui Dmitry Lemon5ky // shutterstock.com