Cara Mudah Membuat Kontak Website dengan Contact Form 7

si-amin17/02/2018

1 880 3 minutes read

Cara Mudah Membuat Formulir Kontak Website dengan Contact Form 7

Hallo sobat CIA!!! Hari ini kita lanjutkan lagi yuk belajar dan praktekknya. Kita akan mencoba membuat kontak website pada tutorial belajar kali ini. Prosesnya sangat mudah dan cepat.

Formulir Kontak (Contact Form) merupakan salah satu fitur yang harus ada di sebuah website. Karena kontak website bisa memberikan kemudahan bagi pengunjung untuk menghubungi Anda.

Ada banyak plugin yang bisa kita gunakan untuk membuat formulir kontak website, salah satunya adalah Contact Form 7.

CIA melihat di website WordPress.org, plugin Contact Form 7 sedang aktif di pasang pada website WordPress lebih dari 5 juta. Dan ini menjadikannya sebagai plugin formulir kontak website yang paling banyak digunakan sampai saat ini. Pembuatnya adalah Takayuki Miyoshi.

CIA menjadikan Contact Form 7 sebagai bahan pembelajaran, karena menggunakannya mudah dan yang baru memulai belajar websitepun bisa dengan mudah mempraktekkannya.

Contact Form 7 yang digunakan kali ini sudah berada pada versi 75. 0 (Update 31 Januari 2018). Cek disini (contactform7.com). Plugin ini bisa berjalan di WordPress 4.8 dan lebih tinggi.

Ayo kita mulai membuat formulir kontaknya!

Cara Membuat Formulir Kontak Website

Berikut ini langkah-langkah yang harus Anda lakukan untuk membuat formulir kontak website di WordPress:

Langkah 1: Instalasi Plugin

Proses instalasi plugin bisa Anda lakukan kalau sudah login ke halaman Admin website Anda.

Pada bagian kiri dashboard admin WordPress Anda, klik menu Plugin > Add new, akan tampil halaman berikut ini:

Lihat kotak merah yang ada di bagian kanan atas, ketikkan “contact form 7” untuk mencari plugin ini. Kemudian klik tombol “Install Now” untuk memasang plugin ini di website Anda.

Setelah Anda install, sekarang klik tombol “Activate” untuk mengaktifkan plugin ini di website Anda.

Langkah 2: Membuat Formulir Kontak Website

Kita lanjutkan dengan membuat formulir kontak website setelah pluginnya diaktifkan.

Pada bagian sidebar Admin WordPress, Anda akan melihat ada sebuah menu baru bernama “Contact”. Klik menu Contact tersebut dan pilih Add New.

Pada bagian “Enter title here”, silahkan isikan judul untuk formulir kontak Anda. Misalnya: “CIA Contact Form”.

Pada tab Form, sudah terisi beberapa label yang digunakan untuk pengisian formulir kontak. Anda bisa merubahnya sesuai dengan kebutuhan. Jika Anda belum mengerti cara merubahnya, biarkan saja seperti itu terlebih dahulu. Anda dapat mengaturnya di lain waktu.

Coba perhatikan “text*, email*”, ada tanda bintang ‘*’. Ini maksudnya adalah, wajib diisi ketika pengunjung mengisi formulir kontak website Anda.

Langkah 3: Pengaturan e-Mail

Saat pengunjung website Anda mengirimkan pesan melalui formulir kontak, secara otomatis email yang berisi nama, email, subject, dan pesan akan terkirim ke email Anda. Untuk itu anda harus mengatur email yang akan dijadikan sebagai penerima pesan dari pengunjung web Anda.

Pengaturan email tersebut bisa dilakukan dari tab “Mail”.

Masukkan alamat email aktif anda di bagian “To”, yang akan menerima pesan tersebut.

Langkah 4: Pengaturan Notifikasi Pesan

Ini juga penting untuk di setting, karena ini merupakan notifikasi peasn untuk pengunjung apakah pesan tersebut berhasil dikirim atau tidak. Anda dapat mengaturnya pada tab “Messages”.

Langkah 5: Simpan

Setelah langkah-langkah di atas dilakukan, silahkan klik tombol “Save”.

Perhatikan pada bagian atas, terdapat satu baris shortcode yang nantinya akan digunakan untuk menampikan formulir kontak di website Anda.

Langkah 6: Menampilkan Formulir Kontak di Website

Pada bagian sidebar admin WordPress Anda, klik menu “Pages” dan pilih “Add New”.

Copy dan Pastekan shortcode yang telah berhasil Anda buat tadi di sini. Dan jangan lupa memberikan Judul untuk nama halaman kontak Anda.

Setelah selesai, klik tombol “Publish” di bagian samping kanan atas.

Untuk melihat hasilnya, anda bisa mengklik link yang sudah berwarna biru tersebut. Dan hasilnya akan terlihat seperti ini.

Langkah 7: Mencoba Formulir Kontak

Jika di coba klik tombol “SEND” tanpa mengisikan apapun pada formulir kontak, akan tampil pesan eror dan notifikasi field yang harus di isi. Ini berarti, Anda telah sukses membuat formulir kontak website.

Jika semua field telah di isi, dan kemudian klik tombol “SEND”. Maka akan muncul pesan seperti berikut ini:

Ini berarti, pesan yang telah di kirim oleh pengunjung Website Anda telah terkirim dan masuk ke email Anda. Coba periksa email anda, jika tampil seperti ini maka Formulir Kontak Anda sudah selesai dibuat dengan benar.