Bikin Form Kontak dengan Contact Form 7

Halaman kontak merupakan salah satu komponen yang biasanya ada dalam suatu website, tidak terkecuali website WordPress. Namun salah satu keunggulan WP ini yaitu banyaknya pilihan plugin yang dapat mempermudah pembuatan formulir, salah satu yang gratis dan populer adalah Contact Form 7.

Sebagai pembuat formulir, Contact Form 7 bukan saja hanya untuk membuat form kontak seperti hubungi kami, hubungi saya, dan sebagainya, tetapi dapat juga untuk formulir lain yang dibutuhkan bagi suatu situs online dalam aktifitasnya, termasuk form survei.

Contact Form 7 juga telah mendukung filter spam seperti Akismet(link), reCAPTCHA untuk ngeblok spambots, dan menggunakan blacklist komentar, Anda dapat memblokir pesan yang berisi kata kunci tertentu atau dikirim dari IP tertentu. Pengaturan blokir ini mengikuti pengaturan diskusi (komentar) bawaan WordPress.

Setelah pengunjung menginput isi kontak, pemilik atau admin akan menerima email sesuai pengaturan yang telah dilakukan pada Contact Form. Tetapi secara default, Contact Form 7 tidak menyimpan pesan yang dikirimkan atau tidak akan masuk ke database dan tidak dapat dilihat pada halaman administrator WordPress.

Oleh karena itu, Anda dapat kehilangan pesan penting selamanya jika server email Anda mengalami masalah atau Anda membuat kesalahan dalam konfigurasi email.

Karena bersifat gratis, Contact Form 7 bersifat dasar, apabila ingin memilki fitur lainnya dapat menginstall plugin lain pendukung Contact Form 7, termasuk untuk mendesain tampilan formulir. Meski addon-addon ini bukan dibuat oleh pembuat Contact Form 7.

Kecuali plugin flamingo sebagai salah satu addon yang dibikin oleh pembuat Contact Form 7 sendiri yang bertujuan untuk menyimpan pesan ke dalam database, sehingga Anda tidak perlu lagi khawatir kehilangan pesan penting karena masalah server email atau salah konfigurasi dalam pengaturan email.

Cara Membuat Formulir Kontak

Setelah Contact Form 7 diinstall dan diaktifkan, akan tampil satu item menu sebelah kiri yaitu Contact, apabila di klik akan dibawa ke list atau daftar kontak form. Secara default sudah tersedia Contact form 1 yang dapat dijadikan contoh.

list-contact-form

Klik Add New untuk membuat kontak form baru, Anda akan mendapatkan halaman form konfigurasi Form.

Pada Form ini tempat Anda memberikan kolom-kolom isian beserta jenis isiannya, bisa berupa teks, email, nomor, telepon, checkbox, file, sampai submit (mengirim).

Ketika membuat Add New, secara default Contact Form 7 akan memberikan isian form nama, email, subjek, dan pesan. Anda dapat menambah, mengurangi, atau mengganti isian form tersebut sesuai kebutuhan. Om akan coba memberi contoh mengubah inputan kontak ke dalam Bahasa Indonesia.

form default
Formulir secara default

Pertama beri judul kontak, ganti tulisan selain yang ada di dalam tanda [ ] ke dalam Bahasa Indonesia, sedangkan untuk form submit, yang diganti berada di dalam tanda kutip dua “”.

Kita juga coba menambahkan nomor telepon ke dalam form, arahkan kursor setelah </label> Email, dan tekan enter dua kali agar dapat memberikan jarak.

form-change1

Copy mulai <label> sampai </label> dari isian yang lain, misalnya email, dan paste di bawahnya, hapus mulai tanda “[“ sampai tanda tutupnya “]”, dan ganti label seperti berikut, dan taruh kursor di tempat akan tambah inputan, lalu klik tombol tel yang berada di atas kotak.

form-change2form-change3

Akan tampil popup konfigurasi, untuk menjadikan inputan ini wajib diisi, centang

  • Field Type, apabila tidak wajib biarkan saja menjadi kosong.
  • Name, biarkan seperti default, name ini akan digunakan dalam pengiriman email nantinya.
  • Default Value, nilai default yang akan tampil, apabila hanya sebagai placeholder (hanya tampil sebagai informasi centang Use this text as the placeholder of the field
  • Id attribute dan Class attribute ditambakan apabila ingin memberikan style CSS.

*Untuk informasi lengkap pengisian field dapat dilihat pada link yang terdapat di kanan atas setiap form-tag.

tag field info contact form 7

Klik Insert Tag. Jadinya akan seperti ini.

form-change4

Klik Save.

Pengaturan Email

Selanjutnya klik Email untuk konfigurasi email.

  • To, kemana nantinya email akan dikirim.
  • From, secara default diambil nama pengirim dari isian nama pengunjung, dapat diketahui dari dalam kurung [your-name] (lihat gambar di bawah). Sedangkan emailnya menggunakan email yang telah kita setting sebelumnya. Baca Integrasi Kirim Email WordPRess dengan SMTP Email Hosting
  • Subject, akan masuk ke subjek pesan email, [your-subject] lihat gambar di bawah.
  • Additional Headers, ketika penerima dari To di atas menerima email dan akan membalas dengan mengklik reply akan diarahkan ke email pengunjung yang menginput form
  • Message Body, isi dari pesan yang masuk ke isi pesan email. Secara default telah terdapat From, Subject dan Message Body.

form-change5

Om akan memodifikasi sedikit seperti berikut

Selain itu masih ada opsional lain apabila ingin, yaitu Messages, menterjemahkan pesan inputan menggunakan kata-kata sendiri. Dan Pengaturan tambahan (Additional Settings), dimana Anda dapat menambah kode penyesuaian yang dimasukkan ke dalam kolom additional. Untuk detail kode dan fungsinya dapat dilihat melalui url Additional Settings.

translate-contact-formadditional-settings-contact-form

Cara Menambahkan Form Kontak ke Halaman/Laman

Untuk menambahkan formulir kontak yang telah dibuat tadi cukup mudah. Buka kembali daftar (list) kontak dengan klik menu Contact. Klik pada shortcode dari form yang tadi dibuat dan copy shortcode.

copy-shortcode

Buka Laman >> [halaman ingin diberi form kontak]. Paste shortcode di dalam isian deskripsi Kontak seperti ini:

paste-shortcode-contact-form

Klik Perbarui dari laman tersebut.

Catatan: nomor id bisa berbeda-beda.

Coba cek laman yang telah diberi form, kalau telah tampil, coba tes lakukan pengisian dan pengiriman email.

Email dapat terkirim apabila website telah berada di hosting dan telah dilakukan pengaturan Cara pengaturan email WordPress, kecuali localhost Anda telah disetting untuk dapat melakukan pengiriman email.


Cara Perbaiki Contact Form 7 v5.01 dan Balik ke reCaptcha v2

4 pemikiran untuk “Bikin Form Kontak dengan Contact Form 7”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *