Hai Coders kali ini kita akan membahas 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 email dengan menggunakan fungsi mail().
$statusMsg = '';
$msgClass = '';
if(isset($_POST['submit'])){
$email = $_POST['email'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$message = $_POST['message'];
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{
$toEmail = 'email@namadomain.com';
$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>';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
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.
DEMO | DOWNLOAD
Jika Anda tertarik untuk dengan form kontak dengan PHP ini, Anda bisa melihat
DEMO dan download script nya
disini.
Pada beberapa domain website, email akan masuk ke dalam spam, untuk menghindari jika terjadi hal demikian, Anda juga bisa menggunakan SMTP khusus seperti SMTP gmail.
0 komentar:
Posting Komentar