Formulir kontak adalah salah satu elemen penting pada website, terutama untuk mendukung komunikasi antara pengunjung dan pemilik website. Dalam panduan ini, Anda akan belajar membuat formulir kontak dinamis menggunakan PHP dengan fitur seperti validasi input, pengiriman email, dan sanitasi data. Panduan ini juga akan memanfaatkan layanan Web Hosting IndoSite untuk memastikan formulir dapat berjalan dengan baik.
Artikel ini cocok untuk Anda yang sedang belajar PHP, belajar MySQL, atau ingin memanfaatkan fitur yang tersedia di cPanel dan hosting Anda.
Persiapan Awal
Sebelum memulai, pastikan Anda memiliki:
- Web Hosting IndoSite dengan akses ke cPanel.
- PHP dan MySQL yang diaktifkan pada hosting Anda.
- Text editor seperti Visual Studio Code atau Notepad++.
- Akses FTP atau File Manager di cPanel untuk mengunggah file.
1. Membuat Struktur Formulir Kontak
Langkah pertama adalah membuat file HTML untuk menampilkan formulir kontak.
Kode HTML Formulir Kontak
Buat file dengan nama contact-form.html dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Kontak</title>
</head>
<body>
<h2>Hubungi Kami</h2>
<form action="process-form.php" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="message">Pesan:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<br><br>
<button type="submit">Kirim</button>
</form>
</body>
</html>
Penjelasan Kode
action="process-form.php": Mengarahkan data formulir ke file PHP yang akan memproses input.method="POST": Menggunakan metode POST untuk mengirim data.
2. Membuat Validasi Input di PHP
Selanjutnya, buat file process-form.php untuk menangani data formulir. Validasi input memastikan data yang dikirimkan pengguna sesuai dengan format yang diinginkan.
Kode PHP untuk Validasi Input
Buat file process-form.php dan tambahkan kode berikut:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Validasi input
$name = htmlspecialchars(trim($_POST['name']));
$email = htmlspecialchars(trim($_POST['email']));
$message = htmlspecialchars(trim($_POST['message']));
// Cek apakah semua field terisi
if (empty($name) || empty($email) || empty($message)) {
die("Semua field harus diisi!");
}
// Validasi email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
die("Alamat email tidak valid!");
}
echo "Input valid. Formulir berhasil dikirim!";
}
?>
Penjelasan Kode
htmlspecialchars: Mencegah serangan XSS dengan mengonversi karakter khusus menjadi entitas HTML.trim: Menghapus spasi kosong di awal dan akhir input.filter_var: Memvalidasi email agar sesuai dengan format standar.
3. Mengirim Email dengan PHP
Langkah berikutnya adalah mengatur pengiriman email menggunakan fungsi PHP mail(). Pastikan fitur email diaktifkan di cPanel Anda.
Kode PHP untuk Mengirim Email
Tambahkan kode ini ke file process-form.php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars(trim($_POST['name']));
$email = htmlspecialchars(trim($_POST['email']));
$message = htmlspecialchars(trim($_POST['message']));
if (empty($name) || empty($email) || empty($message)) {
die("Semua field harus diisi!");
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
die("Alamat email tidak valid!");
}
// Detail email
$to = "[email protected]";
$subject = "Pesan dari Formulir Kontak";
$headers = "From: $email";
// Kirim email
if (mail($to, $subject, $message, $headers)) {
echo "Pesan berhasil dikirim!";
} else {
echo "Pengiriman pesan gagal. Silakan coba lagi.";
}
}
?>
Konfigurasi Email di cPanel
- Login ke cPanel Web Hosting IndoSite.
- Buka Email Accounts dan buat email seperti
[email protected]. - Gunakan email ini di variabel
$tountuk menerima pesan dari formulir.
4. Menyimpan Data Formulir ke MySQL Database
Selain mengirim email, Anda juga dapat menyimpan data formulir ke database. Berikut langkah-langkahnya:
Langkah 1: Membuat Database di cPanel
- Login ke cPanel dan buka MySQL Databases.
- Buat database baru dengan nama
contact_form. - Tambahkan pengguna database dan beri semua hak akses.
Langkah 2: Membuat Tabel Database
Gunakan phpMyAdmin di cPanel untuk menjalankan query berikut:
CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Langkah 3: Menyimpan Data ke Database
Edit file process-form.php untuk menyimpan data:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars(trim($_POST['name']));
$email = htmlspecialchars(trim($_POST['email']));
$message = htmlspecialchars(trim($_POST['message']));
if (empty($name) || empty($email) || empty($message)) {
die("Semua field harus diisi!");
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
die("Alamat email tidak valid!");
}
// Koneksi ke database
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_password";
$dbname = "contact_form";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
$stmt = $conn->prepare("INSERT INTO messages (name, email, message) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $message);
if ($stmt->execute()) {
echo "Pesan berhasil disimpan!";
} else {
echo "Gagal menyimpan pesan: " . $stmt->error;
}
$stmt->close();
$conn->close();
}
?>
5. Testing dan Publikasi
Testing Formulir
- Unggah file
contact-form.htmldanprocess-form.phpke folder public_html menggunakan File Manager di cPanel. - Akses formulir melalui browser di alamat seperti
https://yourwebsite.com/contact-form.html. - Uji pengiriman formulir dan cek email serta database.
Tips Debugging
- Gunakan log error di cPanel untuk melihat kesalahan PHP.
- Pastikan email Anda tidak masuk folder spam.
Kesimpulan
Dengan mengikuti panduan ini, Anda telah berhasil membuat formulir kontak dinamis menggunakan PHP. Formulir ini dilengkapi dengan:
- Validasi input untuk mencegah data tidak valid.
- Pengiriman email ke admin menggunakan fungsi mail().
- Penyimpanan data ke MySQL Database untuk pengelolaan lebih lanjut.
Dengan memanfaatkan fitur cPanel dari Web Hosting IndoSite, Anda dapat dengan mudah mengelola formulir ini dan meningkatkan fungsionalitas website Anda. Selamat mencoba dan semoga berhasil!
Apakah panduan ini membantu? Jika Anda memiliki pertanyaan, tuliskan di Support Ticket atau nomor WA IndoSite!