Tutorial: Cara Membuat Formulir Kontak (PHP) Sederhana untuk Website Portofolio HTML/CSS Anda

pada tanggal

 

Anda sudah sampai di tahap akhir. Website portofolio HTML/CSS Anda sudah terlihat memukau. Desainnya bersih, animasinya halus, dan semua proyek terbaik Anda sudah dipajang.

Tapi ada satu masalah besar.

Di halaman "Kontak", Anda memiliki formulir "Hubungi Saya". Saat klien potensial mengisi nama, email, dan pesan, lalu mengklik tombol "Kirim"... tidak terjadi apa-apa.

Mungkin Anda hanya menautkannya ke mailto:email@anda.com, yang (jujur saja) sangat merepotkan, tidak profesional, dan seringkali gagal.

Ini seperti memiliki etalase toko yang cantik, tapi pintunya terkunci rapat.

Jika Anda mengalami ini, Anda berada di tempat yang tepat. Saya akan tunjukkan cara "menghidupkan" formulir itu menggunakan sedikit keajaiban backend yang disebut PHP. Ini jauh lebih mudah dari yang Anda bayangkan. Kita tidak akan pakai database, tidak pakai framework rumit. Hanya 3 file sederhana.

Apa yang Kita Butuhkan? (Prasyarat)

Sebelum mulai, Anda tidak bisa hanya membuka file ini dengan klik dua kali di browser Anda. PHP adalah bahasa "sisi-server" (server-side), artinya perlu "dijalankan" oleh server.

Anda punya dua pilihan untuk mengetes ini:

  1. Web Hosting: Cara termudah. Unggah 3 file ini ke web hosting Anda (yang 99% pasti sudah mendukung PHP).
  2. Server Lokal (Localhost): Instal aplikasi seperti XAMPP atau MAMP. Ini akan mengubah komputer Anda menjadi server lokal untuk pengetesan.

Langkah 1: HTML (Kerangka Formulir)

Pertama, mari buat formulir kita di contact.html. Ini adalah bagian frontend yang dilihat oleh klien.

Buat file bernama contact.html dan isi dengan kode ini:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hubungi Saya</title>
    <!-- Anda bisa menautkan file style.css Anda di sini -->
</head>
<body>

    <h2>Hubungi Saya</h2>
    <p>Silakan isi formulir di bawah ini untuk mengirimi saya pesan.</p>

    <!-- 
      - method="POST": Mengirim data "di balik layar".
      - action="send.php": Menentukan file mana yang akan memproses data ini.
    -->
    <form action="send.php" method="POST">
        <div>
            <label for="nama">Nama Anda:</label><br>
            <input type="text" id="nama" name="user_name" required>
        </div>
        <br>
        <div>
            <label for="email">Email Anda:</label><br>
            <input type="email" id="email" name="user_email" required>
        </div>
        <br>
        <div>
            <label for="pesan">Pesan Anda:</label><br>
            <textarea id="pesan" name="user_message" rows="5" required></textarea>
        </div>
        <br>
        <div>
            <button type="submit">Kirim Pesan</button>
        </div>
    </form>

</body>
</html>

Poin Kunci di HTML:

  • method="POST": Ini adalah cara kita mengirim data.
  • action="send.php": Ini memberi tahu formulir untuk mengirim semua datanya ke file bernama send.php saat tombol "Kirim" diklik.
  • name="...": Atribut name (seperti name="user_name") sangat penting. Ini adalah "label" yang akan dibaca oleh PHP.

Langkah 2: PHP (Mesin Pengirim Email)

Ini adalah keajaibannya. Ini adalah file backend yang tidak terlihat oleh pengguna. File ini akan "menangkap" data dari contact.html dan mengubahnya menjadi email.

Buat file bernama send.php dan isi dengan kode ini:


<?php
// Periksa apakah formulir telah disubmit
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
    // 1. Ambil data dari formulir
    // Kita gunakan htmlspecialchars untuk keamanan dasar
    $nama = htmlspecialchars(strip_tags(trim($_POST["user_name"])));
    $email = filter_var(trim($_POST["user_email"]), FILTER_SANITIZE_EMAIL);
    $pesan = htmlspecialchars(strip_tags(trim($_POST["user_message"])));

    // 2. Atur penerima email Anda
    $tujuan = "email-anda@gmail.com";  // <-- GANTI DENGAN EMAIL ANDA
    $subjek = "Pesan Baru dari Portofolio - $nama";

    // 3. Bangun isi email
    $isi_email = "Nama: $nama\n";
    $isi_email .= "Email: $email\n\n";
    $isi_email .= "Pesan:\n$pesan\n";

    // 4. Buat header email
    // Ini penting untuk memastikan email terkirim dengan benar
    $headers = "From: webmaster@domain-anda.com\r\n"; // <-- GANTI DENGAN EMAIL DARI HOSTING ANDA
    $headers .= "Reply-To: $email\r\n";
    $headers .= "X-Mailer: PHP/" . phpversion();

    // 5. Kirim email
    // Kita gunakan @ untuk menekan error jika terjadi, 
    // karena kita akan mengarahkan pengguna
    if (@mail($tujuan, $subjek, $isi_email, $headers)) {
        // Jika berhasil, arahkan ke halaman "sukses"
        header("Location: success.html");
        exit;
    } else {
        // Jika gagal (jarang terjadi jika server dikonfigurasi dgn baik)
        // Anda bisa membuat halaman error.html
        echo "Email gagal terkirim. Silakan coba lagi.";
    }

} else {
    // Jika seseorang mencoba mengakses send.php secara langsung
    echo "Metode pengiriman tidak valid.";
}
?>

Catatan Keamanan (Cybersecurity Niche!):
Mengapa kita menggunakan htmlspecialchars dan filter_var? Ini adalah langkah keamanan dasar untuk membersihkan input. Ini membantu mencegah serangan sederhana seperti "Email Header Injection", di mana peretas mencoba membajak formulir Anda untuk mengirim spam. Jangan pernah memercayai data yang dikirim oleh pengguna!

Langkah 3: Halaman "Sukses" (Umpan Balik)

Jangan biarkan klien Anda kebingungan setelah mengklik "Kirim". Arahkan mereka ke halaman "Terima Kasih" agar mereka tahu pesannya terkirim.

Buat file terakhir, success.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pesan Terkirim!</title>
    <!-- Tautkan CSS Anda agar terlihat cantik -->
</head>
<body style="text-align: center; padding-top: 50px; font-family: sans-serif;">

    <h2>Terima Kasih!</h2>
    <p>Pesan Anda telah berhasil terkirim.</p>
    <p>Saya akan segera menghubungi Anda kembali.</p>
    <br>
    <a href="contact.html">Kembali ke formulir</a>
    <!-- atau <a href="index.html">Kembali ke Beranda</a> -->

</body>
</html>

Cara Mengetesnya (Penting!)

  1. Ganti Placeholder: Buka send.php dan ganti email-anda@gmail.com dan webmaster@domain-anda.com.
  2. Unggah: Unggah ketiga file (contact.html, send.php, success.html) ke root (atau subfolder) web hosting Anda.
  3. Buka di Browser: Buka www.domain-anda.com/contact.html.
  4. Kirim Tes: Isi formulir dan klik "Kirim".

Jika semua berjalan lancar, Anda akan diarahkan ke success.html, dan beberapa saat kemudian, Anda akan mendapatkan email baru di kotak masuk Anda!

(Catatan: Jika Anda menggunakan XAMPP, fungsi mail() PHP seringkali tidak dikonfigurasi secara default dan tidak akan berfungsi sampai Anda mengaturnya. Cara termudah untuk mengetes adalah di hosting sungguhan).

Kesimpulan

Selamat! Anda baru saja menjembatani kesenjangan antara desainer frontend dan developer backend. Anda telah mengubah portofolio statis yang "cantik tapi bodoh" menjadi alat penghasil prospek (lead-generation) yang fungsional dan profesional.

Ini adalah keahlian kecil dengan dampak besar pada nilai jual Anda sebagai seorang desainer/developer.

Apakah Anda mengalami kendala saat mencobanya? Atau punya tips PHP lain untuk portofolio? Bagikan di kolom komentar!

Komentar

Posting Komentar