wpcamp.web.id

Tutorial WordPress untuk audiens Indonesia, plugin pilihan, troubleshooting umum

Cara Membuat Halaman Kontak di WordPress

by Dewi Larasati
Cara Membuat Halaman Kontak di WordPress

Kamu punya website WordPress tapi belum tahu bagaimana cara visitor menghubungi kamu? Halaman kontak adalah jembatan penting antara bisnis kamu dan calon pelanggan. Tanpa halaman kontak yang mudah diakses, banyak peluang bisnis yang terlewatkan.

Dalam tutorial ini, kamu akan belajar cara membuat halaman kontak di WordPress dari nol, bahkan jika kamu belum pernah membuat form sebelumnya. Kami akan menggunakan plugin gratis yang paling populer, sehingga kamu tidak perlu menulis kode sama sekali.

Apa yang Kamu Butuhkan

Sebelum memulai, pastikan kamu sudah memiliki:

  • Akses ke dashboard WordPress (bagian admin kamu)
  • Plugin Contact Form 7 (gratis, akan kita install bersama)
  • Beberapa menit waktu luang

Langkah 1: Install Plugin Contact Form 7

Plugin adalah seperti aplikasi tambahan untuk WordPress. Contact Form 7 adalah plugin paling populer untuk membuat form kontak, dan jutaan website menggunakannya.

  1. Masuk ke dashboard WordPress kamu. Biasanya URL-nya adalah www.namawebsitemu.com/wp-admin
  2. Di menu sebelah kiri, cari dan klik Plugins
  3. Nanti kamu akan melihat halaman berisi plugin yang sudah terinstall. Klik tombol biru Add New Plugin di bagian atas
  4. Di kotak pencarian, ketik Contact Form 7
  5. Plugin pertama yang muncul adalah yang kita butuhkan. Klik tombol Install Now (warnanya biru)
  6. Tunggu beberapa detik, tombol akan berubah menjadi Activate. Klik tombol itu untuk mengaktifkan plugin

Setelah ini, kamu akan melihat pesan hijau yang mengatakan plugin sudah aktif. Bagus! Langkah pertama selesai.

Langkah 2: Buat Form Kontak Baru

Sekarang kita membuat form kontak yang akan diisi oleh pengunjung website kamu.

  1. Di menu sebelah kiri dashboard, kamu akan melihat menu baru bernama Contact. Klik di sana
  2. Klik Add New (tombol biru di bagian atas)
  3. Nanti kamu akan masuk ke halaman editor. Di bagian atas, ada kotak kosong bertuliskan "Enter title here". Ketik nama form kamu, misalnya: Form Kontak Utama atau Hubungi Kami

Sekarang kamu akan melihat kode form yang sudah siap pakai. Jangan khawatir tentang kode itu — kamu tidak perlu mengubah apapun untuk sekarang. Klik tombol Save (warna biru, di sebelah kanan atas).

Langkah 3: Tambahkan Field Kontak yang Kamu Butuhkan

Field adalah kotak input — tempat pengunjung mengetik nama, email, atau pesan mereka. Form default sudah memiliki beberapa field standar, tapi kamu bisa menambah atau mengubahnya.

Untuk melihat dan mengubah field:

  1. Buka form yang baru saja kamu buat (klik Contact > pilih form kamu)
  2. Di bagian tengah, kamu akan melihat kode yang terlihat seperti ini: 
    [text your-name placeholder "Nama Lengkap"]
[email your-email placeholder "Email Anda"]
[textarea your-message placeholder "Pesan Anda"]
[submit "Kirim"]

Kode ini sudah cukup untuk form dasar. Tapi jika kamu ingin menambah field, misalnya nomor telepon, kamu bisa menambahkan baris baru:

[tel your-phone placeholder "Nomor Telepon"]

Tambahkan baris ini di antara field email dan textarea. Setelah selesai, klik Save.

Catatan: Jangan menghapus atau mengubah tanda kurung siku [ ] atau kata-kata dalam tanda kutip. Itu adalah instruksi untuk WordPress. Hanya ubah teks di dalam tanda kutip jika kamu ingin mengubah label atau placeholder (teks contoh di dalam kotak).

Langkah 4: Buat Halaman Baru untuk Menampilkan Form

Form yang kita buat tadi masih tersembunyi. Sekarang kita perlu membuat halaman WordPress yang akan menampilkan form itu.

  1. Di menu sebelah kiri, klik Pages

  2. Klik Add New (tombol biru)

  3. Di kotak judul, ketik Hubungi Kami atau nama halaman kontak kamu

  4. Di bagian editor (tempat kamu menulis), klik tombol + untuk menambah blok konten baru

  5. Cari dan pilih blok Shortcode (atau ketik "shortcode" di kotak pencarian)

  6. Dalam kotak Shortcode, kamu perlu memasukkan kode khusus untuk form kamu. Caranya:

    • Kembali ke halaman Contact Form 7 (klik Contact di menu)
    • Buka form yang kamu buat tadi
    • Di bagian atas, kamu akan melihat angka dalam tanda kurung siku, misalnya [contact-form-7 id="123" title="Form Kontak Utama"]
    • Salin (copy) kode itu seluruhnya
    • Kembali ke halaman yang kamu buat, dan paste kode itu di dalam kotak Shortcode

  7. Sekarang klik Publish (tombol biru di sebelah kanan atas) untuk mempublikasikan halaman

Langkah 5: Atur Email Penerima

Kami ingin memastikan setiap kali ada yang mengisi form, kamu menerima email notifikasi. Ini adalah langkah penting agar kamu tidak ketinggalan pesan dari calon pelanggan.

  1. Klik Contact di menu, lalu buka form kamu
  2. Di bagian atas, ada beberapa tab. Klik tab bernama Mail
  3. Di bagian "To:", kamu akan melihat kotak berisi email. Pastikan email di sana adalah email kamu yang benar (email yang ingin menerima pesan dari form)
  4. Di bagian "Subject:", kamu bisa mengubah judul email yang kamu terima. Misalnya: Pesan Baru dari Halaman Kontak
  5. Klik Save

Sekarang setiap kali ada yang mengisi form dan klik tombol Kirim, kamu akan menerima email dengan pesan mereka.

Langkah 6: Test Form Kamu

Sebelum benar-benar membagikan halaman kontak kepada pengunjung, test dulu untuk memastikan semuanya berfungsi.

  1. Buka halaman kontak kamu dari depan website (sebagai pengunjung biasa, bukan dari admin)
  2. Isi semua field dengan data dummy (data percobaan), misalnya:
    • Nama: "Test Pengunjung"
    • Email: email kamu sendiri
    • Pesan: "Ini adalah pesan test"
  3. Klik tombol Kirim
  4. Kamu seharusnya melihat pesan sukses (biasanya "Terima kasih atas pesan Anda")
  5. Periksa email kamu — kamu seharusnya menerima email dengan pesan yang kamu kirim tadi

Jika semuanya berhasil, halaman kontak kamu siap digunakan!

Tips Penting

Keamanan: Contact Form 7 sudah dilengkapi dengan perlindungan spam dasar. Tapi jika kamu mulai menerima banyak spam, kamu bisa menambahkan reCAPTCHA (itu adalah kotak verifikasi "Saya bukan robot"). Ini bisa diatur di pengaturan plugin, tapi tidak perlu dilakukan sekarang.

Desain: Form kamu akan secara otomatis menyesuaikan dengan desain tema WordPress kamu. Jika kamu ingin mengubah warna atau gaya form, kamu bisa melakukannya melalui pengaturan tema atau dengan CSS kustom (tapi ini sudah level lanjutan).

Notifikasi Ganda: Kamu juga bisa mengatur email otomatis yang dikirim ke pengunjung untuk mengkonfirmasi bahwa pesan mereka sudah diterima. Ini ada di tab Mail (2) di halaman form.

Langkah Berikutnya

Sekarang halaman kontak kamu sudah berfungsi! Langkah berikutnya yang bisa kamu lakukan:

  1. Tambahkan link ke halaman kontak di menu navigasi website kamu sehingga pengunjung mudah menemukannya
  2. Cantumkan halaman kontak di footer (bagian bawah website) dengan teks seperti "Hubungi Kami" atau "Kontak"
  3. Jika ingin lebih canggih, kamu bisa menambahkan plugin seperti Mailchimp untuk mengumpulkan email pengunjung ke mailing list kamu

Form kontak yang sederhana namun fungsional adalah aset berharga untuk bisnis online kamu. Sekarang pengunjung punya cara mudah untuk menghubungi kamu, dan kamu tidak akan ketinggalan pesan penting apapun. Jika website kamu mulai berkembang dan kamu ingin memantau performa server, ada baiknya juga membaca panduan setup logging monitoring aplikasi self-hosted agar kamu bisa mendeteksi masalah lebih awal. Dan jika kamu berencana mengembangkan toko online, the comparison on storehabit.com bisa membantu kamu memahami biaya platform e-commerce open source sebelum memutuskan.