Jika anda belum membuat contact formnya baca di sini : Cara Membuat Contact Form Keren Dengan HTML5
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
Database
Pertama buatlah sebuah database terlebih dahulu dengan nama db_blog kemudian buatlah sebuah table di dalamnya dengan nama tbl_contact dengan struktur :
| Name | Type | Size | Extra | Primary |
| id | INT | 100 | auto_increment | yes |
| nama | VARCHAR | 50 | ||
| VARCHAR | 30 | |||
| phone | VARCHAR | 20 | ||
| subject | VARCHAR | 200 | ||
| message | TEXT |
HTML
Ubah sedikit file index.html anda, tambahkan alamat action form dan nama dari masing - masing field di form sehingga script anda sekarang menjadi seperti ini :
<!doctype html>
<html>
<head>
<title>HTML5 Contact Form | Jin Toples Programming</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="ccheader">
<h1>HTML5 Contact Form</h1>
</header>
<div class="wrapper">
<form method="post" action="save.php" class="ccform">
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-user fa-2x"></i></span>
<input class="ccformfield" name="nama" type="text" placeholder="Full Name" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-envelope fa-2x"></i></span>
<input class="ccformfield" name="email" type="email" placeholder="Email" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-mobile-phone fa-2x"></i></span>
<input class="ccformfield" name="phone" type="number" placeholder="Phone">
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-info fa-2x"></i></span>
<input class="ccformfield" name="subject" type="text" placeholder="Subject" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-comment fa-2x"></i></span>
<textarea class="ccformfield" name="message" rows="8" placeholder="Message" required></textarea>
</div>
<div class="ccfield-prepend">
<input class="ccbtn" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Perhatikan baris kode di atas :
<form method="post" action="save.php" class="ccform">
save.php adalah alamat file PHP yang nantinya berfungsi untuk koneksi ke database dan menyimpan data contact form ke dalam table.
PHP
Sekarang terakhir untuk koneksi database dan menyimpan data ke dalam tabel buatlah sebuah file PHP baru dengan nama save.php di dalam folder Contact_Form anda dengan isi script :
<?php
//digunakan untuk koneksi ke database
mysql_connect("localhost","root","");
mysql_select_db("db_blog");
//menangkap inputan dari form
$nama = $_POST['nama'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$message = $_POST['message'];
//menyimpan data ke tabel
mysql_query('INSERT INTO tbl_contact (nama, email, phone, subject, message) VALUES ("'.$nama.'","'.$email.'","'.$phone.'","'.$subject.'","'.$message.'") ');
//pesan alert terkirim dan redirect kembali
echo "<script>
alert('Pesan Berhasil Di Kirim');
window.location.href='index.html';
</script>";
?>
Jangan lupa pindahkan folder Contact_Form anda ke dalam webserver anda jika anda belum meletakannya di dalam webserver.
Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda dengan mengetikan url :
Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda dengan mengetikan url :
http://localhost/contact_form/
Kita juga dapat menyertakan notifikasi ke email kita dengan menggunakan PHPMailer dengan mengirim email lewat gmail. Jika anda ingin mengetahui caranya cukup komen nanti kami akan membuatkan artikelnya.
Contact Form Website Keren Dengan PHP anda sudah selesai, baca juga tutorial PHP lainnya.
Tidak ada komentar:
Posting Komentar