Loncat ke Konten Utama

Bagaimana untuk menyesuaikan bentuk Formulir Kontak 7

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Formulir Kontak 7 adalah sebuah plugin WordPress sangat populer untuk membuat formulir kontak. Ini memungkinkan Anda untuk membuat formulir tanpa pengkodean HTML. ini bentuk dapat menawarkan fitur seperti CAPTCHA, mengunduh file, bidang survei dll ...

Meskipun gaya Kontak Formulir 7 default cukup untuk sebagian besar formulir kontak dasar, Anda sering harus mengubahnya.

Ini mengubah struktur formulir default untuk membuatnya lebih mudah diakses. Dia juga menambahkan Kode pendek [responsif] di atas formulir sehingga jika ada kesalahan saat mengirimkan formulir, itu ditunjukkan pada formulir.

Jika Anda belum pernah membuat situs WordPress, cari tahu Cara menginstal blog WordPress dengan klien FTP

Untuk bentuk standar, kode yang dihasilkan oleh plugin adalah:

[respon] Nama Anda (wajib) [teks * id nama-Anda: nama- Anda ] Email Anda (wajib) [email * id-email-Anda: email- Anda ] Subjek Anda [teks id subjek-Anda: subjek-Anda] Pesan Anda [textarea your-message id: your-message] [submit "Send"]

Beberapa plugin untuk menyesuaikan Form Formulir kontak 7

1. Formulir Kontak Gaya 7

Le Plugin Formulir Kontak Gaya 7 memiliki sejumlah gaya untuk dipilih.

Daftar gaya kontak 6Untuk pengguna tema Dua Puluh Lima Belas, ada juga gaya yang kompatibel.

Untuk menerapkan gaya, buka " Gaya Kontak> Edit Cepat Periksa formulir di mana Anda ingin menerapkan gaya, lalu klik " Perbarui '.

Contoh formulir kontak wordpress2. Formulir Kontak 7 Skins

Untuk menggunakan Skins Hubungi Formulir 7, buat formulir kontak baru dan gulir ke bawah ke bagian Skins. Anda bisa memilih templat dan gaya untuk formulir Anda.

Anda akan menemukan model yang didedikasikan untuk bentukperistiwa, pendaftaran dan pemberitahuan.

Templat Wordpress halaman formulir kontak

Seperti inilah bentuk survei dengan gaya Topaz menggunakan tema Twenty Fifteen.

Contoh formulir pertanyaan 7 formulir kontak

3. Desain Material untuk Formulir Kontak

Gaya ini didasarkan pada gaya Material Desain.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Plugin ini menyarankan Anda untuk menghapus formulir default dan menggunakan kode pendeknya.

Berikut adalah contoh dengan tema Hestia. Perhatikan label mengambang saat penunjuk dipindahkan ke bidang di formulir.

Formulir kontak contoh desain material 7Tes Formulir Kontak 7 pada beberapa Tema WordPress

Formulir Kontak dengan ColorMag WordPress Theme

Sebagian besar waktu, Formulir Kontak 7 akan mewarisi gaya tema WordPress Anda. Ini adalah kasus dengan temanya Coral gelap.

Bentuk kontak karang gelap

Formulir kontak dengan tema WordPress ColorMag

Ini formulir tanpa gaya khusus. Dia mewarisi warna tombol biru Tema ColorMag WordPress.

Formulir kontak dengan tema colormagSaya mulai dengan mengunggah foto untuk digunakan sebagai gambar latar belakang formulir dan mengubah kode label formulir dari abu-abu menjadi putih dengan bayangan biru pada teks.

Perubahan berikut ini adalah untuk menambah margin antara label formulir dan bidang formulir, mengubah tombol kurangi, dan menambahkan batas saat penunjuk memasukkan bidang pada formulir.

Tampilan pesan kesalahan / sukses saat formulir dikirimkan juga harus diubah agar ditampilkan dengan benar.

GIF yang berputar ketika formulir dikirimkan tidak muncul dengan benar, saya menemukan alternatif untuk Loading.io dan mereferensikannya dengan CSS.

Ini adalah form yang dihasilkan:

Hasil kustomisasi formulir kontak 7Ini kodenya:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

div.wpcf7 {margin: 0; pengisi: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 label, .wpcf7-kirimkan {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-kirim: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; perataan teks: tengah; lebar: 92.5%; margin: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; display: inline-block; lebar: otomatis; pengisi: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); lebar: 50px; tinggi: 50px; }

Jika Anda tidak perlu mencoret-coret kode, kami sarankan Anda untuk melihatnya Plugin 10 WordPress untuk membuat formulir kontak di blog Anda

Temukan juga alternatif premium 3 yang akan membantu Anda membuat formulir kontak Anda. 

1. Formulir Kontak W8

Formulir Kontak W8 adalah salah satu plugin formulir kontak paling populer di WordPress. Ini menawarkan banyak fitur seperti pengiriman ke banyak penerima, dukungan animasi, pembuatan formulir tak terbatas, gaya berbeda, dan berbagai macam opsi penyesuaian tambahan.

Formulir kontak W8 plugin formulir kontak wordpress

Selain itu, ini memberi situs web atau blog Anda sistem profesional untuk memudahkan berhubungan dengan pelanggan Anda. Anda akan dapat mempersonalisasi semua formulir Anda sesuai dengan kebutuhan dan selera Anda.

Download | Demo | Hébergement Web

2. Formulir Hubungi Kami

Formulir Hubungi Kami adalah plugin WordPress responsif dan alat sederhana namun kaya akan opsi penyesuaian yang memungkinkan Anda untuk menampilkan formulir yang jelas dan mendorong, di mana pengunjung Anda dapat menghubungi Anda dengan meninggalkan pesan mereka.

Hubungi kami dari plugin formulir kontak wordpress

Anda akan dapat menentukan bidang yang diperlukan, memilih tata letak bidang yang terbaik dan menyesuaikannya sepenuhnya untuk mendorong pelanggan atau pengunjung untuk meninggalkan saran atau pesan mereka.

Cukup atur alamat email tempat Anda ingin menerima pesan dan gunakan untuk menumbuhkan bisnis Anda ke arah yang paling menguntungkan.

Download | Demo | Hébergement Web

3. Slick Popup Pro

Slick Popup Pro adalah plugin WordPress yang cukup sederhana dan ringan yang mengubah bentuk apa pun yang dibuat oleh plugin Hubungi Formulir 7 dalam munculan. Dia menggunakan bentuk dan mengubahnya menjadi popup yang indah dan sangat responsif.Plugin Wordpress popup slick popup pro

Formulir popup dapat memiliki beberapa kegunaan antara lain: formulir pengumpulan informasi, formulir kontak, formulir pendaftaran, formulir kutipan, formulir saran / keluhan dan lain-lain.

Download | Demo | Hébergement Web

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Sumber Daya yang Direkomendasikan

Lihat sumber daya lain yang direkomendasikan yang akan membantu Anda membuat dan mengelola formulir kontak dengan lebih baik di situs web atau blog Anda. 

Kesimpulan

Voila! Itu saja untuk tutorial ini, saya harap Anda memiliki lebih banyak ide untuk menyesuaikan formulir kontak Anda. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Namun, sementara itu, beri tahu kami tentang file komentar dan saran di bagian khusus.

...  

Artikel ini berisi komentar 2

  1. Untuk membuat situs web profesional, Anda harus tepat dan ringkas untuk meyakinkan pengguna dengan cepat. Kami menawarkan Anda kesempatan untuk membuat situs web profesional, baik itu subjek pembuatan situs showcase atau portofolio. Pembuatan situs online atau situs web profesional sekarang dalam jangkauan semua. Itulah sebabnya situs web orson Anda secara alami menambahkan semua fitur ini.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
106 saham
saham4
menciak
Register102