Ahmad Rifai
cara membuat halaman kontak

3 Langkah Praktis Membuat Halaman Kontak / Contact Us Di Blog WordPress

Pada dasarnya membuat contact us / halaman kontak memang tidak wajib.

Walaupun demikian. Sebagian blogger menganggapnya perlu ada.

Jadi saya rasa tidak ada salahnya juga jika kita mengetahui bagaimana cara membuat halaman kontak (contact us) di blog wordpress.

Dan di sini anda akan menemukan cara membuat contact us di blog yang paling mudah dan praktis.

Berikut 3 langkah mudah yang harus dilakukan :

  1. Install Plugin Contact Form 7
  2. Bikin Formulir Kontak
  3. Membuat Halaman Contact Us

Oke mari kita mulai satu persatu.

Cara Install Plugin Contact Form 7

Ini adalah langkah pertama yang wajib anda lakukan.

Contact Form 7 adalah salah satu plugin wordpress yang populer dan banyak digunakan.

Dengan menggunakan plugin ini kita dapat dengan mudah membuat formulir kontak maupun formulir pendaftaran online.

Untuk menginstall plugin ini silakan ikuti langkah – langkah berikut :

  • login dahulu ke blog anda.
  • Buka halaman Plugin → Tambah Baru.

install plugin blog

  • Tulis “contact form 7” pada kolom pencarian plugin.
  • Setelah plugin terlihat silakan klik Instal Sekarang.
  • Tunggu sebentar, dan jika proses install sudah selesai silakan klik Aktifkan.
  • Selesai

Apabila anda menginginkan formulir kontak tersebut memiliki keamanan (Captcha).

Maka silakan install juga plugin “WordPress ReCaptcha Integration”.

Plugin ini dapat juga digunakan untuk menampilkan Captcha pada :

  • Forum komentar
  • Forum login
  • Dan dapat dipadukan dengan contact form 7

Cara install sama dengan yang sudah saya tuliskan di atas.

Cara Bikin Formulir Kontak

Langkah kedua yaitu membuat form kontak sederhana yang terdiri dari nama, email, isi pesan, dan tombol kirim.

Sekarang coba lihat menu yang ada di sebelah kiri wp admin.

Di sana akan terlihat menu Contact.

Arahkan kursor ke menu tersebut kemudian klik Add New.

tambah formulir kontak

Silakan beri judul formulir (ini tidak akan ditampilkan pada halaman kontak nanti, tapi sebagai nama formulir saja).

Sehingga apabila anda membuat lebih dari 1 formulir. Anda dapat dengan mudah mengenalnya.

Anda boleh mengedit tulisan yang saya kurung dengan kotak merah, karena bahasa bawaan adalah Inggris.

cara membuat form contact us

Anda juga boleh menambahkan formulir lain jika menginginkannya, tapi untuk formulir kontak saya rasa tidak perlu ditambah juga oke.

Apabila sudah selesai mengedit jangan lupa klik Save.

Maka akan keluar kode yang nantinya bisa kita gunakan untuk menampilkan form contact.

kode formulir kontak

Kode tersebut dapat anda pasang pada post, laman, maupun widget.

Silakan salin kode tersebut, kemudian letakkan sementara pada notepad.

Cara Membuat Halaman Contact Us

Karena kebanyakan blogger memasang form contact pada halaman statis (page), maka kita juga akan membuatnya di sana.

Adapun langkah-langkah yang harus dilakukan adalah sebagai berikut :

tambah laman baru

  • Arahkan kursor ke menu Laman, kemudian klik Tambah Baru.
  • Buat judul halaman kontak sesuai keinginan, misal : contact us, kontak kami, dsb.
  • Tulis keterangan jika di rasa perlu.
  • Salin kemudian paste kode formulir kontak yang sudah dibuat tadi di sini.
  • Terbitkan laman.
  • Selesai.

cara membuat contact us

Selamat, sekarang blog anda sudah memiliki halaman kontak.

Dan untuk membuktikannya silakan lihat halaman yang baru diterbitkan tadi.

Mungkin anda juga ingin memasukkan halaman tersebut pada navigasi menu, agar pengunjung dapat dengan mudah menghubungi.

Jika ia, silakan baca : cara membuat menu di blog.

Ke mana isi pesan yang dikirim melalui formulir tersebut di kirim?…

Isi pesan akan di kirim ke email yang ada di profil blog anda.

Untuk melihat email tersebut silakan buka halaman pengguna → Profil Anda.

melihat email profil

Pengaturan Formulir Contact Form 7 Tingkat Lanjut

Untuk membuat pengaturan lanjutan silakan arahkan kursor ke menu Contact, kemudian klik Contact Forms.

Setelah itu klik edit pada formulir yang ingin di atur.

Maka anda melihat tab Mail, Messages, dan Additional Settings.

Oke, mari kita bahas satu persatu.

Mail

Pada tab ini anda dapat mengatur :

  • Email yang akan menerima pesan.
  • Subject / judul pesan yang masuk ke email (ini bisa anda jadikan sebagai tanda).
  • Message Body / isi pesan.

Tapi yang paling penting adalah email yang akan menerima pesan dan judul pesan.

Di bagian bawah anda juga akan melihat Mail (2) yang bisa digunakan untuk memberi balasan secara otomatis kepada pengirim (autoresponder).

Dan jika anda ingin mengaktifkan fungsi ini silakan beri centang Use Mail (2).

Kemudian setting seperti ini :

  1. To : biarkan default (jangan di edit).
  2. From : Jika email sudah pas tidak perlu di rubah.
  3. Subject : tulis judul pesan yang anda mau.
  4. Additional Headers : silakan edit jika ingin menggunakan email lain.
  5. Message Body : Tulis isi pesan sesuai keinginan anda.

membuat balasan otomatis

Setelah mengedit jangan lupa klik simpan.

Messages

Ini adalah pengaturan pemberitahuan apabila ada kesalahan mengisi formulir maupun pesan sudah dikirim.

Karena bawaannya menggunakan bahasa Inggris, jadi mungkin perlu dirubah ke bahasa Indonesia.

Silakan lihat dan rubah sendiri.

Additional Settings

Apabila anda ingin membuat pengaturan lainnya menggunakan kode tertentu silakan buat di sini.

Untuk detail nya silakan klik link yang ada di halaman tersebut.

Misal anda ingin pengirim di bawah ke halaman tertentu setelah pesan di kirim, maka anda bisa bikin fungsi redirect.

Untuk membuatnya silakan letakkan kode berikut pada kolom yang tersedia di sana

on_sent_ok: "location = 'http://example.com/';"

Jangan lupa ganti http://example.com/ dengan url yang anda inginkan dan benar

misal : http://bloganda.com/terimakasih/

Cara Menambahkan Captcha Pada Formulir Kontak

Pada bagian install plugin tadi saya sudah memberi saran untuk menginstall dan mengaktifkan plugin WordPress ReCaptcha Integration.

Jika belum silakan install dahulu, kemudian aktifkan.

Kalau sudah silakan arahkan kursor ke menu Pengaturan, setelah itu klik ReCaptcha.

Klik link dengan tulisan “Google reCAPTCHA admin page” untuk mendapatkan Site key dan Secret key.

menambahkan captcha

Login menggunakan akun google anda.

Daftarkan domain di sana kemudian klik Register.

Maka di halaman selanjutnya anda akan mendapatkan 2 key tersebut, dan silakan pasang di blog anda.

recaptcha key

Untuk memadukan Contact Form 7 dengan Google reCAPTCHA  silakan buka halaman Contact → Integration.

Klik Configure Keys, kemudian masukkan lagi Site key dan Secret key tadi di sana.

recaptcha integration

Sekarang silakan edit formulir kontak yang ingin diberi captcha (cara edit sudah saya jelaskan di atas tadi).

Klik tombol reCAPTCHA, kemudian pilih Tampilan dan ukuran.

Setelah itu salin kode atau klik Insert Tag.

Apabila posisi captcha tidak sesuai keinginan silakan pindahkan kode recaptcha pada posisi yang anda inginkan.

cara membuat contact us dgn captcha

Terakhir jangan lupa klik simpan.

Selamat mencoba, dan semoga berhasil membuat halaman kontak di blog anda.

Sedikit tambahan.

Plugin Contact Form 7 tidak hanya bisa digunakan untuk membuat forum kontak saja, tapi bisa juga digunakan untuk :

  1. Membuat forum pendaftaran online
  2. Membuat forum order produk
  3. Dsb.

Jadi silakan gunakan plugin ini untuk keperluan lainnya.

Apabila anda juga menginstall plugin WordPress ReCaptcha Integration, maka sebaiknya gunakan juga plugin ini untuk menampilkan captcha pada forum komentar.

Bagi anda yang ingin membuat form contact tanpa plugin silakan baca cara membuat google form.


Langganan Artikel Terbaru

Dapatkan update terbaru blog ini lewat email anda

@