Advan – Membuat form kontak di website Dreamweaver adalah langkah penting untuk memungkinkan pengunjung menghubungi Anda.
Salah satu cara untuk membuat form kontak dengan mudah adalah menggunakan Adobe Dreamweaver, perangkat lunak desain web yang menyediakan antarmuka pengguna yang intuitif dan fitur yang kuat.
Artikel ini akan membimbing Anda melalui proses membuat form kontak di website Dreamweaver, dari awal hingga akhir.
Persiapan
Sebelum kita mulai, pastikan Anda telah menginstal Dreamweaver di komputer Anda. Jika belum, Anda bisa mendownload dan menginstalnya dari situs resmi Adobe. Setelah terinstal, buka Dreamweaver dan ikuti langkah-langkah berikut:
1. Buat Dokumen Baru
Klik “File” di menu atas, lalu pilih “New“. Pilih jenis dokumen HTML dan beri nama yang sesuai, misalnya “contact.html“. Klik “Create“.
2. Atur Struktur Dasar HTML
Dreamweaver akan membuatkan struktur HTML dasar untuk Anda. Jika belum ada, tambahkan tag dasar HTML seperti berikut:<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Form Kontak</title>
</head>
<body>
<!– Konten akan ditambahkan di sini –>
</body>
</html>
Membuat Form Kontak
Sekarang, kita akan menambahkan form kontak ke dalam dokumen HTML kita.
1. Tambahkan Form HTML
Di dalam tag <body>, tambahkan kode berikut untuk membuat form:
<h2>Kontak Kami</h2>
<form action=”submit_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><br>
<textarea id=”message” name=”message” rows=”5″ cols=”40″ required></textarea><br><br>
<input type=”submit” value=”Kirim”>
</form>
Kode di atas membuat form dengan tiga elemen input: satu untuk nama, satu untuk email, dan satu untuk pesan. Selain itu, ada tombol kirim untuk mengirim data ke server.
2. Menyesuaikan Tampilan dengan CSS
Anda bisa menambahkan beberapa gaya dasar untuk mempercantik tampilan form Anda. Tambahkan kode CSS berikut di dalam tag <head>:
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
}
form {
max-width: 500px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type=”submit”] {
width: auto;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type=”submit”]:hover {
background-color: #45a049;
}
</style>
Gaya ini akan membuat form terlihat lebih menarik dan profesional.
Baca Juga: Cara Menambahkan Galeri Foto di Adobe Dreamweaver
Mengatur Pengiriman Data
Pada tahap ini, form kontak sudah siap, tetapi kita perlu memastikan bahwa data yang dikirimkan oleh pengguna akan diproses dengan benar.
1. Membuat File PHP untuk Memproses Data
Buat file baru bernama submit_form.php di direktori yang sama dengan file HTML Anda. Tambahkan kode berikut ke dalam file tersebut:
<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$name = $_POST[‘name’];
$email = $_POST[’email’];
$message = $_POST[‘message’];
// Validasi sederhana
if (!empty($name) && !empty($email) && !empty($message)) {
// Kirim email atau simpan data ke database
// Di sini kita hanya akan menampilkan pesan yang diterima
echo “Nama: ” . htmlspecialchars($name) . “<br>”;
echo “Email: ” . htmlspecialchars($email) . “<br>”;
echo “Pesan: ” . htmlspecialchars($message) . “<br>”;
} else {
echo “Semua bidang harus diisi.”;
}
} else {
echo “Metode pengiriman tidak valid.”;
}
?>
Kode ini akan menerima data dari form dan memvalidasinya. Jika data valid, data tersebut akan ditampilkan kembali kepada pengguna.
2. Uji Formulir
Simpan semua perubahan dan buka file contact.html di browser Anda. Coba isi form dan kirimkan data untuk melihat apakah data tersebut diterima dan ditampilkan dengan benar oleh submit_form.php.
Baca Juga: Mudah, Begini Cara Publish Website dari Dreamweaver
Menambahkan Fitur Tambahan
Anda dapat menambahkan berbagai fitur tambahan ke form kontak Anda, seperti:
- Validasi JavaScript: Menambahkan validasi sisi klien untuk memberikan umpan balik instan kepada pengguna.
- Penyimpanan Database: Menyimpan data yang dikirimkan ke dalam database untuk referensi di masa mendatang.
- Pengiriman Email: Mengatur agar form mengirim email ke alamat tertentu setiap kali ada pesan baru.
Jika Anda sedang mencari perangkat yang tangguh dan handal untuk keperluan desain web dan lainnya, Advan XPLAY adalah pilihan yang tepat. Dengan kinerja tinggi dan desain yang elegan, Advan XPLAY dapat membantu Anda mencapai produktivitas maksimal.*** (muu)
Editor: Mahfida Ustadhatul Umma
Adi Priyanto MHS