Cara Menyesuaikan Formulir Kontak Anda 7 Gaya dengan Cara Mudah
Diterbitkan: 2022-04-10Formulir kontak adalah elemen yang sangat penting dari setiap situs web. Kami menggunakannya untuk mengumpulkan dan berbagi berbagai jenis informasi dan oleh karena itu harus berhati-hati agar terlihat sama baiknya dengan situs web kami lainnya . Formulir kontak yang terlalu sederhana, dengan gaya yang seolah-olah tidak sesuai dengan halaman tidak dapat menanamkan rasa percaya pada pengguna Anda, dan akan sangat disayangkan kehilangan audiens Anda saat mereka ingin mengambilnya. selangkah lebih maju dan tinggalkan beberapa data mereka di formulir kontak Anda.
Cara yang sangat populer untuk membuat formulir kontak adalah dengan plugin Formulir Kontak 7 , alat praktis dan mudah digunakan yang sering disertakan secara gratis dengan banyak tema WordPress yang memungkinkan Anda membuat semua jenis formulir kontak dengan mudah . Plugin ini mencakup semua aspek teknis dalam membuat formulir kontak – untuk menatanya, Anda memerlukan keterampilan tambahan atau plugin lain.
Dalam artikel ini, kami akan menunjukkan kepada Anda betapa mudahnya Anda dapat menata formulir kontak agar sesuai dengan desain situs web Anda dengan alat gratis .
Tetap disini untuk mempelajari lebih lanjut tentang:
- Menggunakan Qi Addons untuk Elementor untuk Menyesuaikan Gaya Formulir Kontak Anda
- Mengatur Gaya Formulir Kontak
Qi Addons for Elementor adalah plugin kaya fitur gratis yang hadir dengan 60 widget, dan termasuk widget Contact Form 7 yang secara khusus dibuat untuk membantu Anda menyesuaikan gaya formulir Anda. Plugin ini tidak memerlukan pengetahuan pengkodean dan secara harfiah, siapa pun dapat menggunakannya dengan nyaman. Itu tidak memberi Anda opsi untuk membuat formulir kontak, tetapi jika Anda menggunakan plugin Formulir Kontak 7, dengan Qi Anda akan dapat menyesuaikan dan mendesain ulang formulir Anda sedemikian rupa sehingga cocok dengan gaya situs web Anda.
Qi Addons for Elementor mudah dipasang dan dikonfigurasi, dan prosedurnya hampir sama dengan plugin lainnya.
Setelah Anda menginstalnya, buka halaman di mana formulir kontak yang ingin Anda gaya dan pilih untuk mengeditnya di Elementor.
Kemudian ketik Contact Form 7 di kolom pencarian di menu sebelah kiri untuk menemukan widget Contact Form 7.
Sekarang, ketika Anda mendapatkannya, klik dan arahkan kursor ke tempat yang Anda inginkan untuk formulir kontak Anda .
Formulir yang Anda tambahkan dengan cara ini adalah formulir yang Anda buat dengan plugin Formulir Kontak 7, widget ini dibuat hanya untuk membantu Anda menata formulir, Anda tidak dapat membuat formulir dengannya . Jadi, sekarang Anda telah menempatkan formulir kontak Anda di tempat yang Anda inginkan, dan Anda dapat melihat pengaturan widget Formulir Kontak 7 di menu sebelah kiri.
Tab pertama dalam menu memberi Anda pilihan untuk memilih jenis formulir kontak yang ingin Anda miliki di halaman . Kami dapat memilih di antara tiga opsi – Formulir kontak 1, Buletin, dan Hubungi Kami, Anda tentu saja dapat memilih salah satu formulir yang Anda buat sebelumnya untuk situs Anda. Sekarang mari tunjukkan bagaimana kami menyesuaikan formulir Hubungi Kami di situs kami.
Untuk membuka opsi penataan gaya formulir, klik tab Gaya .
Opsi pertama mengacu pada tipografi Label , di mana Anda dapat mengatur font, ukuran font, spasi antara kata-kata label, gaya font, spasi antara huruf dalam kata-kata dan hal yang hebat adalah Anda bisa melihat semua perubahan hidup segera sehingga Anda tidak melakukan sesuatu secara membabi buta .
Pada gambar di bawah ini Anda dapat melihat dengan tepat bagaimana pilihan kita tercermin pada tipografi label.
Opsi selanjutnya mengacu pada warna label .
Anda dapat membuat naungan Anda sendiri, tergantung pada kebutuhan Anda. Kami memilih biru tua untuk label kami karena cocok dengan warna latar belakang halaman.
Sekarang, ketika Anda sudah siap dengan gaya label, pengaturan selanjutnya mengacu pada gaya masukan .
Anda juga akan memiliki opsi serupa di sini – Anda dapat memilih gaya, ukuran, dan warna font tipografi input . Anda juga dapat mengatur warna latar belakang bidang input jika Anda tidak menginginkannya menjadi putih seperti default. Anda juga akan menemukan pengaturan untuk menyesuaikan gaya batas bidang input di sini dan Anda dapat memilih antara padat, putus-putus, beralur, putus-putus, ganda atau tidak sama sekali dan untuk setiap opsi Anda dapat membuat penyesuaian tambahan.
Anda juga dapat mengatur gaya yang berbeda saat kolom input aktif . Semua opsi yang sama tersedia untuk Anda, tetapi hanya akan diterapkan saat kolom input aktif.
Pengaturan selanjutnya mengacu pada gaya kotak centang . Elemen kecil ini sangat penting dalam formulir kontak dan harus terlihat rapi dan mudah diakses karena ini adalah langkah di mana Anda menawarkan semacam pilihan kepada pengguna situs web Anda.
Dengan Qi, Anda akan dengan mudah membuat elemen ini terlihat sempurna. Anda dapat mengatur ukuran input kotak centang , Anda dapat meninggalkan lebih banyak atau lebih sedikit ruang antara dua kotak centang serta antara kotak centang dan bidang input lainnya . Anda dapat melihat dengan jelas pada foto di bawah ini bagaimana pilihan kami memengaruhi formulir kontak dalam hal ini:
Pengaturan selanjutnya yang penting untuk diketahui adalah pengaturan Button Style .
Anda dapat mengubah warna latar belakang tombol, mengatur batas di sekitar tombol dengan warna dan gaya yang berbeda (padat, putus-putus, atau putus-putus). Anda juga dapat mengubah warna teks di tombol dengan memilih warna yang diinginkan di opsi Warna tombol. Semua perubahan segera terlihat sehingga Anda dapat dengan mudah memahami pengaturan mana yang mengacu pada elemen formulir kontak mana.
Jika Anda ingin gaya tombol berubah saat mengarahkan kursor, klik tab Aktif dan sesuaikan pengaturan – Anda dapat menyesuaikan warna tombol melayang, warna latar belakang tombol melayang, warna batas tombol melayang, dll.
Bila Anda puas dengan tampilan formulir kontak, Anda sekarang dapat menyesuaikan jarak dengan membuka pengaturan di tab Gaya Spasi . Anda dapat menyesuaikan jarak untuk setiap elemen formulir kontak di sini.
Pengaturan Gaya Global mengacu pada gaya perataan formulir kontak. Anda dapat memilih antara perataan kiri, tengah dan kanan.
Pengaturan Gaya Kesalahan memungkinkan Anda untuk mengontrol gaya pesan kesalahan yang ditampilkan saat seseorang tidak mengetikkan data yang benar ke dalam formulir. Anda dapat mengatur posisi pesan kesalahan, tipografi dan warna dengan mudah.
Pengaturan Gaya Respons memungkinkan Anda untuk menyempurnakan detail respons yang disisipkan dalam formulir kontak. Anda dapat mengontrol font, warna font, mengatur padding respons dan margin respons serta jenis batas.
Beginilah tampilan formulir kami setelah seseorang mengirim pesan:
Dan, begitu saja, Anda memiliki formulir kontak yang elegan di halaman Anda, siap bekerja untuk Anda.
Membungkus Semuanya
Hal hebat tentang Qi Addons for Elementor adalah Anda dapat melihat semua perubahan yang Anda buat secara langsung sehingga Anda dapat dengan cepat berpindah melalui opsi yang berbeda dan mempelajari cara menggunakannya secara intuitif. Meskipun menambahkan formulir kontak bukanlah tugas yang sangat kreatif, plugin ini memungkinkan Anda untuk menjadi kreatif bahkan dalam kasus itu. Tampilan formulir kontak Anda dapat sangat memengaruhi cara pengguna Anda memandang Anda, dan jika Anda berhasil memberikan standar yang sama di departemen ini juga, itu akan menjadi nilai tambah yang besar untuk situs web Anda, merek Anda, dan bisnis Anda.
Kami harap artikel ini bermanfaat. Jika Anda menyukainya, jangan ragu untuk membaca beberapa artikel ini juga!
- Plugin Tombol Suka WordPress Terbaik yang Layak Dimiliki
- 4 Cara Mudah Membuat Tombol WordPress
- Tips Desain Tombol: Cara Mendapatkan Klik dari Pengunjung Anda