Membuat Formulir Kontak dengan Plugin Contact Form 7

Membuat formulir kontak sebenarnya bukanlah hal yang sulit jika kita menggunakan website dengan CMS WordPress. Dengan adanya formulir kontak, pengunjung dapat berinteraksi dan menghubungi kita dengan mudah, sehingga pengunjung tidak perlu membuka aplikasi email untuk mengirim email kepada pemilik website.

Saat ini sudah banyak tersedia plugin agar dapat membuat formulir kontak maupun formulir yang lain dengan mudah, tentunya dari beberapa plugin tersebut ada yang gratis maupun berbayar untuk digunakan. Plugin premium untuk membuat formulir kontak seperti PirateForms, Gravity Forms, WPForms, NinjaForms, dan untuk yang versi gratis lebih banyak jumlahnya.

Sesuai judul pada artikel ini, kita akan membahas salah satu plugin untuk membuat formulir kontak dengan CMS WordPress dengan menggunakan plugin terpopuler yaitu Contact Form 7.

Apa itu Plugin Contact Form 7?

Membuat Formulir Kontak

Plugin Contact Form 7 merupakan plugin yang paling banyak diunduh dan digunakan untuk membuat formulir kontak pada CMS WordPress. Contact Form 7 memiliki tampilan yang sederhana dan tentunya mudah untuk digunakan. Plugin ini tersedia secara gratis yang dapat Anda download pada Menu Add New Plugin atau juga bisa di website wordpress.org.

Fitur yang tersedia pada Contact Form 7

Berikut adalah beberapa fitur menarik yang tersedia pada plugin Contact Form 7 sebagai berikut:

  • Memiliki tampilan yang user friendly sehingga mudah untuk digunakan.
  • Terintegrasi dengan fitur perlindungan spam dengan menggunakan metode reCaptcha, Akismet maupun menggunakan tambahan plugin.
  • Memiliki shortcode yang dapat membantu formulir kontak dipasang dimana saja.
  • Dapat customisasi tampilan formulir kontak dengan menggunakan tag dan kode yang mudah dipahami.
  • Mendukung untuk digunakan dalam berbagai bahasa.
  • Penggunaan kormulir kontak tidak dibatasi, sehingga Anda dapat membuat sebanyak mungkin jenis formulir kontak.
  • Terintegrasi dengan banyak plugin untuk meningkatkan fungsionalitas dari Contact Form 7 seperti plugin WP Bakery misalnya.

Baca: Plugin Cache WordPress Terbaik Untuk Optimasi Website

Instalasi Plugin Contact Form 7

Contact Form 7 dapat di install melalui dashboard admin CMS WordPress, sebelumnya pastikan terlebih dahulu Anda sudah login pada halaman admin website Anda. Selanjutnya klik menu Plugins > Add New kemudian ketik Contact Form 7 pada kolom pencarian di halaman menu tersebut.

Kemudian akan muncul banyak plugin yang tertampil yang berkaitan dengan plugin Contact Form 7. Pastikan plugin Contact Form 7 dengan nama pembuat Takayuki Miyoshi lalu klik tombol Install Now. Seperti bisa dilihat pada gambar dibawah ini.

Install Contact Form 7

Setelah klik tombol Install Now, tunggulah beberapa saat karena Wordpres akan mendownload dan menginstall plugin tersebut pada website Anda. Jika proses sudah selesai, maka tombol tersebut akan berubah menjadi Active lalu klik tombol tersebut agar dapat mengaktifkan Contact Form 7 pada website Anda.

Membuat Formulir Kontak dengan Contact Form 7

Saat plugin Contact Form 7 sudah aktif, Anda dapat mengakses plugin tersebut dengan cara klik menu Contact > Contact Forms untuk mengetahui daftar formulir kontak yang sudah dibuat.

Ketika Anda sudah dapat akses ke Contact Forms maka tampilannya sebagai berikut.

Dashboard Contact Form 7

Pada bagian atas terdapat tombol Add New untuk membuat daftar formulir kontak baru. Pada kasus ini kita akan melakukan edit pada daftar formulir kontak yang sudah ada, caranya yaitu dengan mengarahkan kursor pada judul Contact Form 1, lalu akan muncul tombol Edit | Duplicate kemudian klik tombol Edit.

Ketika sudah klik tombol Edit, maka tampilannya seperti gambar dibawah ini.

Halaman Kontak Form
T

Seperti yang sudah saya sebutkan pada list fitur yang tersedia pada plugin ini, Contact Form 7 memiliki shortcode yang dapat ditampilkan pada halaman maupun post yang Anda inginkan, shortcode dari gambar diatas terdapat dibawah judul.

Anda dapat mengatur dan mengedit formulir kontak dengan klik tab yang ada pada gambar diatas.

  • Tab Form, digunakan untuk mengatur dan mengedit tampilan halaman formulir kontak yang akan dibuat.
  • Tab Mail, digunakan untuk mengatur konfigurasi pengiriman email.
  • Tab Messages, digunakan untuk mengatur notifikasi pesan ketika pesan terkirim atau gagal.
  • Tab Additional Settings, digunakan untuk menambah customisasi dari konfigurasi lain.

Baca: Apa itu cache? Ini Penjelasan Mengenai Cache

Menampilkan Formulir Kontak pada Halaman

Dengan menggunakan shortcode seperti yang sudah dijelaskan diatas, Anda dapat dengan bebas mengatur formulir kontak untuk ditampilkan dimana saja. Untuk menampilkannya cukup mudah, Anda dapat copy shortcode milik yang tertera pada daftar formulir kontak, lalu paste pada halaman yang ingin ditampilkan.

Contoh untuk menampilkannya seperti gambar dibawah berikut.

Untuk mengetahui tampilan formulir kontak, caranya dengan klik tombol Preview atau Publish, lalu Anda bisa melihat tampilan dari halaman website yang sudah ditambahkan shortcode Contact Form 7, untuk tampilan defaultnya seperti dibawah ini.

Membuat Formulir Kontak

Kustomisasi Contact Form 7

Agar dapat melakukan kustomisasi Contact Form 7, perlu Anda ketahui beberapa contoh tag HTML seperti yang digunakan pada plugin ini. Disini saya akan mencoba menambahkan input nomor telpon.

Coba perhatikan gambar diatas.

Pada bagian Field type saya centang untuk melakukan validasi form disisi client/pengguna, ketika pengguna mengirim formulir kontak dengan mencoba mengosongkan formulir tersebut, maka akan muncul pesan error “The field is required.”

Pada bagian Name untuk menampilkan laper formulir, gambar diatas saya isi dengan nama Telephone, lalu saya centang Use this text as the placeholder of the field agar pada kolom formulir kontak terdapat nama yang berisikan pada bagian Default Vaue, berikut adalah gambar ketika telah menambahkan formulir telephone pada Contact Form 7.

Hasil Telephone

Setting Konfigurasi Pengiriman Email

Klik tab Email agar dapat setting konfigurasi pengiriman email.

Konfigurasi Email

Bagian konfigurasi pada tab Mail ini terdapat kode tag yang dapat dimasukan ke dalam form pengaturan pesan. Daftar tag yang tersedia merupakan tag yang telah dibuat dan disave pada tab Form.

Seperti yang bisa dilihat pada gambar diatas, terdapat tag seperti [your-name] [your-email] [your-subject] [Telephone] [your-message] lalu disesuaikan dengan kalimat/teks yang dibuat, misalnya pada form Message Body berisi From: [your-name].

Berikut ini adalah contoh pengaturan untuk pengiriman email yang perlu Anda perhatikan:

  • To – Berisikan alamat email untuk menerima pesan dari yang dikirim oleh website. Harap gunakan alamat email yang aktif.
  • From – Berisikan nama pengirim yang bertujuan sebagai identitas website, biasanya alamat email yang dapat di isi hanya alamat yang menggunakan akhiran domain website Anda, seperti contoh pada gambar diatas.
  • Subject – Berisikan judul pesan yang dikirim, pada gambar diatas menggunakan tag [your-subject]
  • Additional Headers – Berisikan alamat email pengirim yang sudah mengisi pada form di website, biarkan default dan tidak perlu diubah.
  • Message Body – Berisikan tampilan pesan untuk mengatur format yang akan diterima oleh Anda sebagai pemilik website.

Baca: Memasang Google Analytics Pada Website Anda

Integrasi reCAPTCHA Agar Terhindar dari Spam

Pastikan Anda sudah login dan dapat mengakses halaman dashboard CMS WordPress, kemudian silakan klik menu Contact > Integration > Setup Integration pada bagian reCAPTCHA, lalu masukan site Key dan secret Key yang sudah Anda dapatkan pada website reCAPTCHA. Contact Form 7 hanya mendukung reCAPTCHA v3 yang berarti saat membuat akun reCAPTCHA, Anda harus memilih v3 juga.

Integrasi reCAPTCHA

Kesimpulan

Contact Form 7 tidak hanya digunakan untuk membuat formulir kontak, karena plugin ini juga dapat membuat formulir untuk pendaftara, pembayaran, form upload dokumen, quiz, dan masih banyak fungsi dari plugin ini.

Contact Form 7 sangat memudahkan pengembang website dalam membuat kustomisasi form, juga terdapat shortcode yang dapat menampilkan form ini dimana saja, untuk kekurangannya sendiri Contact Form 7 dibutuhkan pengetahuan dasar HTML agar dapat mengedit tampilan pesannya dan mungkin sedikit menyulitkan untuk mengedit form bagi orang awam. Namun, pada halaman membuat form/add new sendiri terdapat link dokumentasi yang dapat membantu Anda membuat berbagai jenis form.

Jika ada yang perlu ditanyakan, silakan bertanya pada kolom komentar dibawah ini.

Leave a Comment