wpcamp.web.id

Tutorial WordPress untuk audiens Indonesia, plugin pilihan, troubleshooting umum

Cara Membuat Halaman Kontak WordPress Tanpa Plugin

by Dewi Larasati
Cara Membuat Halaman Kontak WordPress Tanpa Plugin

Kamu punya website WordPress tapi belum punya halaman kontak? Atau plugin form kontak yang kamu pakai terasa berat dan memperlambat situs? Kabar baiknya: kamu bisa membuat halaman kontak sederhana langsung di WordPress tanpa perlu plugin tambahan.

Halaman kontak adalah tempat pengunjung mengirim pesan langsung ke kamu. Tanpa halaman ini, calon pelanggan atau klien akan kesulitan menghubungi—dan itu artinya kamu kehilangan peluang bisnis. Di artikel ini, kamu akan belajar membuat halaman kontak fungsional hanya dengan fitur WordPress standar dan sedikit HTML.

Apa yang Akan Kamu Capai

Setelah membaca artikel ini, kamu bisa:

  • Membuat halaman kontak baru di WordPress
  • Menambahkan form kontak dengan HTML dasar
  • Mengatur email agar pesan dari pengunjung sampai ke inbox kamu
  • Membuat halaman kontak terlihat rapi di website

Proses ini memakan waktu sekitar 15 menit dan tidak butuh coding canggih.

Langkah 1: Buat Halaman Kontak Baru

Pertama, kamu perlu membuat halaman baru di WordPress.

  1. Login ke dashboard WordPress kamu (biasanya di sitekamu.com/wp-admin)
  2. Di menu sebelah kiri, klik Pages (atau Halaman jika bahasa Indonesia)
  3. Klik tombol biru Add New (atau Tambah Halaman Baru)
  4. Di kolom judul, ketik: Kontak Kami (atau nama lain yang kamu suka)
  5. Klik Publish untuk menyimpan halaman kosong ini dulu

Sekarang kamu punya halaman kosong yang siap diisi. Jangan khawatir—kita akan menambahkan form-nya di langkah berikutnya.

Langkah 2: Pahami Struktur Form Kontak Dasar

Form kontak membutuhkan tiga bagian utama:

1. Tag <form> — pembungkus seluruh form 2. Input fields — tempat pengunjung mengetik (nama, email, pesan) 3. Tombol submit — tombol "Kirim" untuk mengirim data

Inilah template HTML paling sederhana yang akan kita gunakan:

<form method="POST" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>">
  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan" rows="5" required></textarea>
  
  <button type="submit">Kirim Pesan</button>
</form>

Jangan panik melihat kode ini. Kita akan memasukkannya ke halaman kamu di langkah berikutnya, dan WordPress akan menangani sisanya.

Langkah 3: Tambahkan Form ke Halaman Kontak

Sekarang kita akan memasukkan kode form ke halaman "Kontak Kami" yang sudah kita buat.

  1. Buka halaman Kontak Kami yang tadi kamu buat (klik Pages → pilih halaman tersebut)
  2. Di editor halaman, kamu akan melihat dua tombol di atas: Visual dan Text (atau Blok dan HTML di WordPress versi terbaru)
  3. Penting: Klik tombol Text (atau HTML) untuk masuk ke mode kode
  4. Salin-tempel kode form di atas ke dalam editor
  5. Klik Update atau Publish untuk menyimpan

⚠️ Peringatan: Jangan kembali ke tab Visual setelah menambahkan kode, karena WordPress mungkin akan mengubah format HTML-mu. Kalau ingin edit lagi, selalu pakai tab Text.

Langkah 4: Buat File PHP untuk Memproses Form

Form HTML saja tidak cukup—kita perlu file PHP yang menangkap data dan mengirimnya ke email kamu. Ikuti langkah ini:

  1. Buka Appearance (Tampilan) → Theme File Editor (atau Theme Code Editor)
  2. Di sebelah kanan, cari file bernama functions.php dan klik
  3. Scroll ke paling bawah file
  4. Tempel kode ini:
add_action( 'admin_init', 'proses_form_kontak' );

function proses_form_kontak() {
    if ( isset( $_POST['nama'] ) && isset( $_POST['email'] ) && isset( $_POST['pesan'] ) ) {
        $nama = sanitize_text_field( $_POST['nama'] );
        $email = sanitize_email( $_POST['email'] );
        $pesan = sanitize_textarea_field( $_POST['pesan'] );
        $email_admin = get_option( 'admin_email' );
        
        $subject = 'Pesan Baru dari ' . $nama;
        $body = "Nama: $nama\nEmail: $email\nPesan:\n$pesan";
        
        wp_mail( $email_admin, $subject, $body );
        
        wp_redirect( wp_get_referer() . '?sukses=1' );
        exit;
    }
}
  1. Klik Update File untuk menyimpan

Apa yang kode ini lakukan? Saat pengunjung klik tombol "Kirim Pesan", kode ini mengambil data (nama, email, pesan), membersihkannya dari karakter berbahaya, lalu mengirim email ke alamat admin WordPress kamu.

Langkah 5: Tambahkan Pesan Sukses (Opsional tapi Direkomendasikan)

Setelah pengunjung mengirim form, mereka perlu tahu bahwa pesan sudah terkirim. Kita bisa menambahkan pesan sederhana.

Kembali ke halaman Kontak Kami (mode Text), dan ubah kodenya menjadi:

<?php
if ( isset( $_GET['sukses'] ) && $_GET['sukses'] == 1 ) {
    echo '<div style="background-color: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-bottom: 20px;">Terima kasih! Pesan kamu sudah kami terima. Kami akan menghubungi kamu segera.</div>';
}
?>

<form method="POST" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>">
  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan" rows="5" required></textarea>
  
  <button type="submit">Kirim Pesan</button>
</form>

Sekarang, setelah form dikirim, pengunjung akan melihat kotak hijau yang berisi pesan terima kasih.

Tips Membuat Halaman Kontak Lebih Menarik

1. Tambahkan CSS untuk Styling Jika form terlihat terlalu polos, kamu bisa menambahkan gaya di halaman yang sama. Tambahkan kode ini di atas form:

<style>
form { max-width: 500px; margin: 0 auto; }
label { display: block; margin-top: 15px; font-weight: bold; }
input, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; }
button { background-color: #0073aa; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; }
button:hover { background-color: #005a87; }
</style>

2. Tambahkan Informasi Kontak Lainnya Selain form, kamu bisa menambahkan nomor telepon, alamat, atau media sosial. Pengunjung mungkin lebih suka menghubungi lewat WhatsApp daripada form.

3. Periksa Email Spam Email dari form mungkin masuk ke folder Spam atau Promosi. Cek folder tersebut secara berkala, terutama di hari-hari pertama.

Troubleshooting: Apa Kalau Form Tidak Bekerja?

Form tidak mengirim email:

  • Pastikan email admin kamu benar. Cek di Settings → General → lihat kolom "Administration Email Address"
  • Beberapa hosting memblokir fungsi wp_mail(). Hubungi customer service hosting kamu

Halaman error atau blank:

  • Periksa kembali kode PHP di functions.php — pastikan tidak ada typo
  • Coba matikan semua plugin lain untuk memastikan tidak ada konflik

Form terlihat berantakan:

  • Tema WordPress kamu mungkin punya CSS sendiri yang bertabrakan. Gunakan kode CSS di atas untuk override-nya

Langkah Berikutnya

Sekarang halaman kontak kamu sudah hidup! Berikut yang bisa kamu lakukan selanjutnya:

  1. Test form — buka halaman kontak dari browser biasa (bukan dashboard), isi semua field, dan klik "Kirim". Pastikan email sampai ke inbox kamu.
  2. Tambahkan link ke halaman kontak di menu navigasi website kamu agar mudah ditemukan pengunjung
  3. Pertimbangkan menambahkan reCAPTCHA jika kamu khawatir spam (ini topik untuk artikel terpisah)

Dengan halaman kontak ini, pengunjung kamu sekarang punya cara mudah untuk menghubungi. Itu adalah langkah penting untuk membangun kepercayaan dan mengubah pengunjung menjadi pelanggan. Jika kamu juga ingin meningkatkan visibilitas website di mesin pencari, pelajari cara memilih jasa SEO lokal Indonesia terpercaya yang sesuai dengan kebutuhan bisnismu.