Cara Mengubah Gaya Formulir Kontak WordPress

Ingin mengubah gaya formulir kontak WordPress Anda? Maka panduan ini untuk Anda! Anda akan belajar bagaimana gaya formulir WordPress bisa sangat mudah! Temukan lebih banyak lagi.

Perkiraan waktu membaca : 6 menit

Anda hanya memiliki satu kesempatan untuk membuat kesan pertama.

Dan menarik perhatian pengunjung Anda dengan bentuk yang indah adalah cara untuk membuat kesan yang luar biasa .

Ini juga cara sempurna untuk membuat mereka mengisi formulir Anda. Lagi pula, bagaimana mereka bisa mengisinya jika mereka tidak melihatnya?

Jadi, jika Anda siap untuk beralih dari yang sederhana menjadi cantik dengan formulir Anda, panduan ini cocok untuk Anda.

Kami akan menunjukkan kepada Anda dua cara untuk mengubah gaya formulir kontak WordPress Anda dengan mudah!

Mari kita masuk ke dalamnya.

Cara mengubah gaya formulir kontak WordPress Anda

Seperti yang kami sebutkan, ada dua cara untuk menyesuaikan gaya formulir Anda

Yang mana yang Anda pilih akan bergantung pada tingkat kenyamanan Anda dengan pengkodean. Tetapi kami akan menunjukkan kepada Anda kedua metode tersebut, sehingga Anda mengetahui semua opsi yang tersedia.

Metode 1: Edit kode formulir Anda di WordPress

Jadi, Anda ingin terjun lebih dulu ke perairan coding, ya?

Kami menganggap Anda sudah memiliki formulir yang dibuat dan ingin menyesuaikannya. Jika Anda tidak memiliki formulir, buka panduan kami tentang cara membuat formulir untuk memulai.

Langkah 1: Dapatkan ID atau kelas formulir Anda

Untuk memulai, Anda perlu mendapatkan ID atau Kelas formulir Anda.

Cara mudah untuk melakukannya adalah dengan membuka situs web Anda, mengklik kanan formulir Anda, dan mengklik Periksa . Di sini, kita akan melihat template form HTML di dalam tema anak Anda.

Bilah samping Alat Pengembang Google akan meluncur keluar, dan Anda dapat melihat bagian kode yang berbeda untuk formulir Anda.

Yang paling penting adalah menemukan area yang ingin Anda sesuaikan dan melacak ID atau nama Kelas . Anda akan menggunakan ini untuk membuat perubahan.

Misalnya, jika kami ingin mengubah warna latar belakang Templat formulir Hubungi Kami, kami akan menemukan potongan kode terluar. Dalam hal ini, ini adalah div dengan kelas api-form-box .

Kami bahkan dapat menguji tampilannya dari konsol ini.

Jika kita mengklik kanan div dan mengklik Add Attribute , kita dapat menambahkan gaya warna latar belakang.

Tekan Enter, dan perubahan segera ditampilkan di jendela.

Tapi jangan khawatir. Setiap kali Anda me-refresh halaman, formulir akan kembali normal.

Selanjutnya, buka admin WordPress Anda untuk membuat perubahan kode CSS yang diperlukan.

Langkah 2: Ubah CSS di panel admin WordPress Anda

Sekarang setelah Anda mencatat beberapa hal yang ingin Anda ubah di formulir kami, buka admin WordPress Anda untuk memulai.

Selanjutnya, di sidebar WordPress Anda, pilih Appearance → Customize → Additional CSS to style the form.

Di sinilah Anda bisa memasukkan kelas CSS untuk formulir Anda.

Misalnya, kami memutuskan untuk mengubah beberapa hal pada formulir kami, jadi inilah kode yang kami masukkan:

Untuk memberi tag pada Class , Anda harus menyertakan . sebelum nama kelas. Untuk ID , Anda menempatkan # .

Namun, jika Anda menggunakan metode ini, sebaiknya pelajari lebih lanjut tentang aturan CSS untuk memahami perubahan Anda dengan lebih baik.

Sebagai contoh kita, itu akan terurai seperti ini:

• .api-form-box mengubah warna latar belakang menjadi biru muda
• .frm-button-submit mengubah latar belakang tombol kirim menjadi kuning dan teks menjadi hitam
• .frm-submit memusatkan tombol di formulir

Dengan perubahan ini, formulir kami akan terlihat seperti ini:

Dari sini, kekuatan Anda tidak terbatas. Anda dapat menyesuaikan formulir sesuka Anda jika Anda mempelajari cara menggunakan CSS.

Ada beberapa kelemahan dari metode ini.

Pembaruan dapat merusak desain formulir Anda dan menyebabkan Anda melakukannya lagi. Belum lagi itu memakan waktu. Jika Anda memiliki beberapa formulir kontak, Anda harus mengedit kode HTML dan menambahkan CSS khusus ke masing-masing formulir.

Tetapi jika Anda menginginkan sesuatu yang lebih mudah dan tidak dapat dipecahkan, kami sarankan untuk memeriksa metode berikut.

Metode 2: Gunakan pembuat formulir dengan penata visual

Pengkodean adalah keterampilan yang membutuhkan waktu untuk dipelajari.

Dan banyak orang tidak punya waktu untuk belajar. Jika itu Anda, pembuat formulir adalah pilihan terbaik Anda.

Dan salah satu yang kami rekomendasikan adalah Formidable Forms .

Ini adalah plugin WordPress pembuat formulir tercanggih di WordPress, yang berarti pembuatan formulir sederhana dan hemat waktu, yang lebih banyak waktu untuk didedikasikan ke area lain di situs web Anda.

Apa pun jenis formulir di situs web Anda, Formidable dapat menangani semuanya dengan cepat.

Tanpa pengkodean, tanpa kerumitan — hanya pembuatan formulir yang mudah.

Ada pembuat formulir lain yang dapat dipilih (WPForms, Gravity Forms, dan lainnya), tetapi mereka tidak menawarkan kemampuan gaya yang disertakan dengan Formidable. Dan itu berarti Anda mendapatkan lebih banyak kekuatan atas tampilan formulir Anda.

Kami merekomendasikan untuk memeriksa paket premium Formidable juga.

Meskipun tidak diharuskan untuk mengatur gaya formulir Anda, Anda mendapatkan banyak fitur hebat:

• Akses ke Templat desain formulir
• Kemampuan untuk menyesuaikan gambar latar belakang Anda
• Templat formulir lainnya untuk memulai formulir Anda lebih cepat
• Dan banyak lagi

Jadi, setelah Anda menginstal dan mengaktifkan Formidable, Anda akan siap untuk memulai.

Dapatkan Formidable Forms sekarang!

Ini hanya tiga langkah sederhana untuk mengatur gaya formulir Anda dan membuatnya aktif di situs Anda:

1. Buat formulir
2. Gaya formulir
3. Menampilkan formulir

Langkah 1: Buat formulir

Untuk menata formulir, Anda memerlukan formulir untuk ditata, bukan?

Jadi, buka admin WordPress Anda dan buka Tangguh → Formulir → Tambah Baru .

Anda dapat memilih salah satu dari banyak templat bawaan kami (fitur premium) atau Formulir Kosong untuk memulai.

Selanjutnya, beri nama formulir Anda dan klik Buat .

Plugin akan membawa Anda ke pembuat seret dan lepas, tempat Anda dapat mengedit formulir dengan mudah.

Tambahkan bidang formulir apa pun yang Anda suka, sesuaikan label bidang, ubah jenis masukan, dan lainnya dari menu sidebar.

Jika Anda membuat formulir kontak, sebaiknya tambahkan berikut ini:

• Bidang teks untuk nama pengunjung
• Email untuk mengetahui cara menghubungi mereka
• Paragraf untuk pesan yang ingin mereka tambahkan

Setelah formulir kontak Anda disiapkan, klik Perbarui untuk menyimpan perubahan Anda.

Kemudian, kita akan menuju ke tab Style .

Langkah 2: Gaya formulir

Di bawah tab Gaya , Anda akan melihat beberapa opsi.

Anda dapat memilih salah satu template desain siap pakai kami untuk menghemat waktu Anda (premium) atau mulai mendesain sendiri.

Untuk mendesain sendiri, klik tiga titik di sebelah Formidable Style dan klik Edit . Gaya Tangguh adalah gaya default di Tangguh.

Ini akan membawa Anda ke desainer Gaya Tangguh kami, tempat Anda dapat menyesuaikan formulir Anda.

Anda dapat mengubah ukuran dan warna label, bidang input, ukuran font, dan warna latar belakang, dan bahkan mengunggah gambar latar belakang!

Misalnya, untuk situs web uji coba bernama Cheap n' Cheesy , kami merancang formulir yang mencerminkan bisnis:

Kemungkinannya tidak terbatas untuk Anda dan formulir kontak Anda!

Jadi, klik Perbarui untuk menyimpan perubahan Anda setelah Anda menyesuaikan formulir Anda.

Sekarang kita hanya perlu menampilkannya!

Langkah 3: Tampilkan formulir

Menampilkan formulir Anda bahkan lebih mudah daripada membuatnya.

Pertama, buka pos atau halaman tempat Anda ingin menampilkan formulir Anda dan tambahkan blok WordPress baru.

Selanjutnya, cari blok Formidable Forms , tambahkan dan pilih formulir Anda dari menu dropdown.

Terakhir, perbarui posting atau halaman Anda, dan formulir Anda akan ditayangkan langsung di halaman Anda!

Kami memberi tahu Anda bahwa itu mudah, seperti semua hal dengan Hebat.

Dapatkan Formidable Forms sekarang!

Siap mendesain formulir kontak WordPress di situs Anda?

Memiliki kemampuan untuk menata formulir kontak adalah sesuatu yang Anda butuhkan , bukan inginkan.

Anda mungkin melihat pencarian untuk plugin Formulir Kontak 7 yang melibatkan penyesuaiannya. Hal-hal seperti Formulir Kontak 7 CSS, masukkan teks jenis di WPCF7, atau masukan jenis email dengan WPCF7.

Semua itu tidak diperlukan dengan kedua metode ini. Dan postingan ini mengajari Anda cara menyesuaikan formulir kontak di WordPress, sehingga formulir Anda terlihat seperti yang Anda inginkan. Apakah Anda memasukkan HTML khusus, CSS, dan lainnya, atau menggunakan Formidable Forms. Anda tidak akan kecewa.

Jadi, jangan menunggu lebih lama lagi. Raih Formulir yang Tangguh dan mulailah merancang formulir Anda!

Dan ikuti kami di Facebook, Twitter, dan YouTube untuk tips dan trik formulir lainnya!

Baca lebih lanjut dari blog Formidable

• Formulir Hebat 6.0! Template Gaya, Aksi Formulir Konfirmasi + Lainnya
  Baca selengkapnya

  Jotform vs Typeform vs Formidable Forms [Dibandingkan]
  Baca selengkapnya

  Cara Menggunakan Formulir Kontak WordPress untuk Mengarahkan Ulang Setelah Mengirim
  Baca selengkapnya

Tahukah Anda bahwa Formidable Forms adalah salah satu plugin pembentuk formulir WordPress tercepat yang tersedia saat ini? Jika Anda belum menggunakannya, mulailah dengan plugin gratis kami atau versi pro berfitur lengkap!