Cara Membuat Contact Form di WordPress

Ok, jadi ceritanya Anda sudah berhasil membuat website WordPress? Dan sekarang Anda ingin agar orang dapat menghubungi Anda melalui website?

Cara paling lazim adalah dengan menggunakan contact form.

Di WordPress sendiri, ada begitu banyak pilihan plugin yang dapat melakukan tugas ini.

Nah pertanyaannya adalah: Mana plugin yang mudah digunakan, mudah diintegrasikan, GRATIS dan cocok untuk semua tema WordPress?

Jawabannya adalah Contact Form 7.

More...

Saya telah mencoba banyak plugin contact form dan untuk saat ini saya bisa bilang bahwa Contact Form 7 adalah pilihan yang terbaik.

membuat contact form di WordPRess

contoh contact form 7

Cara Membuat Contact Form 7 di Website WordPress


  1. Login ke dashboard WordPress Anda dan klik bagian Plugins > Add New.
  2. Cari plugin Contact Form 7 di panel sebelah kanan. Klik tombol "Install Now", lalu "Activate"
menambahkan plugin contact form 7

3. Setelah Anda mengaktifkan Contact Form 7, Anda akan melihat tombol "Contact" pada dashboard WordPress Anda (cek bagian sidebar sebelah kiri). Klik tombol "Contact" tersebut.

4. Anda akan melihat halaman seperti dibawah ini.

5. Sebuah contact form bernama "Contact form 1" telah tersedia untuk langsung digunakan. Juga, perhatikan shortcode yang saya kotaki warna merah [*contact-form-7 id="1257" title="Contact form 1"] (hapus * dari kode).

contact form 7

6. Copy shortcode diatas dan paste kan pada halaman contact website Anda. Ketika selesai, shortcode nya akan tampil seperti ini:

paste shortcode contact for 7 ke contact page

Live view,

live preview contact form 7

Pengaturannya selesai sampai sini. Mudah bukan?

Tapi, mungkin Anda ingin mengkustomisasi formnya: menambahkan form baru, menghapus form tertentu, menambahkan captcha, dan lain-lain.

Jadi, silahkan lanjut ke bagian kustomisasi dibawah ini.

Kustomisasi Conctact Form 7


Mengkustomisasi plugin Contact Form 7 itu mudah.

Mungkin saja Anda akan menemui kesulitan ketika melihat kode-kode yang berada dalam kurung seperti ini "<label> Your Name (required)", tapi Anda tidak perlu khawatir, hanya dalam beberapa langkah saja Anda akan mudah memahami maksud kode-kode tersebut.

Tanpa panjang lebar lagi, mari kita mulai dari langkah 1.

Langkah 1: Buat Contact Form Baru

Klik tombol "Add New" untuk membuat contact form baru.

buat contact form baru

Langkah 2: Edit Form Template

Anda akan sampai ke halaman "editing form template".

Pertama-tama, Anda perlu membuat judul form terlebih dahulu pada nomor "1". Judul ini tidak akan muncul di halaman contact form nantinya, jadi bebas mau diisi apa, tapi sebaiknya isi judul sesuai dengan tujuan contact formnya. Misalnya: form pendaftaran beasiswa.

Kemudian, tab yang saya kotaki warna merah, itu adalah kumpulan tags yang berfungsi untuk menambahkan elemen ke contact form.

Contohnya: tag number untuk menambahkan elemen yang biasanya digunakan untuk membuat form berupa angka seperti form handphone/telephone.

kustomisasi contact form 7

Di panduan ini, saya akan contohkan menggunakan tag drop-down menu. Saya klik tombol drop-down menu dan mengisi informasi yang diperlukan.

Saya menceklis "Filed type" yang menandakan bahwa elemen form ini wajib diisi. Kemudian "name" dibiarkan saja apa adanya. Bagian "Options" ini adalah menu atau informasi yang harus diisi, saya mencontohkan produk 1, produk 2, dst...

Setelah selesai, klik tombol biru Insert Tag untuk menambahkan form drop-down menu ini ke dalam contact form.

menambahkan drop down menu di contact form 7

Hasilnya akan terlihat seperti pada gambar dibawah ini. Kebetulan saya meletakkannya setelah form "Your Message".

Ah, iya. Anda juga dapat mengganti text "Your Name", "Your Email", "Subject", dsb secara langsung pada form template ini. Anda bisa juga menghapusnya jika memang tidak diperlukan.

Jika Anda ingin menghapusnya, hapus mulai dari kode <label> hingga kode </label> pada setiap elemen. Contohnya: <label> Subject [text your-subject] </label>.

drop-down menu form

Sampai disini, Anda mungkin bisa bereksperimen dengan menambahkan elemen-elemen baru ke dalam form.

Jika sudah selesai, jangan lupa klik tombol Save.

Langkah 3: Edit Mail Template

Anda sudah selesai membuat form. Sekarang saatnya beralih ke pengaturan Mail. Disini Anda perlu membuat format dari contact form yang masuk ke email Anda.

edit mail template
  • Yang saya kotaki warna merah: Itu adalah shortcode dari setiap elemen yang sudah Anda buat pada form Anda. "[your-name]" berarti elemen form nama, "[menu-598]" adalah elemen drop-down yang saya buat.
  • To: Kemana contact form yang diisi pengunjung website Anda akan dikirim. 
  • From: Menunjukan email ini berasal dari mana. Secara default berisi shortcode [your-name]
  • Subject: Ini adalah subject pesan dari elemen subject yang ada pada form Anda.
  • Additional Headers: Biarkan saja bagian ini apa adanya
  • Message Body: Semua elemen yang Anda buat pada bagian form harus Anda masukkan dalam bagian ini, termasuk menu drop-down yang saya buat sebagai contoh dengan shortcode "[menu-598]". Anda juga dapat menambahkan keterangan sebelum shortcode, seperti From, Subject, Message Body, Produk yang Dipilih, dsb.

Klik tombol Save jika sudah selesai.

Langkah Terakhir: Edit Mail Template

Tab terakhir yang perlu di edit adalah Messages. Sebenarnya, ini sifatnya opsional. Boleh diganti, boleh juga tidak. Terserah Anda.

Di bagian ini, Anda dapat mengedit pesan yang muncul ketika pengunjung website Anda mengisi contact form yang Anda sediakan. Mulai dari pesan ketika berhasil mengirimkan form, ketika gagal mengirimkan form, dan lain-lain. Anda dapat menggantinya ke bahasa Indonesia bila Anda mau.

mengganti pesan

Sampai di poin ini, sebagian besar kustomisasi yang saya jelaskan sudah selesai. Anda dapat menggunakan contact form yang Anda buat di halaman kontak dengan copy-paste shortcode yang terkait.

In case Anda tidak yakin dimana letak shortcodenya, perhatikan shortcode berlatar biru yang saya kotaki warna merah dibawah ini.

shortcode contact form 7

Daaaan.. beginilah hasilnya: (perhatikan menu drop-down yang saya tambahkan)

contact form yang sudah saya buat

Setelah selesai, pastikan Anda mengetes contact form yang Anda buat hingga berhasil terkirim ke email Anda.

Sampai disini, jika Anda punya pertanyaan atau mengalami kendala, silahkan bertanya melalui kolom komentar dibawah ya.

Bagaimana Cara Menambahkan Captcha


Plugin Contact Form 7 memiliki fitur captcha.

Anda memerlukan sebuah account Google dan harus mendaftarkan website Anda untuk mendapatkan API keys.

1. Buka halaman Google reCAPTCHA dan login menggunakan account Google Anda

Google reCAPTCHA

2. Daftarkan nama website/domain Anda. Ikuti petunjuk gambar dibawah ini:

cara membuat captcha

3. Selanjutnya, Anda akan mendapatkan site key dan secret key seperti ini:

site key dan secret key

4. Buka kembali dashboard WordPress Anda. Lalu klik bagian Contact > Integration. Kemudian klik tombol Configure Keys hingga terbuka form untuk memasukkan site key dan secret key.

buka contact form integration
integration dengan captcha di contact form 7

5. Buka contact form Anda. Jika Anda lupa, klik bagian Contact > Contact Forms pada dashboard WordPress Anda.

Kemudian tambahkan [recaptcha] sebelum shortcode submit.

menambahkan captcha di form

Jangan lupa klik tombol Save dan refresh halaman kontak Anda untuk melihat perubahannya.

captcha

Kesimpulan


Membuat dan mengkustomisasi Contact Form di website WordPress itu sangat mudah. Saya berharap tutorial ini dapat membantu membuat contact form khusus untuk kebutuhan website  Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan komentar di bawah ini 🙂

  • Mas, misalkan kita buat form register dgn contact form 7 ini, apakah form itu langsung save di database kita, atau kita perlu buat lagi database nya di cpanel ya ? trims.

    • Langsung tersave di database kok, semuanya sudah otomatis tidak perlu create database ulang dan menghubungkannya dengan plugin ini.

  • Mas setelah kita sudah install wordpress di cpanel, untuk login menggunakan wordpress tersebut lewat cpanel lagi atau langsung ke wordpress.com maaf newbie hhe

  • >