WordPress

Cara Membuat Form Kontak di WordPress dengan Contact Form 7

Cara Membuat Form Kontak di WordPress dengan Contact Form 7

Pengenalan

Form kontak sangat bermanfaat bagi website Anda karena membantu Anda untuk menjaga privasi dari alamat email (cara ini rupanya mempersempit kesempatan menerima segala bentuk spam) dan juga memudahkan para pengunjung situs Anda agar saling terhubung melalui website Anda.

Jika Anda sudah membuat halaman Hubungi Kami di website WordPress Anda, maka sangatlah mudah untuk menambahkan Form Kontak, lalu mengaturnya, kemudian mulai menerima pesan.

Cara membuat form kontak di WordPress yang paling mudah adalah dengan menggunakan plugin – untuk saat ini, ada banyak plugin yang bisa Anda pilih. Di tutorial ini, kami menggunakan plugin Contact Form 7.

Dengan lebih dari 3 juta plugin yang aktif dan dapat diinstall, Contact Form 7 merupakan plugin Form Kontak WordPress yang paling banyak digunakan. Antarmuka yang intuitif dan pemasangan yang cepat membantu Anda membuat form dalam waktu singkat.

Yang Anda Butuhkan

  • Akses ke dashboard admin WordPress Anda

Langkah 1 – Menginstall Contact Form 7

  1. Login ke dashboard WordPress Anda, dan pilih Plugins > Add new di sebelah kiri menu.
  2. Cari Contact form 7 dan pilih Install.
  3. Setelah diinstall, pilih Activate untuk mengaktifkan plugin tersebut di website Anda.Plugin form kontak WordPress

Langkah 2 – Cara Membuat Form Kontak di WordPress

Setelah plugin tersebut aktif, bagian baru Contact ditampilkan pada menu dashboard di sebelah kiri.

  1. Pilih Contact -> Add new untuk membuat form pertama Anda.
  2. Tambahkan judul di form Anda – contoh, WordPress Contact Form.
  3. Beberapa label dan kolom input telah dibuat di form untuk membantu Anda mulai menggunakan plugin ini. Anda dapat menghapus, atau menambahkan label atau kolom input baru dengan memilihnya dari daftar yang ditampilkan di bagian atas area teks.Contact Form 7 WordPress

Jika Anda tidak yakin label atau kolom input seperti apa yang dibutuhkan, maka Anda tidak perlu melakukan apa-apa. Kapan pun Anda bisa kembali ke bagian ini dan mengeditnya.

Tampilan kode final Anda akan terlihat seperti ini, tergantung pada label dan kolom input yang dipilih:

  • Anda dapat menambahkan dan menghapus elemen sesuai kebutuhan. Untuk memulainya, kita bisa mencoba menggunakan placeholder yang ditampilkan di atas form.Placeholder Contact form 7
  • Ikon bintang * mengindikasikan bahwa kolom wajib diisi.

Langkah 3 – Mengatur Format Email Anda

Pada saat pengunjung mengirimkan pesan melalui form yang Anda buat, Anda akan menerima email berisikan nama, informasi kontak, dan isi pesan mereka.

Anda dapat mengatur email melalui tab Mail – beberapa mail-tags tercantum di bagian atas. Jangan khawatir jika Anda ingin menambahkan mail-tags di kolom yang telah ditentukan – Anda bisa kembali kapan saja untuk mengeditnya.

PENTING: Pastikan Anda membuat perintah “masukkan alamat email yang valid” di kolom To – semua pesan akan dikirimkan melalui alamat email yang diberikan,

Tab Mail Contact form 7

Langkah 4 – Mengatur Pesan

Di tab Messages, Anda dapat mengatur pesan yang akan dilihat oleh pengunjung situs Anda pada saat mereka mengirimkan form – misalnya, Anda dapat mengatur pesan untuk menandai formulir yang telah berhasil dikirimkan dan juga pesan yang berbeda jika terjadi error (sebagai contoh, pengunjung situs memasukkan alamat email yang tidak valid, atau tidak mengisi kolom yang wajib diisi).

Tab Pesan Contact form 7 WordPress

Langkah 5 – Menyimpan dan Menerbitkan Form Anda

Jika sudah selesai, Anda dapat menyimpan perubahan yang dilakukan dengan mengklik Save di sisi kanan panel.

Setelah perubahan form disimpan, “shortcode” akan ditampilkan di bagian atas. Shortcode tersebut di-highlight dengan warna biru, dan tampilannya akan seperti ini:

Shortcut Contact form 7

Untuk menampilkan form yang Anda buat:

  1. Pilih lalu salin shortcode.
  2. Tempel (paste) shortcode tersebut di halaman, post, atau widget di mana Anda hendak menampilkan form Anda.Halaman Hubungi Kami di WordPress
  3. Hasil akhirnya akan terlihat seperti ini:Form Kontak WordPress yang Telah Diterbitkan

Langkah 6 – Mengetes Form Kontak WordPress

Untuk melihat tampilan form yang dibuat dan memastikan apakah berfungsi dengan baik, maka Anda harus mengetesnya. Pun sangat penting untuk memastikan bahwa Anda menerima pesan melalui email.

Anggap diri Anda seorang pengunjung website. Buka website WordPress Anda dan kirimkan form – kapan saja Anda bisa kembali ke halaman form editor untuk melakukan beberapa perubahan.

Jangan lupa untuk mengklik tombol Save setiap kali Anda melakukan perubahan. Dengan begini, Anda tidak perlu lagi menyalin dan menempel (copy dan paste) shortcode.

Kesimpulan

Langkah-langkah yang dituliskan dalam tutorial ini merupakan hal-hal dasar yang Anda perlukan untuk membuat dan menerbitkan Form Kontak di website WordPress Anda dan untuk menerima pesan melalui email.

Anda pun tidak dilarang jika ingin bereksperimen dengan tag dan placehorder, bahkan membuat form dan email Anda. Anda juga dapat mencoba menggunakan Flamingo – plugin penyimpanan pesan, untuk menyimpan semua pesan yang Anda terima ke dalam database (sangat berguna jika server mail Anda mengalami masalah).

2 Comments

Click here to post a comment

    • Jika ingin datanya ditampilkan, maka bapak/ibu harus membuat form dan view database sendiri. Dalam hal ini, contact form hanya berfungsi sebagai formulir agar pengunjung website bisa mengirimkan email ke admin. Terima kasih 🙂

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.3.975
/bln