Cara Buat Form Kontak dengan WordPress Plugin Contact Form 7

By Hans Richardo

cara-buat-contact-form-7

Salah satu halaman penting yang harus ada di dalam sebuah website adalah Halaman Kontak. Halaman ini berfungsi sebagai sarana di mana pengunjung website dapat berkomunikasi atau menghubungi pengelola website secara langsung.

Untuk memudahkan pengunjung berkomunikasi atau mengirimkan sebuah pesan, maka biasanya perlu disediakan sebuah form di halaman Kontak ini. Di mana form ini dapat diisi oleh pengunjung untuk bisa langsung mengirimkan pesan kepada pengelola website.

Tujuannya tentu agar pengunjung tidak perlu repot-repot untuk mengirim email, SMS, atau menghubungi via telepon kepada pengelola website. Contohnya adalah halaman Kontak pada website BelajarBisnisInternet.com ini. Halaman Kontak ini bisa juga dinamakan sebagai halaman Hubungi Kami, Contact Us, Contact Me, Kontak Kami, dan sebagainya.

Salah satu cara mudah untuk membuat Form Kontak pada sebuah website dengan platform WordPress adalah dengan menggunakan sebuah plugin yang bernama Contact Form 7 (Anda bisa mempelajari secara lengkap dokumentasinya di sini).

Plugin Contact Form 7 sebenarnya tidak hanya untuk membuat Form Kontak saja, tetapi plugin ini juga dapat digunakan untuk berbagai keperluan membuat form di dalam sebuah website. Contohnya Anda bisa membuat Form Order/Pemesanan, Form Konfirmasi Pembayaran, Form Pendaftaran, dll dengan bantuan plugin ini.

Namun pada tutorial kali ini kami akan membahas secara spesifik bagaimana cara membuat Form Kontak atau Form Hubungi Kami.

Cara Install Contact Form 7

  • Pilih menu Plugins – Add New
  • Ketik “contact form 7” pada kolom pencarian
  • Setelah muncul plugin Contact Form 7 by Takayuki Miyoshi, klik tombol Install Now
  • Setelah proses instalasi selesai, klik Activate Plugin

01-install-contact-form-7

02-activate-contact-form-7

Layar Admin Contact Form 7

Setelah plugin Contact Form 7 Anda aktif, maka akan muncul menu baru pada Dashboard WordPress Anda, yaitu menu Contact, silahkan klik menu Contact tersebut untuk masuk ke dalam daftar Contact Forms seperti gambar berikut.

03-layar-admin-contact-form-7

Anda bisa klik Add New untuk membuat sebuah form baru atau Edit salah satu Contact Form yang tersedia, maka kemudian Anda akan masuk ke sebuah halaman pengaturan Contact Form seperti pada gambar di bawah.

04-layar-admin-contact-form-7

Berikut adalah penjelasan dari fungsi-fungsi yang ada pada layar admin Contact Form seperti gambar di atas:

(1) Judul/Nama dari Contact Form. Buatlah judul sesuai dengan fungsi dari form yang Anda buat. Misalnya Anda membuat form untuk pendaftaran sebuah acara, maka Anda bisa beri judul Form Pendaftaran.

(2) Shortcode dari Contact Form. Shortcode ini berfungsi sebagai kode untuk memanggil form yang telah Anda buat. Jadi setelah form jadi, Anda bisa copy Shortcode ini kemudian tempelkan (paste) pada halaman di mana form ini digunakan.

(3) Tombol Duplicate untuk menduplikasi form (membuat form yang sama persis), tombol Delete untuk menghapus form, dan tombol Save untuk menyimpan form.

(4) Tab Form, pada bagian inilah Anda bisa membuat, mengedit, dan mengatur tampilan sebuah form. Field-field apa saja yang akan digunakan pada sebuah form dapat diatur di bagian ini.

(5) Tab Mail, untuk mengatur isi email dan menkonfigurasi email yang akan dikirim melalui form.

(6) Tab Messages, untuk mengatur pesan kesalahan (pesan error) yang muncul saat terjadi kesalahan dalam proses pengisian form.

(7) Tab Additional Settings, untuk menambahkan pengaturan tambahan pada form, misalnya setelah form berhasil di submit maka pengunjung akan di-redirect ke sebuah halaman, maka Anda bisa tambahkan kode javascript di bagian ini.

(8) Tag Generator, untuk me-generate kode Tag sebuah Field secara otomatis. Misalnya Anda ingin membuat Field text maka Anda bisa klik tombol text, setelah akan muncul sebuah popup seperti gambar berikut:

05-layar-admin-contact-form-7

(9) Form Editing Field, untuk membuat atau mengedit field-field dari sebuah Form. Anda bisa menggunakan kode HTML agar tampilan Form Anda lebih rapi. Gunakan kode <p> dan </p> yang mengapit sebuah field untuk memisahkan setiap field-field yang ada, dan gunakan kode <br /> untuk pindah ke baris baru.

Cara Buat Form Kontak/Hubungi Kami

Setelah Anda mengetahui fungsi dari masing-masing bagian pada layar Admin Contact Form 7, kini saatnya Anda mulai membuat Form Kontak.

Sebagai contoh pada tutorial ini saya akan menggunakan nama “Form Hubungi Kami” sebagai judul dari Form Kontak yang saya buat. Untuk membuat sebuah form baru langkah-langkahnya adalah:

  1. Pilih menu Contact – Add New
  2. Masukkan Judul Form
  3. Edit Field sesuai form yang ingin dibuat

06-buat-form-hubungi-kami

Secara default setiap kali kita membuat sebuah Form dengan Contact Form 7 maka akan ada 4 buah field seperti pada gambar di atas. Ini sudah sesuai dengan field-field yang memang diperlukan di dalam sebuah Form Kontak, yaitu:

  1. Field Nama untuk pengunjung mencantumkan Nama mereka.
  2. Field Email untuk pengunjung mencantumkan Alamat Email (Note: Field Email WAJIB ada setiap kali Anda membuat form, karena melalui alamat Email ini Anda akan berkomunikasi atau melakukan follow up dengan pengunjung)
  3. Field Judul Pesan untuk pengunjung mencantumkan judul atau penjelasan singkat tentang isi pesan mereka.
  4. Field Isi Pesan untuk pengunjung mencantumkan pesan atau pertanyaan.
  5. Tombol Submit untuk mengirim form yang telah diisi.

Namun Anda tetap perlu mengubah beberapa bagian pada Form tersebut agar menjadi lebih sempurna, terutama Anda perlu mengubahnya ke dalam Bahasa Indonesia apabila mayoritas pengunjung website berasal dari Indonesia.

Ada 2 cara yang bisa Anda lakukan, yaitu:

1. Dengan langsung mengetik kode Tag Field

Apabila Anda sudah cukup familiar atau terbiasa dengan kode Tag Field, Anda bisa saja langsung mengetik, membuat, atau mengubah kode-kode yang ada pada Form Editing Field. Contohnya Anda bisa langsung membuat kode untuk Field Text Nama:

<p>Nama Anda (wajib diisi)<br />
[text* nama-anda] </p>

Mari kita jabarkan satu per satu bagian dari kode di atas:

<p>  Kode pembuka sebuah paragraf

<br /> Kode untuk pindah ke baris baru

[text* nama-anda]  Kode Tag Field pada Contact Form 7, di mana text berarti jenis field ini adalah Textfield, * berarti field ini wajib diisi, nama-anda adalah judul/nama dari field ini

</p>  Kode penutup sebuah paragraf

2. Dengan menggunakan Tag Generator

Jangan khawatir apabila Anda belum menguasai kode Tag Field, Anda bisa menggunakan Tag Generator yang disediakan oleh Contact Form 7. Misalnya Anda ingin membuat sebuah Text Field, maka Anda bisa klik tombol text yang ada pada Tag Generator, seperti gambar berikut:

07-buat-form-hubungi-kami

08-buat-form-hubungi-kami

09-buat-form-hubungi-kami

Silahkan Anda teruskan dengan memasukkan field-field lain yang diperlukan untuk membuat sebuah Form Kontak, yaitu:

  1. Field Nama (wajib diisi)
  2. Field Email (wajib diisi)
  3. Field Judul Pesan (wajib diisi)
  4. Field Isi Pesan (wajib diisi)
  5. Tombol Submit

Sehingga pada akhirnya Form yang Anda buat akan menjadi seperti pada gambar berikut:

10-buat-form-hubungi-kami

Atau silahkan Anda copy kode berikut dan paste pada Form Editing Field Anda.

<p>Nama Anda (wajib diisi)<br />
[text* nama-anda] </p>
 
<p>Email Anda (wajib diisi)<br />
[email* email-anda] </p>
 
<p>Judul Pesan(wajib diisi)<br />
[text* judul-pesan] </p>
 
<p>Isi Pesan (wajib diisi)<br />
[textarea* isi-pesan] </p>
 
<p>[submit "Kirim"]</p>

Atur Email Yang Akan Dikirim

Setelah Anda selesai membuat field-field yang diperlukan untuk Form Kontak, sekarang saatnya Anda untuk mengatur isi dan data dari email yang akan dikirim melalui form tersebut. Silahkan ada klik Tab Mail yang ada di bagian atas.

Beberapa hal yang perlu Anda ketahui adalah:

  • Pada bagian ini Anda bisa mengatur 2 buah Email, yaitu:
    • Email pertama untuk dikirimkan kepada Anda sebagai pengelola website.
    • Email kedua untuk dikirimkan kepada pengunjung yang telah mengisi Form, secara default email ini tidak aktif, untuk mengaktifkannya Anda bisa centang Use Mail (2) yang ada di bagian bawah.
  • Perhatikan kode-kode Tag Field yang telah Anda buat sebelumnya dan pastikan Anda gunakan dengan benar saat mengisi data email ini (beda 1 huruf atau simbol bisa membuat form gagal mengirimkan email).
  • Ada 2 buah Alamat Email yang perlu Anda cantumkan, yaitu:
    • Alamat Email (A) di mana email harus aktif karena akan menjadi Alamat Email yang menerima pesan dari pengunjung, email ini tidak harus sesuai dengan nama domain (Anda bisa gunakan gmail, yahoomail, dll).
    • Alamat Email (B) di mana email ini harus sesuai dengan nama domain, namun alamat email ini tidak harus aktif.

Silahkan pelajari Cara Memiliki Email dengan Nama Domain Anda.

Untuk lebih jelas bagaimana mengatur Email pada Form Kontak, silahkan lihat gambar berikut:

11-mail-form-hubungi-kami

Jangan lupa untuk klik tombol Save setelah selesai mengatur Email Form Kontak.

Ubah Pesan Kesalahan Ke Dalam Bahasa Indonesia

Langkah selanjutnya Anda perlu untuk mengubah pesan kesalahan (pesan error) ke dalam Bahasa Indonesia, agar apabila pengunjung Anda melakukan kesalahan dalam mengisi form maka dia bisa memahami dan memperbaiki kesalahannya. Silahkan ada klik Tab Messages kemudian ubah pesan kesalahan yang ada menjadi Bahasa Indonesia.

12-msg-form-hubungi-kami

Berikut adalah beberapa pesan kesalahan yang seringkali digunakan dan perlu Anda ubah:

  • Sender’s message was sent successfully: Pesan telah berhasil dikirim. Terima kasih.
  • Sender’s message failed to send: Gagal mengirim pesan. Silahkan coba kembali.
  • Validation errors occurred: Ada kesalahan pada data yang dimasukkan. Silahkan coba kembali.
  • Submission was referred to as spam: Gagal mengirim pesan. Silahkan coba kembali.
  • There are terms that the sender must accept: Anda harus menyetujui syarat dan ketentuan sebelum mengirim pesan.
  • There is a field that the sender must fill in: Data yang diisi belum lengkap.
  • Email address that the sender entered is invalid: Alamat email yang dimasukkan salah.

Jangan lupa klik tombol Save setelah selesai.

Copy Shortcode Form

Sampai di sini form yang Anda buat sudah siap digunakan, kini saatnya Anda mengaplikasikan atau meletakkan Form tersebut pada Halaman Kontak. Langkah-langkahnya adalah:

1. Copy shortcode form yang telah Anda buat.

Silahkan Anda copy shortcode yang ada di bawah judul dari Form Kontak yang sudah Anda buat.

13-copy-shortcode-form

2. Paste kode ke dalam Halaman Kontak

Masuk ke halaman Kontak (silahkan buat halaman baru apabila halaman Kontak belum tersedia) kemudian Paste shortcode Form yang sudah Anda copy sebelumnya.

Silahkan pelajari cara buat Page di Pengenalan Dasar WordPress #1: Apa Itu Pages & Posts.

14-paste-shortcode-form

3. Test Form

Silahkan Anda buka halaman Kontak kemudian lakukan testing untuk mengecek apakah Form sudah berhasil muncul dan berjalan dengan baik. Coba isi data-data yang diperlukan pada field yang tersedia kemudian tekan tombol Kirim.15-halaman-kontak

Apabila form berhasil dikirim, maka akan muncul sebuah tulisan yang memberitahukan bahwa form telah berhasil mengirimkan pesan. Silahkan cek email, Anda akan menerima sebuah email yang berisi data-data di dalam Form tersebut.

Selamat mencoba

Semoga bermanfaat, salam sukses selalu untuk kita semua,

Hans Richardo

 

PS: Jika Anda suka atau merasa artikel ini bermanfaat, tolong SHARE melalui tombol Social Media (Facebook, Twitter, Google+ atau Linkedin) yang kami sediakan.

Tak lupa, Anda juga bisa memberikan komentar atau pertanyaan Anda tentang isi artikel  di bagian komentar berikut ini. Saya selalu menyempatkan membaca setiap komentar dan  menjawab pertanyaan yang masuk.

Kedua hal tersebut, akan membantu saya tahu topik apa yang menarik bagi Anda sehingga saya bisa membuat artikel sejenis lebih banyak lagi. Terimakasih 🙂

  • wah mantap pak artikelnya. Pertanyaan saya, kalau kita mau menghubungi mereka dari email dgn nama domain kita bagaimana caranya?

    Terima kasih

  • Fajrin

    Saya sudah ikuti langkah nya. email diterima namun isi dari email nya (nama, email, pesan dll) tidak ada.

    mohon solusinya di cygnustransport@gmail.com. Terima Kasih 🙂

  • Yanyoe Irawan

    Kenapa selalu gagal ya? Padahal setting sudah sesuai diatas!

  • Rifqi Awaludin

    kenapa ya kok berhasil tapi email ga masuk?

    • Pak @rifqiawaludin:disqus
      Apakah sdh dicek di folder spam? atau kalau anda gunakan gmail. Coba cek di tab bagian social atau promotions?

  • Usman Sila

    saya sudah berhasil mebuat contact form tetapi bagaimana supaya bisa membuatnnya responsive. bila dibuka di hp tampak lebih lebi lebar dari ukuran layar mobile

  • rangga gumilang

    mantaaap.. terima kasih artikel nya… ini berguna sekali buat saya yang masih awam dalam mengembangkan website tempat saya bekerja, dengan artikel ini saya coba membuat formulir pencari kerja online..

  • Halo ka, salam kenal
    Saya dapet problem nih untuk lampirkan filenya, gimana ya?
    Jadi saat saya lampirkan filenya gak masuk ke emailnya, cuma isi dari field nama, subject & isi doang yg masuk email.

    Thanks ka,
    ^L

  • fadli

    terima kasih. saya berhasil

  • Taufik Nurhasan

    untuk membalas pesan replay emailnya dari email gmail atau email domain?

  • Ahmad Nor Hady

    kenapa ga ada notif masuk ke gmail saya ya ? -_- ini masuk ke inbox gmail atau email domain sih

  • Al Hasan Sejahtera

    aduh ko gagal ya

  • aggha lukmana

    gagal ketika di klik “kirim” kosong tidak ada peringatan apapun (blank putih) kenapa ya , padahal udah sesuai q cek berulang kali

    • @agghalukmana:disqus
      Coba Anda perhatikan dibagian email to dan email from nya

      • aggha lukmana

        udah sesuai bro, but tetep blank, kmarin udah bisa, tapi setelah q ganti email jadi blank, apakah b utuh konfigurasi/harus menunggu agar form nya bisa di pakai

        • edwin

          di settingan contact pada mail sudah diganti juga atau belum om

          • aggha lukmana

            setting Contak dimna itu gan ? mail dan mail2 udah q ganti semua, eror nya awalnya cuma gara2 ganti email aja gan, mail to q menggunakan Gmail

          • edwin

            om @agghalukmana:disqus
            coba liat isian yang dirubah di tab mail pada mail(1) dan mail(2), sapa tau bisa dibantu sedikit

          • aggha lukmana

            tanks udah berhasil ternyata di swift SMTP nya harus di setting juga biar lancar

    • aggha lukmana

      tanks udah berhasil ternyata di swift SMTP nya harus di setting juga biar lancar

  • edwin

    kalau untuk memasukkan attach file seluruh extensi gimana ya om, mohon panduannya