Cara Menggayakan Bentuk Tingkatan 7 Hubungi di WordPress

Dengan lebih dari 1 juta pengguna aktif, Contact Form 7 adalah salah satu plugin borang hubungan paling popular untuk WordPress. Kelemahan terbesar mereka ialah bentuk di luar kotak yang anda tambahkan kelihatan sangat jelas. Syukurlah, Contact Form 7 dapat digayakan dengan mudah menggunakan CSS dalam tema WordPress anda. Dalam artikel ini, kami akan menunjukkan kepada anda cara menata bentuk borang borang 7 di WordPress.


Nota: Kami tidak mengesyorkan plugin Hubungi Form 7 lagi. Sebaliknya, kami mengesyorkan WPForms, yang merupakan pemalam borang hubungan yang paling mesra pemula. Anda juga boleh memuat turun WPForms Lite secara percuma.

Kami mempunyai panduan langkah demi langkah mengenai cara membuat borang hubungan di WordPress.

Tutorial Video

Langgan WPBeginner

Sekiranya anda tidak menyukai video atau memerlukan lebih banyak arahan, teruskan membaca.

Bermula

Kami mengandaikan bahawa anda telah memasang plugin Contact Form 7 dan telah membuat borang hubungan pertama anda. Langkah seterusnya adalah menyalin kod pendek untuk borang kenalan anda dan menampalnya di pos WordPress atau halaman di mana anda mahu borang anda muncul.

Demi artikel ini, kami telah menggunakan borang kenalan lalai dan menambahkannya ke halaman WordPress. Ini adalah bagaimana borang hubungan dilihat di laman web ujian kami.

Borang Kenalan Lalai 7 di laman WordPress menggunakan tema WordPress lalai

Seperti yang anda lihat bahawa borang kenalan mewarisi beberapa gaya bentuk dari tema WordPress anda. Selain itu, ia sangat asas.

Kami akan menggayakan borang Contact Form 7 menggunakan CSS. Semua CSS masuk ke dalam helaian gaya tema atau tema anak anda.

Styling Contact Form 7 Forms di WordPress

Borang Hubungi 7 menghasilkan kod yang sangat berguna dan standard untuk borang tersebut. Setiap elemen dalam borang mempunyai ID dan kelas CSS yang sesuai dengannya.

Setiap borang kenalan menggunakan kelas CSS .wpcf7 yang boleh anda gunakan untuk menggayakan borang anda.

Dalam contoh ini, kami menggunakan fon Google Lora di ruang input kami. Lihat cara menambahkan Fon Google di WordPress.

div.wpcf7 {
warna latar: #fbefde;
sempadan: 1px pepejal # f28f27;
pembalut: 20px;
}
.masukan wpcf7 [type ="teks"],
.masukan wpcf7 [type ="e-mel"],
.wpcf7 textarea {
latar belakang: # 725f4c;
warna: #FFF;
font-keluarga: lora, sans-serif;
gaya fon: miring;
}
.masukan wpcf7 [type ="serahkan"],
.masukan wpcf7 [type ="butang"] {
warna latar: # 725f4c;
lebar: 100%;
text-align: tengah;
text-transform: huruf besar;
}

Beginilah rupa borang hubungan kami setelah menerapkan CSS ini.

Menggayakan borang Contact Form 7 dengan CSS di WordPress

Menggayakan Bentuk Hubungan Berganda 7

Masalah dengan CSS yang kami gunakan di atas adalah bahawa ia akan diterapkan ke semua borang Contact Form 7 di laman web anda. Sekiranya anda menggunakan beberapa borang kenalan dan ingin menggayakannya dengan cara yang berbeza, maka anda perlu menggunakan ID yang dihasilkan oleh borang hubungan 7 untuk setiap borang.

Cukup buka halaman yang mengandungi borang yang ingin anda ubah. Arahkan tetikus anda ke medan pertama dalam bentuk, klik kanan dan pilih Inspect Element. Skrin penyemak imbas akan terbelah, dan anda akan melihat kod sumber halaman. Dalam kod sumber, anda perlu mencari baris permulaan kod borang.

Mencari ID elemen untuk borang kenalan anda

Seperti yang anda lihat dalam tangkapan skrin di atas, kod borang hubungan kami bermula dengan baris:

Atribut id adalah pengecam unik yang dihasilkan oleh Contact Form 7 untuk borang tertentu ini. Ini adalah gabungan id borang dan id pos di mana borang ini ditambahkan.

Kami akan menggunakan ID ini di CSS kami untuk menggayakan borang hubungan kami. Kami akan menggantikan .wpcf7 dalam coretan CSS pertama kami dengan # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
warna latar: #fbefde;
sempadan: 1px pepejal # f28f27;
pembalut: 20px;
}
masukan # wpcf7-f201-p203-o1 [type ="teks"],
masukan # wpcf7-f201-p203-o1 [type ="e-mel"],
# wpcf7-f201-p203-o1 teksarea {
latar belakang: # 725f4c;
warna: #FFF;
font-keluarga: lora, "Buka Sans", sans-serif;
gaya fon: miring;
}
masukan # wpcf7-f201-p203-o1 [type ="serahkan"],
masukan # wpcf7-f201-p203-o1 [type ="butang"] {
warna latar: # 725f4c;
lebar: 100%;
text-align: tengah;
text-transform: huruf besar;
}

Styling Contact Form 7 Forms dengan CSS Hero

Ramai pemula WordPress tidak mempunyai pengalaman menulis CSS, dan mereka tidak mahu menghabiskan masa untuk mempelajarinya. Nasib baik, ada penyelesaian hebat untuk pemula yang membolehkan anda tidak hanya menggayakan borang kenalan anda tetapi hampir setiap aspek di laman WordPress anda.

Cukup pasang dan aktifkan pemalam CSS Hero dan pergi ke halaman yang mengandungi borang anda. Klik pada bar alat CSS Hero dan kemudian klik pada elemen yang ingin anda gayakan. Wira CSS akan memberi anda antara muka pengguna yang mudah untuk mengedit CSS tanpa pernah menulis kod.

Styling Contact Form 7 Form Menggunakan CSS Hero

Lihat ulasan lengkap kami mengenai CSS Hero dan cara menggunakannya untuk menggayakan apa sahaja di laman WordPress anda. Anda boleh menggunakan kod kupon Wira CSS Pemula WP untuk mendapat potongan eksklusif 34%.

Itu sahaja yang kami harap artikel ini dapat membantu anda mempelajari cara menggayakan borang Form Form 7 di WordPress. Anda mungkin juga ingin melihat panduan kami mengenai cara menambahkan pop timbul borang kenalan di WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me