Formulir kontak 7 gaya siap pakai wordpress.

Saya perlu mendapatkan formulir yang bagus untuk sebuah plugin, formulir yang dibutuhkan kemarin, tetapi cukup sulit untuk duduk dan menulis gaya secara manual, dan untuk banyak proyek, hal itu tidak sesuai anggaran. Oleh karena itu, saya mencari plugin menarik untuk menyiapkan formulir kontak CSS dengan cepat.

Semua orang dengan suara bulat (ini berlaku untuk mesin pencari) merekomendasikan - kata orang bijak - edit css dan jangan membodohi siapa pun, ambil Notepad dan lanjutkan. Ke depan, orang-orang bijak itu benar.

Namun, rasa ingin tahu menang dan diputuskan untuk menguji plugin lebih detail. Saya sudah mencobanya sebelumnya, tetapi sepertinya sangat membosankan dan tidak nyaman. Plugin ini belum diperbarui selama 11 bulan, dan itu menyedihkan. Sedikit lebih dari 6K webmaster mengambil risiko mempercayakan formulir mereka kepadanya, yang jumlahnya juga tidak besar (saya mengunduhnya empat atau lima kali).

Setelah instalasi, itu menciptakan bagian “Gaya kontak” di akar menu admin. Di bagian ini ada dua item yang berisi templat untuk Hari Valentine dan Natal dan “Gaya Kustom” di mana Anda dapat sepenuhnya menyesuaikan keluaran formulir. Sebenarnya, bagian “Gaya Kustom” adalah yang paling menarik minat Anda; rincian lebih lanjut tentang pengaturan yang tersedia:

“PENGATURAN UMUM” - Anda dapat menentukan warna latar belakang, lebar bentuk (ditetapkan dalam px, % belum mencoba), ketebalan batas, bentuk (titik, padat, dll.), warna, pembulatan.

"PENGATURAN INPUT DAN LABEL" - latar belakang bidang masukan, warna font masukan, font (daftarnya tidak besar dan hampir tidak ada apa pun dalam Sirilik) dan ukurannya. Warna batas bidang, corak (garis putus-putus padat, dll.), ketebalan, pembulatan. Masukkan font dan ukurannya. Parameter margin dalam px - tinggi/lebar, padding. Label font, gaya, ukuran, warna.

“SUBMIT BUTTON SETTINGS” – pengaturan untuk tombol kirim formulir. Pengaturan yang tersedia adalah ukuran tombol, pembulatan, warna, jenis batas, dan warna batas.

Masalah dalam penggunaan.

Setelah meninjau pengaturannya, Anda dapat sampai pada kesimpulan bahwa semuanya sangat baik - latihan menunjukkan sebaliknya. Sebenarnya ada banyak pengaturan, tetapi itu tidak cukup - tidak ada pengaturan indentasi di dalam formulir, sehingga semua blok dikumpulkan di batas kiri dekat tepi formulir. Pengaturan "default" yang aneh - dengan kolom input 100*100 piksel. Jika Anda mengatur ukuran bidang dengan benar, ini tidak akan mempengaruhi daftar drop-down dan akan mengambil gaya tema utama. Tidak mungkin untuk mengatur ulang ke pengaturan awal sebelum menghapus instalasi plugin...

Sejauh ini, selain mengubah gaya secara manual, hal itu belum berjalan dengan baik... Keajaiban belum terjadi.

Catatan penting! Plugin baru saja diperbarui dan ada perubahan yang cukup signifikan dalam pengaturannya, jadi Anda perlu melihat dan mengujinya.

Formulir Kontak 7 dapat mengelola beberapa formulir kontak di mana Anda dapat secara fleksibel menyesuaikan formulir dan konten email dengan tata letak yang cukup sederhana. Formulir memiliki dukungan bawaan untuk pengiriman Ajax, CAPTCHA, filter spam Akismet, dan banyak lagi.

Dokumentasi dan dukungan

Tangkapan layar

Instalasi

  1. Unggah seluruh folder contact-form-7 ke direktori /wp-content/plugins/.
  2. Aktifkan plugin dari halaman Plugins di dashboard WordPress Anda.

Di menu konsol WordPress, Anda akan menemukan tab 'Umpan Balik'.

Untuk mempelajari cara menggunakan plugin dengan benar, Anda dapat mengunjungi halaman beranda.

Peserta dan pengembang

Formulir Kontak 7 adalah proyek sumber terbuka. Kontributor berikut berkontribusi terhadap pengembangan plugin:

Peserta

log perubahan

Untuk informasi lebih lanjut, lihat Rilis.

5.1.3

  • Memperbaiki bug yang mengakibatkan ketidakmampuan untuk membatalkan pilihan di tab Mail.

5.1.2

  • Kontak Konstan: Memperkenalkan pemilih daftar kontak.
  • Kontak Konstan: Pengaturan tambahan, Constant_contact, diperkenalkan.
  • reCAPTCHA: Memperkenalkan kait filter wpcf7_recaptcha_actions dan wpcf7_recaptcha_threshold.

5.1.1

  • reCAPTCHA: Mengubah respons menjadi token respons kosong.

5.1

  • Modul integrasi Kontak Konstan telah diperkenalkan.
  • Modul reCAPTCHA telah diperbarui untuk mendukung reCAPTCHA v3.
  • Menambahkan aturan gaya Mode Gelap.

5.0.5

  • Memperbaiki masalah inkonsistensi antara get_data_option() dan get_default_option() di kelas WPCF7_FormTag.
  • Menekan kesalahan PHP yang terjadi saat memanggil unlink().
  • Memperkenalkan wpcf7_is_file_path_in_content_dir() untuk mendukung konstanta UPLOADS.

5.0.4

  • Secara eksplisit menyetel argumen power_type dalam panggilan register_post_type() untuk memperbaiki masalah eskalasi hak istimewa yang tidak sah.
  • Lampiran file lokal - dilarang menentukan jalur absolut ke file yang terletak di luar direktori konten-wp.
  • Validator Konfigurasi - Menambahkan elemen pengujian untuk mendeteksi pengaturan file lampiran yang salah.
  • Memperbaiki bug pada fitur kompatibilitas mundur JavaScript untuk browser lama yang tidak mendukung atribut placeholder HTML5.
  • Kotak centang persetujuan - menonaktifkan fungsi jangan simpan pada tag formulir.

5.0.3

  • CSS: Menerapkan gaya kursor “tidak diizinkan” untuk mengirimkan tombol dalam status “dinonaktifkan”.
  • Kotak Centang Penerimaan: Merevisi UI pembuat tag untuk mendorong penggunaan opsi yang lebih baik dalam hal perlindungan data pribadi.
  • Memperkenalkan fungsi wpcf7_anonymize_ip_addr().
  • Memperkenalkan opsi consent_for:storage untuk semua jenis tag formulir.

5.0.2

  • Menambahkan bagian Pemberitahuan Privasi ke file readme.txt.
  • Memperbarui konten kotak meta Informasi.
  • Gunakan get_user_locale() alih-alih get_locale() jika lebih tepat.
  • Kotak Centang Penerimaan: Reset status tombol kirim yang dinonaktifkan setelah pengiriman berhasil.

5.0.1

  • Memperbaiki penggunaan _n() yang salah.
  • Validasi konfigurasi: Memperbaiki jumlah peringatan yang salah di panel tab Pengaturan Tambahan.
  • Validasi konfigurasi: Memperbaiki perlakuan yang tidak tepat untuk tag email khusus [_site_admin_email] di bidang header Dari email.
  • Kotak centang penerimaan: Atribut kelas dan id yang ditentukan diterapkan ke elemen HTML yang salah.
  • Validasi konfigurasi: Ketika ada header email tambahan untuk kotak surat seperti Cc atau Reply-To, tetapi kemungkinan nilainya kosong, kesalahan “Sintaks kotak surat yang digunakan tidak valid” akan dikembalikan.
  • Tentukan secara eksplisit parameter keempat add_action() untuk menghindari penerusan nilai parameter yang tidak diinginkan.
  • Periksa apakah direktori target kosong sebelum menghapus direktori.

5.0

  • Pengaturan tambahan: on_sent_ok dan on_submit telah dihapus.
  • Pengaturan tambahan baru: skip_mail
  • Flamingo: Judul saluran masuk berubah bersamaan dengan perubahan judul formulir kontak terkait.
  • Peristiwa DOM: Jadikan seluruh objek respons API dapat diakses melalui properti event.detail.apiResponse.
  • Email HTML: Menambahkan atribut terkait bahasa ke header HTML.
  • Unggah file: Menyetel atribut terima ke bidang pengunggahan.
  • Memperkenalkan kelas WPCF7_MailTag.
  • Memungkinkan Anda membatalkan upaya mengirim email menggunakan kait tindakan wpcf7_before_send_mail. Selain itu, Anda dapat mengatur status dan pesan khusus melalui pencegat tindakan.
  • Kotak centang penerimaan: Memungkinkan penentuan pernyataan kondisi di bagian konten tag formulir.
  • Kotak centang penerimaan: Mendukung opsi opsional.
  • Tag email khusus baru: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], dan [_nama_tampilan_pengguna]
  • Kait filter baru: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type), dan wpcf7_mail_tag_replaced_($type)
  • Fitur tag formulir baru: wadah tanpa kontrol dan bukan untuk email

Menggunakan plugin Formulir Kontak. Namun seiring berjalannya waktu, muncul pemahaman bahwa kemampuan plugin ini jelas tidak cukup dan kelemahan terbesarnya adalah plugin ini memungkinkan Anda membuat hanya satu formulir umpan balik.

Sebenarnya sepertinya tidak ada masalah. Namun beberapa pemilik situs web memerlukan lebih dari satu formulir umpan balik, yang dapat ditemukan tidak hanya di halaman “Umpan Balik” atau “Kontak”, tetapi juga di halaman atau postingan lainnya.

Dalam tutorial ini, saya ingin menunjukkan cara membuat formulir umpan balik menggunakan plugin lain, lebih fungsional dan sedikit lebih kompleks daripada yang dibahas di postingan terakhir. Bagaimana kalau kita mulai?

Deskripsi plugin

Plugin Formulir Kontak 7 memungkinkan Anda membuat berbagai formulir untuk mengirimkan hasilnya ke kotak masuk email Anda. Semuanya benar-benar dapat disesuaikan - tampilan formulir, urutan bidang, nama prasasti, format pesan email, pilihan penerima tanggapan. Secara umum, plugin ini sangat fungsional dan keren.

Selain itu, Anda dapat menghubungkan plugin Akismet ke dalamnya untuk perlindungan anti-spam, mengimplementasikannya, dan juga menggunakan fungsionalitas multibahasa. Menurut saya, ini keren! :-)

Menginstal plugin Formulir Kontak 7

Plugin diinstal dengan cara standar di WordPress. Buka bagian “Plugin” - “Tambah Baru”, masukkan nama Formulir Kontak 7 dan instal dari repositori. Jangan lupa segera aktifkan setelah instalasi.

Menyiapkan Formulir Kontak 7

Setelah mengaktifkan plugin, item baru “Kontak (CF7)” akan muncul di menu utama WordPress; ini adalah tempat utama untuk menyiapkan formulir umpan balik Anda. Jumlah formulir tidak terbatas.

Daftar formulir yang ada tersedia di bagian “Formulir Kontak”:

Di sini Anda dapat menyalin kode pendek yang diinginkan untuk ditempelkan ke halaman atau postingan:

Menambahkan formulir umpan balik baru

Seperti yang Anda lihat, tidak ada item tambahan khusus di menu, jadi mari kita lanjutkan ke pembuatan formulir umpan balik itu sendiri. Untuk melakukan ini, pilih item “Tambah baru” di menu utama.

Pertama-tama kita diminta memilih bahasa antarmuka dari form yang akan dibuat. WordPress mendeteksi versi terinstal di situs Anda dan meminta Anda untuk memilihnya sebagai default:

Namun Anda dapat memilih bahasa apa pun yang tersedia dari daftar:

Setelah mengklik tombol “Tambah Baru”, akan muncul perancang formulir.

Mengubah nama formulir

Pertama-tama, kita perlu memasukkan nama formulir kita agar tidak tersesat dalam daftar formulir jika jumlahnya terlalu banyak. Untuk melakukan ini, cukup klik kata “Judul” di bagian atas layar:

Setelah ini, kolom teks akan muncul di mana kita memasukkan nama dengan deskripsi:

Setelah halaman disegarkan, Anda akan melihat pesan berikut:

Anda dapat menyalin kode pendek yang diusulkan dan menempelkannya ke halaman yang Anda perlukan.
Namun Anda dapat melakukannya nanti setelah Anda menyiapkan formulir. Pilihan ada padamu.

Mengubah Templat formulir

Templat formulir adalah kode HTML biasa yang mendefinisikan tampilan formulir Anda. Secara default, ini berisi 4 bidang (Nama, Email, Subjek, dan Pesan) dan tombol kirim formulir. Ini terlihat seperti ini:

Anda dapat menukar blok hanya dengan memotong dan menempelkan kodenya di mana saja.
Misalnya, kita dapat menukar kolom alamat email dan nama pelanggan:

Atau kita bisa menghilangkan kolom “Subjek” agar tidak muncul di formulir kita. Untuk melakukan ini, cukup hapus blok teks yang sesuai di template kami:

Tanda bintang di sebelah kode elemen berarti bahwa bidang ini wajib diisi dan hingga klien memasukkan nilai tertentu, formulir tidak akan dikirimkan:

Bagaimana cara menambahkan field baru ke formulir

Bayangkan Anda perlu menambahkan kolom dengan alamat situs web ke formulir standar. Perancang formulir plugin ini memungkinkan Anda mengimplementasikan rencana Anda tanpa masalah. Cukup gunakan tombol “Buat tag”:

Saat diklik, daftar besar kemungkinan bidang tambahan akan muncul:

Yang harus Anda lakukan adalah memilih jenis bidang yang Anda perlukan dan melakukan sejumlah langkah sederhana.

Jangan khawatir. Meskipun pengaturannya terlihat menakutkan, sebenarnya sangat sederhana :-)

Kotak centang “Bidang wajib diisi” memungkinkan Anda menyetel pemeriksaan tambahan dan selama bidang ini tetap kosong atau memiliki nilai yang salah, formulir tidak akan dikirimkan. Hampir semua jenis bidang memiliki pengaturan ini:

Selain itu, banyak bidang formulir kami memiliki pengaturan nama, ID elemen, dan kelas CSS yang sama, sehingga Anda dapat mengubah tampilan bidang ini. Mereka hadir di hampir semua bidang:

Bidang "Nama" adalah yang paling penting; digunakan dalam Templat formulir dan Templat surat.

Namun selama menggunakan plugin ini, saya tidak pernah perlu mengubah atau mengatur nilai atribut tersebut. Kemungkinan besar Anda juga tidak membutuhkannya. Tapi saya harus memberitahu dan memperkenalkan mereka kepada mereka :-)

Semua kolom teks di konstruktor formulir kami memiliki kolom tambahan dengan ukuran kolom itu sendiri dan panjang maksimum nilainya, ini dia:

Selain itu, bidang tertentu, seperti URL atau beberapa bidang lain selain bidang teks biasa, memiliki pengaturan khusus sendiri. Misalnya, bidang URL kami memiliki pengaturan tambahan:

Saya tidak akan mempertimbangkan sepenuhnya semua pengaturan, karena... jumlahnya terlalu banyak dan spesifik untuk setiap jenis bidang. Nah, jika tiba-tiba Anda masih membutuhkan informasi ini, maka tulislah di komentar postingan ini dan saya akan menyiapkan ulasan tambahan tentang pengaturannya.

Sekarang kita perlu menambahkan kode untuk bidang ini ke formulir Templat formulir.
Untuk melakukan ini, Anda perlu menyalin kode yang diusulkan dan menempelkannya ke formulir di sebelah kiri:

Misalnya, saya ingin menempatkan kolom dengan alamat situs web setelah nama klien. Saya perlu memasukkan kode yang mirip dengan bidang lain, yaitu menambahkan paragraf, jeda baris, dan memasukkan kode pendek untuk bidang baru ini:

Nah, agar nilai field ini dapat dikirimkan kepada kami melalui email, nilai ini perlu disalin:

Dan rekatkan ke kolom teks di bawah ini di “Templat Email”:

Bidang lain ditambahkan dengan cara yang sama. Semuanya sederhana dan jelas :-)

Penerima dan templat surat

Sekarang mari kita lihat pengaturan yang diperhitungkan saat mengirim pesan. Dalam kasus kami, ini adalah penerima (hampir selalu Anda) dan templat surat yang akan dikirim ke alamat email yang ditentukan setelah mengirim pesan.

Pertama-tama, Anda perlu menentukan penerima yang pesan emailnya dari formulir kami akan dikirim. Secara default, alamat email dari pengaturan WordPress dimasukkan di sini.

Saya rasa Anda telah memperhatikan bahwa formulir ini menggunakan kode yang tidak dapat dipahami, seperti , . Jadi, ini adalah kolom “Nama” yang sama dari generator kolom yang saya bahas di atas:

Nah, selanjutnya Anda tinggal merapikan template surat itu sendiri:

Anda dapat menggunakan semua bidang yang Anda buat secara otomatis melalui tombol “Buat tag”, atau Anda dapat membiarkan formulir standar jika Anda belum mengubah apa pun di pengaturan.

P.S. Dalam pengaturan plugin ini ada peluang yang cukup menarik - untuk menentukan penerima pesan kedua. Sejujurnya, saya tidak bisa langsung memikirkan mengapa hal ini diperlukan, tetapi karena ada peluang, seseorang akan tetap memanfaatkannya.

Menyiapkan pesan

Nah, plugin pengirim pesan macam apa ini jika tidak memungkinkan Anda mengubah teks notifikasi atau tulisan? Dan plugin Formulir Kontak 7 tidak terkecuali. Ini memungkinkan Anda menerjemahkan teks atau pesan kesalahan apa pun:

Masalah Dikenal

Kebetulan saat menggunakan kontrol non-standar, seperti email atau url, tampilan elemen individual pada halaman akan berbeda. Misalnya, perhatikan bidang “Alamat situs web Anda” di formulir itu sendiri:

Apakah kamu tidak melihat? Dan saya akan menunjukkannya lebih dekat:

Secara umum, masalahnya adalah tampilan bidang tersebut secara visual berbeda dari bidang teks standar. Bandingkan dengan kolom “Nama Anda”, Anda akan langsung memahami semuanya.

Ada dua kemungkinan solusi di sini. Hal pertama adalah menambahkan gaya yang sesuai ke file style.css tema Anda, atau mengubah tipe url menjadi teks di Templat formulir, maka semuanya akan baik-baik saja:

Kesimpulan

Menurut saya ulasan tentang cara membuat formulir umpan balik dapat dianggap sepenuhnya tertutup, dan topiknya sendiri dianggap naik turun.

Tentu saja, pasti akan ada seseorang yang tidak berhasil atau ingin menyarankan plugin lain yang serupa untuk dipertimbangkan. Saya selalu dengan senang hati mengajukan pertanyaan dan saran! Jangan ragu untuk bertanya kepada mereka di komentar :-)

Jika Anda ingin mengucapkan terima kasih atas materinya, Anda bisa melakukannya di sini :-)

Jika Anda menemukan kesalahan, silakan sorot sepotong teks dan klik Ctrl+Masuk.