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 yang baru formulir kontak dan gulir ke bawah halaman ke bagian Skins. Anda dapat memilih template 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.

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:

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 dari formulir kontak yang paling populer di WordPress. Ini menawarkan banyak fitur seperti pengiriman ke banyak penerima, dukungan untuk animasi, pembuatan formulir tanpa batas, gaya yang 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 Ekstensi WordPress 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

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

Download | Demo | Hébergement Web

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.

...