Apakah Anda ingin menyesuaikan formulir kontak 7 dengan plugin Elementor Essential Addons?
Contact Form 7 adalah salah satu plugin paling populer untuk membuat formulir di WordPress. Namun, meskipun fitur-fiturnya canggih, penyesuaian tampilan formulir dapat dibatasi tanpa sepengetahuan CSS.
Dengan WordPress Plugin Formulir Kontak 7 Anda dapat membuat berbagai jenis formulir seperti formulir pemesanan atau formulir unggah file. Ini menawarkan 14 tipe bidang yang dapat Anda gunakan saat membuat formulir.
Lihat juga: Cara Menggunakan Widget/Templat Elementor sebagai Blok Gutenberg
Namun salah satu masalah umum mengenai plugin Contact Form 7 adalah proses penyesuaiannya. Formulir Kontak 7 menggunakan gaya default Anda tema WordPress aktif. Anda dapat menggunakan gaya yang berbeda, tetapi keterampilan CSS diperlukan.
Di sinilah Addons Penting untuk Elementor berperan. Plugin ini menawarkan berbagai alat untuk menata dan menyempurnakan formulir Anda. Dengan Essential Addons, Anda dapat menyesuaikan setiap aspek formulir Kontak 7 Anda langsung dari antarmuka Elementor.
Pada artikel ini, kita akan mempelajari cara menggunakan plugin ini untuk mengubah formulir Anda menjadi elemen yang menarik secara visual.
Daftar isi
Cara Menata Formulir Kontak 7 dengan Essential Addons
Instalasi dan Konfigurasi
Mulailah dengan menginstal dan mengaktifkan Elementor et Hubungi Formulir 7 di situs WordPress Anda. Setelah terinstal, buatlah formulir dasar yang akan Anda gaya nanti.
Kemudian instal dan aktifkan Addon Penting untuk Elemen. Pastikan Elementor juga terinstal dan aktif di situs Anda. Addons Esensial bekerja sama dengan Elementor untuk menawarkan opsi penyesuaian tingkat lanjut.
Di dashboard WordPress, aktifkan widget “Contact Form 7” di pengaturan Essential Addons jika Anda belum melakukannya.
Setelah diinstal dan diaktifkan, buat halaman baru (Halaman – > Tambah) dan edit dengan Elementor.
Menata Formulir dengan Addons Penting
Sebelum Anda memulai proses penyesuaian, atur tata letak halaman dengan mengklik ikon roda gigi di atas halaman Anda. Atur tata letak dari menu drop-down. pada Elemen lebar penuh.
Untuk mulai menyesuaikan, navigasikan ke halaman tempat Anda ingin menyisipkan formulir melalui editor Elementor. Tambahkan widget “ Formulir Kontak EA7 » dari Addons Penting ke halaman Anda.
Setelah formulir ditambahkan, Anda dapat mulai menatanya. Addons Penting memungkinkan Anda mengubah warna, tipografi, margin, dan banyak lagi. Sesuaikan tampilan bidang, tombol, dan pesan kesalahan sesuai preferensi Anda.
Buka panel kiri dan pilih formulir yang gayanya ingin Anda sesuaikan.
Setelah memilih formulir, navigasikan ke tab Gaya. Seperti yang Anda lihat, Anda dapat mengatur beberapa opsi gaya. Berikut adalah opsi gaya umum yang dapat Anda atur.
Lebar formulir, perataan, dan latar belakang
Di bawah blok FormContainer, klik pemilih warna di bagian tersebut Jenis latar belakang dan atur warna yang diinginkan untuk latar belakang formulir. Anda dapat menggunakan warna solid atau warna gradien sebagai latar belakang.
Baca juga: Elementor: Cara mengimpor atau mengekspor template
Untuk mengatur perataan formulir, cukup pilih opsi perataan pilihan Anda di bagian tersebut Penyelarasan Bentuk.
Untuk mengatur lebar formulir, atur nilai lebar maksimum formulir di bidang Lebar Bentuk Maks.
Bidang latar belakang, lebar batas, dan radius
Untuk menentukan latar belakang bidang, lebar, dan radius batas, Anda dapat membuka bagian tersebut Area Masukan & Teks. Klik pemilih warna bidang Warna latar belakang untuk mengatur latar belakang.
Anda juga dapat mengatur warna latar bidang dalam mode debug dengan mengklik tab FOKUS.
Untuk menentukan lebar bidang, Anda dapat menentukan nilai di bidang Lebar Masukan. Di bagian ini Anda juga dapat mengatur lebar bidang kotak teks Lebar bidang teks.
Untuk mengatur radius batas, cukup edit bidang Radius Perbatasan dan atur nilai batas yang Anda inginkan. Anda juga dapat mengatur tipografi (jenis font, ukuran font, gaya font) dengan mengklik ikon pensil di kolom tipografi.
Label
Addons Esensial juga memungkinkan Anda menyesuaikan gaya label formulir Anda. Anda dapat mengatur warna teks serta tipografi. Untuk melakukan ini, buka opsi Label. Atur warna teks dengan mengklik pemilih warna di lapangan Warna teks.
Untuk mengatur tipografi, klik ikon pensil di lapangan Tipografi.
tombol kirim
Untuk menyesuaikan gaya tombol kirim, buka blok Kirim Tombol. Dari sini Anda dapat mengatur perataan tombol, lebar, warna latar belakang, warna teks, radius batas, serta tipografi.
Pesan eror
Untuk menyesuaikan gaya pesan kesalahan, Anda dapat membuka blok kesalahan. Anda dapat mengatur warna teks pesan kesalahan, tipografi, warna latar belakang kesalahan validasi, warna teks kesalahan validasi, dll….
Anda dapat menyetel beberapa opsi gaya lainnya. Anda dapat bermain-main dengan panel kiri sampai Anda puas dengan gaya formulir Anda.
Anda dapat menambahkan beberapa elemen lain ke halaman Anda menggunakan widget yang tersedia yang ditawarkan oleh Elementor dan Essential Addons. Setelah selesai, klik tombol MENERBITKAN di bagian bawah panel kiri untuk menerbitkan halaman Anda.
Mengintegrasikan formulir ke halaman biasa
Setelah mengklik tombol MENERBITKAN, halaman kontak Anda pada dasarnya telah dipublikasikan. Halaman itu sendiri didukung oleh Elementor. Jika Anda lebih suka menambahkan Anda formulir kontak 7 ke halaman biasa (halaman yang dibuat dengan Gutenberg, editor default WordPress), Anda dapat menginstal plugin Blok Elementor untuk Gutenberg. Plugin ini akan mengubah template Elementor menjadi blok Gutenberg.
Untuk mendaftarkan Anda formulir kontak sebagai template Elementor, klik tombol panah di sebelah tombol PUBLIKASIKAN / PERBARUI di panel kiri dan pilih Simpan sebagai Templat.
Beri nama template Anda dan klik tombolnya PENDAFTARAN.
Buat halaman baru (Halaman – > Tambah) dan beri nama seperti "hubungi kami", "kontak" atau nama lain yang Anda suka.
Tambahkan blok baru dan pilih Perpustakaan Elemen dan pilih Templat formulir formulir kontak yang baru saja Anda buat.
Dan sekarang Anda baru saja mempersonalisasi Formulir Kontak Anda.
Pengujian dan Optimasi
Setelah formulir ditata, penting untuk memverifikasi bahwa formulir tersebut ditampilkan dengan benar di semua perangkat. Uji respons formulir menggunakan alat bawaan Elementor. Lakukan penyesuaian yang diperlukan untuk memastikan formulir dapat dibaca dengan sempurna di ponsel dan tablet.
Selain itu, verifikasi bahwa gaya yang diterapkan tidak memengaruhi kinerja situs Anda. Formulir yang ditata dengan baik harus tetap cepat dimuat. Jika perlu, optimalkan gambar dan minimalkan efek visual untuk memastikan performa optimal.
Baca juga sumber daya yang tertaut ke artikel ini
- Elementor : Cara membuat kartu produk
- Elementor : Cara membuat bagian anggota tim
- Elementor : Cara membuat peta heksagonal dengan efek
- Elementor : cara menggulir gambar saat mengarahkan kursor
- Elementor : Cara menambahkan efek suara tombol
FAQ
Apakah Essential Addons kompatibel dengan plugin formulir lainnya?
Ya, Essential Addons kompatibel dengan beberapa plugin lain, meskipun beberapa fitur khusus ditujukan untuk Formulir Kontak 7.
Bisakah saya menggunakan Addons Esensial tanpa Elementor?
Tidak, Addons Penting hanya berfungsi dengan Elementor, karena ini merupakan perpanjangan dari pembuat halaman ini.
Apa yang harus dilakukan jika stilisasi tidak diterapkan dengan benar?
Pastikan cache situs Anda dibersihkan dan semua plugin sudah diperbarui. Jika masalah terus berlanjut, periksa kemungkinan konflik dengan plugin atau tema lain.
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini yang menunjukkan kepada Anda cara menyesuaikan formulir Formulir Kontak 7 dengan Addons Penting. Oleh karena itu, menata formulir Formulir Kontak 7 dengan Addons Penting adalah cara yang efektif untuk membuat formulir Anda lebih menarik secara visual sambil mempertahankan pengalaman pengguna yang luar biasa.
Dengan praktik personalisasi yang baik, Anda dapat membuat formulir yang tidak hanya menarik perhatian pengguna, namun juga memperkuat identitas visual situs Anda. Jangan ragu untuk menjelajahi fitur Addons Penting lainnya untuk melangkah lebih jauh dalam menyesuaikan situs WordPress Anda.
Jika Anda mempunyai kekhawatiran tentang cara menuju ke sana, beri tahu kami di komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
