membuat contact form dengan PHP yang terkirim ke email

Cara membuat contact form dengan PHP yang terkirim ke email | Form kontak merupakan salah satu element penting yang ada hampir pada setiap website. Form contact us / hubungi kami memungkinkan pengunjung untuk berkomunikasi dengan pemilik situs website tersebut.

Dengan menggunakan form kontak, pengunjung dapat dengan mudah mengirim permintaan maupun penawaran mereka untuk melakukan bisnis, memberikan opini, pendangan dan saran kepada administrator mengenai konten website, layanan atau produk.

Contact Form (Image: youtube.com)

Selain itu informasi yang disampaikan dapat dikirim kepada pemilik website ataupun administrator melalui email.

Seperti sudah kita singgung sebelumnya, form kontak bisa membantu pemilik website untuk menerima penawaran maupun permintaan bisnis dari pengunjung dan dengan begitu bisa lansung memberikan respon terhadap kiriman tersebut.

Singkatnya, form kontak memungkinkan pengunjung untuk menghubungi pemilik website dengan mudah dan cepat.

Membuat contact form dengan PHP yang terkirim ke email

Pada tutorial kali ini Jurnalweb akan memberikan cara membuat form kontak dengan PHP dan mengintegrasikannya ke dalam website Anda, sehingga cukup dalam 5 menit Anda sudah bisa memiliki di dalam website Anda.

Untuk memudahkan Anda dalam memahami, kami akan memisahkan script HTML dan PHP. Anda dapat menambahkan kode ini secara bersamaan pada website yang Anda inginkan.

Membuat tampilan contact form dengan HTML

Pertama kita perlu untuk membuat tampilan form kontak ini dengan menggunakan HTML, dimana kita akan membuat kolom untuk menuliskan nama, email, subjek dan isi pesan, serta sebuah tombol Kirim yang akan menjadi pemicu terkirimnya pesan.

<div class="mainContent"> <h2>Kontak Form PHP / <small><a href="http://www.jurnalweb.com">Jurnalweb.com</a></small></h2> <div class="contactFrm"> <?php if(!empty($statusMsg)){ ?> <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p> <?php } ?> <form action="" method="post"> <h4>Name</h4> <input type="text" name="name" placeholder="Nama Anda" required=""> <h4>Email </h4> <input type="email" name="email" placeholder="email@example.com" required=""> <h4>Subject</h4> <input type="text" name="subject" placeholder="Tulis subject" required=""> <h4>Message</h4> <textarea name="message" placeholder="Tulis pesan Anda disini" required=""> </textarea> <input type="submit" name="submit" value="Submit"> <div class="clear"> </div> </form> </div> </div>

Script PHP untuk menangani kiriman data

Setelah tampilan form dibuat, tentu kita butuh script untuk menangani kiriman data dari form tersebut, untuk itu kita membutuhkan PHP untuk melakukan proses pengiriman data ke email si pemilik website.

Email dikirim akan di validasi terlebih dahulu dengan menggunakan fungsi FILTER_VALIDATE_EMAIL, setelah email dianggap benar maka pesan akan dikirim ke emaildengan menggunakan fungsi mail().

$statusMsg = ''; $msgClass = ''; if(isset($_POST['submit'])){ // Get the submitted form data $email = $_POST['email']; $name = $_POST['name']; $subject = $_POST['subject']; $message = $_POST['message']; // Cek apakah ada data yang belum diisi if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){ if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){ $statusMsg = 'Please enter your valid email.'; $msgClassk = 'errordiv'; }else{ // Pengaturan penerima email dan subjek email $toEmail = 'email@namadomain.com'; // Ganti dengan alamat email yang Anda inginkan $emailSubject = 'Pesan website dari '.$name; $htmlContent = '<h2> via Form Kontak Website</h2> <h4>Name</h4><p>'.$name.'</p> <h4>Email</h4><p>'.$email.'</p> <h4>Subject</h4><p>'.$subject.'</p> <h4>Message</h4><p>'.$message.'</p>'; // Mengatur Content-Type header untuk mengirim email dalam bentuk HTML $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; // Header tambahan $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n"; // Send email if(mail($toEmail,$emailSubject,$htmlContent,$headers)){ $statusMsg = 'Pesan Anda sudah terkirim dengan sukses !'; $msgClass = 'succdiv'; }else{ $statusMsg = 'Maaf pesan Anda gagal terkirim, silahkan ulangi lagi.'; $msgClass = 'errordiv'; } } }else{ $statusMsg = 'Harap mengisi semua field data'; $msgClass = 'errordiv'; } }

Mempercantik tampilan dengan CSS

Agar tampilan lebih menarik maka kita bisa menambahkan script berikut ini.

.mainContent { width: 35%; margin: 2.5em auto; background: #fff; padding: 2.5em; } .contactFrm h4 { font-size: 1em; color: #252525; margin-bottom: 0.5em; font-weight: 300; letter-spacing: 5px; } .contactFrm input[type="text"], .contactFrm input[type="email"] { width: 70%; outline: none; font-size: 0.9em; padding: .7em 1em; border: 1px solid #000; -webkit-appearance: none; display: block; margin-bottom: 1.2em; } .contactFrm textarea { resize: none; width: 93.5%; font-size: 0.9em; outline: none; padding: .6em 1em; border: 1px solid #000; min-height: 10em; -webkit-appearance: none; } .contactFrm input[type="submit"] { outline: none; color: #FFFFFF; padding: 0.5em 0; font-size: 1em; margin: 1em 0 0 0; -webkit-appearance: none; background: #006faa; transition: 0.5s all; border: 2px solid #006faa; -webkit-transition: 0.5s all; transition: 0.5s all; -moz-transition: 0.5s all; width: 47%; cursor: pointer; } .contactFrm input[type="submit"]:hover { background: none; color: #006faa; } p.statusMsg{font-size:18px;} p.succdiv{color: #008000;} p.errordiv{color:#E80000;}

Tidak ada yang terlalu spesial dari script CSS ini, hanya ada atribut input[type=”text”], input[type=”email”] dan input[type=”submit”] yang digunakan untuk menargetkan secara khusus pada field dengan tipe teks, email ataupun submit.