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 karena membantu menjaga privasi alamat email, salah satunya dengan mengurangi kemungkinan spam. Selain itu, cara ini juga memudahkan pengunjung situs untuk terhubung dengan Anda melalui website Anda.

Jika sudah memiliki halaman Hubungi Kami di website WordPress Anda, selanjutnya akan sangat mudah untuk menambahkan Form Kontak, mengaturnya, lalu 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, dan salah satunya adalah 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 Anda install plugin WordPress tersebut, bagian baru Contact kemudian 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. Anda bisa kembali ke bagian ini kapan pun dan mengeditnya.

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

Your Name (required)
[text* your-name]

Your Email (required)
[email* your-email]

Subject
[text your-subject]

Your Message
[textarea your-message]

[submit "Send"]
  • 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.

Pastikan Anda membuat perintah “masukkan alamat email yang valid” di kolom To karena 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

[contact-form-7 id="123" title="WordPress Contact Form"]

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).

Author
Penulis

Ariata C.

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.