Dalam membuat website yang baik tentu kita biasanya selalu membuat sebuah contact form yang disematkan dalam menu about atau profile atau menu lainya tergantung dari si _designer web_nya mau taru di mana tujuan dibuat contact form berfungsi agar mempermudah penggunjung untuk menghubungi kita atau juga bisa berfungsi untuk membuat kritikan, saran ataupun masukan (feedback).
Dalam postingan kali ini saya memberikan sebuah contoh pembuatan contact form sederhana dengan PHP. Langsung saja tanpa basa-basi ayo kita praktek. Pertama-tama anda harus membuat form nya terlebih dahulu, copy-paste code di bawah ini dengan notepad dan berinama index.php.
<?php
$msg="";
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$to = '[email protected]'; //Email di sini diseaikan dengan email Anda
$subject = $_POST["subject"];
$message = $_POST["pesan"];
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'To: ' . $to . "\r\n";
$headers .= 'From: '. $_POST["nama"] . $_POST["email"] . "\r\n";
/* Fitur Mail tidak di aktifkan sebab akan memunculkan Error
* jika PHP server belum di set SMTP dan SMTP_PORT nya
* Jika Anda ingin bisa menggunakan fitur mail silahkan
* Anda configurasi file php.ini dan cari section [mail function]
*
* Contoh untuk GMAIL:
[mail function]
SMTP = ssl://smtp.gmail.com
smtp_port = 465
username = [email protected]
password = myemailpassword
sendmail_from = [email protected]
* Jika sudah dikonfigurasikan dengan benar, silah kan hapus
* komentar di bawah ini. */
//mail($to, $subject, $message, $headers);
$msg="Pesan telah di kirim, terima kasih";
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Contact Form</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<div id="content">
<div id="title_form">Contact Form
<?php if ($msg!=''): ?>
<div class="msg"><p><?php echo $msg;?></p>
<?php endif;?>
<form method="POST">
<table border="0">
<tr>
<td><div class="label_width">Nama</td>
<td><input type="text" name="nama" class="text_width"/></td>
</tr>
<tr>
<td><div class="label_width">Email</td>
<td><input type="text" name="email" class="text_width"/></td>
</tr>
<tr>
<td><div class="label_width">Subject</td>
<td><input type="text" name="subject" class="text_width"/></td>
</tr>
<tr>
<td><div class="label_width">Pesan</td>
<td><textarea name="pesan" class="text_width"></textarea></td>
</tr>
<tr><td></td><td><input type="submit" name="kirim" value="Kirim" style="float:right;height:30px;width: 100px"/></td></tr>
</table>
</form>
</body>
</html>
Kemudian buat _style_nya, copy-paste kode di bawah ini dengan notepad dan berinama** **style.css
body{background-color:#f1f1f1;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
padding:0px;margin:0px;}
#content{left:30%;border:1px solid #ccc;}
#container{
height:150px;
margin-top:10%;
background-repeat:repeat-x, repeat-y;
}
#container #content{
border:0px #000 solid;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
padding-top:30px;
padding-bottom:30px;
padding-left:35px;
/* jarak kanan dan kiri */
margin-left:30%;
margin-right:33%;
background:white;
}
#title_form{border-bottom:1px solid #ccc;
text-shadow:1px 1px #ccc;font-size:24px;
font-weight:bold;
width:430px;
margin-bottom:10px;
}
.label_width{width:70px;}
.text_width{width:350px};
.btn{width: 800px;}
.msg{height:30px;width:430px;background: #ccc}
.msg p{text-shadow:1px 1px #f1f1f1;text-align:center;padding:5px;}
Selesai, semoga bermanfaat.
Komentar