Cara Membuat Contact Form Website Keren Dengan PHP

Cara Membuat Contact Form Website Keren Dengan PHP - Sebelumnya kita sudah membuat tampilan contact formnya, kali ini kita akan membuat data yang di kirim dari contact form dapat di simpan di dalam database dengan menggunakan PHP. lebih jelasnya langsung saja kita ke prakteknya sekarang.

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
email	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 :

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.