Buat halaman kontak untuk WordPress dengan Formulir Kontak 7

Halaman kontak memainkan peran penting dalam sebuah situs web, berfungsi sebagai jembatan antara pengunjung dan pemilik. Artikel ini akan menunjukkan kepada Anda cara membuat halaman kontak sederhana dengan formulir email menggunakan plugin Formulir Kontak 7 dan menyelesaikan masalah selama instalasi, penggunaan plugin, dan integrasi reCAPTCHA.

Instal plugin Formulir Kontak 7

Plugin Formulir Kontak 7 oleh Takayuki Miyoshi adalah plugin gratis untuk membuat formulir kontak dan mengumpulkan umpan balik pelanggan. Anda melanjutkan untuk menginstal plugin secara normal dari sumber wordpress.org.

Formulir Kontak 7

Hanya plugin formulir kontak lainnya. Sederhana namun fleksibel.

wordpress.org

Petunjuk membuat formulir kontak dengan Formulir Kontak 7

Untuk membuat formulir baru, buka menu Formulir kontak > Buat formulir baru (atau Membentuk > Tambah baru)

Setelah mengklik buat formulir baru, Anda akan memiliki formulir seperti yang ditunjukkan di bawah ini:

Di atas bingkai editor Anda akan melihat banyak Tag: email, URL, file, …, di sini Anda akan memilih jenis bidang yang didukung oleh plugin ini untuk dibuat. Saat Anda perlu menggunakan tag, cukup klik pada tag itu, bingkai konfigurasi akan ditampilkan untuk Anda atur.

Setelah konfigurasi selesai, klik tombol Masukkan ke dalam Formulir untuk menambahkan bidang yang baru dibuat.

Saat ini memiliki beberapa bidang sebagai berikut:

• Surel: Bidang khusus digunakan untuk tamu untuk memasukkan email mereka, kemudian sistem email akan memahami bahwa ini adalah email kontak agar Anda dapat menekan balasan dengan cepat.
• Tanggal: Bidang terpisah untuk memilih tanggal, dengan fitur pemilihan kalender bawaan.
• URL: Bidang yang digunakan untuk memasukkan tautan.
• Nomor telepon: Bidang khusus untuk memasukkan nomor telepon.
• Kotak centang: Bidang memilih nilai yang telah ditentukan sebelumnya melalui penandaan.

Selain itu, masih banyak sekolah lain, detailnya bisa dilihat di https://contactform7.com/tag-syntax/

Perhatikan bahwa jika Anda mengonfigurasi formulir dengan kemampuan mengirim email, di tab Konfigurasi SuratAnda harus secara manual memasukkan nama bidang terkait yang baru saja Anda buat di sini agar konten email yang dikirim berisi semua informasi yang Anda butuhkan.

Setelah konfigurasi selesai, ingatlah untuk menekan Menyimpan untuk menyimpan Templat formulir.

Masukkan formulir kontak di Posting/Halaman

Cara menggunakan formulir sangat sederhana, setelah Anda melanjutkan Menyimpan form, copy saja shortcode yang ada di kotak biru di atas. Kemudian masukkan kode pendek ini di Posting, Halaman, atau di mana pun Anda mau.

Dan nikmati hasilnya.

Bot anti spam reCAPTCHA terintegrasi

Setelah berhasil membuat formulir kontak, jika diserang oleh bot, lanjutkan untuk mengirim surat massal, yang menghabiskan sumber daya. Bergantung pada kebutuhan Anda, Anda dapat mempertimbangkan untuk mengintegrasikan reCAPTCHA Google untuk melawan bot spam.

Petunjuk untuk mengintegrasikan reCAPTCHA

Pertama, Anda perlu mendaftarkan akun reCAPTCHA di https://www.google.com/recaptcha/admin

Silakan masuk dengan akun Google Anda. Kemudian masukkan informasi seperti di bawah ini:

Bagian Label, Anda memasukkan nama untuk diingat agar mudah dikelola. Kemudian centang versi reCAPTCHA yang ingin digunakan, disini saya sarankan menggunakan reCAPTCHA v3.

Dalam Domain, Anda mendeklarasikan nama domain yang akan digunakan. Perhatikan bahwa jika Anda memiliki beberapa subdomain seperti: lienhe.vietrick.com, huongdan.vietrick.comlalu tinggal masukkan domain utama vietrick.com cukup.

Kemudian ingat untuk mencentang kotak: Terima Persyaratan Layanan reCAPTCHA. Akhirnya tekan KIRIM untuk menyelesaikan pendaftaran.

Setelah pendaftaran berhasil, pada bagian manajemen captcha, Anda akan mendapatkan 2 parameter penting:

• Kunci Situs
• Kunci rahasia

Selanjutnya, kembali ke halaman admin wordpress, masuk ke menu Formulir kontak > Integrasi. Kemudian tekan tombol Pengaturan bawaan.

Selanjutnya, Anda paste Kunci Situs Dan Kunci rahasia terdaftar di atas dalam kotak yang sesuai dan kemudian simpan. Integrasi yang berhasil akan ditampilkan seperti di bawah ini.

Sekarang kembali ke halaman kontak yang baru saja Anda buat. Di pojok kanan layar akan ada lencana reCAPTCHA. Pada titik ini, selamat, integrasi selesai.

Tampilkan reCAPTCHA hanya saat menggunakan kode pendek

Secara default, reCAPTCHA akan menampilkan lencana kecil di pojok kanan layar. Dalam versi 7 Formulir Kontak yang baru saja diperbarui. Setelah Anda mengintegrasikan reCAPTCHA v3, lencana ini akan muncul di mana-mana: Beranda, postingan, halaman, dll. Terlepas dari apakah Anda menggunakan formulir Kontak 7 atau tidak. Semoga masalah ini akan diselesaikan oleh penulis dalam pembaruan yang akan datang.

Setelah meneliti dan meneliti, saya menemukan solusi efektif untuk masalah ini:

• Pastikan Formulir Kontak dan reCAPTCHA berfungsi dengan baik
• Lebih dari sekadar menyembunyikan lencana dengan CSS: display:none
• Tampilkan lencana hanya saat menggunakan kode pendek di pos/halaman
• Setiap kali saya mengupdate plugin Contact Form 7, saya harus melakukannya lagi

Untuk melakukannya, buka dan edit file functions.php di jalur: wp-content/plugins/contact-form-7/includes/functions.php. Anda memasukkan kode berikut di baris terbawah file functions.php:

function my_register_cf7_js() {
    // Dequeue cf7 and recaptcha scripts, preventing them from loading everywhere
    add_filter( ‘wpcf7_load_js’, ‘__return_false’ ); // Might as well use their filter
    wp_dequeue_script( ‘google-recaptcha’ );

    // If current post has cf7 shortcode, enqueue!
    global $post;
    if ( isset( $post->post_content ) AND has_shortcode( $post->post_content, ‘contact-form-7’ ) ) {
        if ( function_exists( ‘wpcf7_enqueue_scripts’ ) ) {
            wpcf7_enqueue_scripts();
            wp_enqueue_script( ‘google-recaptcha’ );
        }
    }
}

add_action( ‘wp_enqueue_scripts’, ‘my_register_cf7_js’, 20, 0 );

Setelah menyimpan file, Anda dapat memeriksanya lagi. reCAPTCHA sekarang hanya diizinkan berjalan ketika kami menggunakan kode pendek Formulir Kontak 7.

Jika Anda hanya menggunakan plugin Formulir Kontak 7 hanya di halaman kontak, Anda dapat menggunakan kode berikut untuk memastikan efisiensi absolut:

// Deregister Contact Form 7 JavaScript & Css, reCAPTCHA script files on all pages without a form
function contactform2_deregister_javascript_css() {
    if ( ! is_page( ‘contact’ ) ) {
        wp_deregister_script( ‘contact-form-7’ );
		wp_deregister_style( ‘contact-form-7’ );
		
		wp_deregister_script( ‘google-recaptcha’ );
	}
	
}
add_action( ‘wp_enqueue_scripts’, ‘contactform2_deregister_javascript_css’, 100 );

Di dalamnya, Anda mengganti contact dengan siput alamat halaman kontak Anda.

Pertanyaan

Jika Anda memiliki komentar, silakan tinggalkan komentar di bawah ini.