Twitter

Sunday, February 26, 2012

alamindawa

alamindawa


Membuat contact form php part 2: dilengkapi captcha

Posted: 26 Feb 2012 02:13 AM PST

Sebelumnya saya pernah menulis mengenai contact form “Membuat contact form sederhana dengan php“. Silahkan baca juga tulisan tersebut. Tulisan ini melanjutkan percobaan saya mengenai contact form tersebut. Bedanya pada contact form kali ini menggunakan fungsi mail berbeda dan dilengkapi captcha untuk menghindari script spam. berikut scriptnya:

DEMO: klik di sini

contact.php

<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>PHP Contact Form - alamindawa.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <?php if (isset($_POST['submit'])) { $error = "";  if (!empty($_POST['name'])) { $name = $_POST['name']; } else { $error .= "Anda lupa menuliskan nama. <br />"; }  if (!empty($_POST['email'])) { $email = $_POST['email']; if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){ $error .= "Alamat email yang anda masukkan tidak valid. <br/>"; } } else { $error .= "Anda lupa menuliskan alamat e-mail. <br />"; }  if (!empty($_POST['message'])) { $message = $_POST['message']; } else { $error .= "Anda lupa menuliskan pesan. <br />"; }  if(($_POST['code']) == $_SESSION['code']) { $code = $_POST['code']; } else { $error .= "Angka yang anda masukkan tidak cocok. Silahkan coba lagi. <br />"; }  if (empty($error)) { $from = 'From: ' . $name . ' <' . $email . '>'; $to = "email@kamu.disini"; $subject = "Ada pesan baru dari $name"; $content = $name . " mengirimkan anda pesan/pertanyaan: \n" . $message; $success = "<h3>Terima kasih! Pesan anda telah di kirim!</h3>"; mail($to,$subject,$content,$from); } } ?>  <div id="contactForm"> <div style="background-color:white; padding:5px; border: 1px solid #009999; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; height: 460px; overflow: hidden; width: 580px;"><div style=""> <h2>Hubungi saya</h2>  <?php if (!empty($error)) { echo '<p class="error">Pesan anda belum terkirim<br/> Perbaiki kesalahan berikut:<br/><strong>' . $error . '</strong></p>'; } elseif (!empty($success)) { echo $success; } ?>  <form action="contact.php" method="post">  <label>Nama:</label> <input type="text" name="name" value="<?php if ($_POST['name']) { echo $_POST['name']; } ?>" />  <label>Email:</label> <input type="text" name="email" value="<?php if ($_POST['email']) { echo $_POST['email']; } ?>" />  <label>Pesan/pertanyaan:</label><br /> <textarea name="message" rows="20" cols="20"><?php if ($_POST['message']) { echo $_POST['message']; } ?></textarea>  <label><img src="captcha.php"></label> <input type="text" name="code"> <br /> Angka Anti-spam: (Diperlukan) <input type="submit" class="submit" name="submit" value="Kirim" />  </form> </div></div> </div> </body> </html>

captcha.php

<?php session_start(); // awal dari session $image = imagecreate(50, 20); //membuat gambar kosong (lebar, tinggi). ini bisa anda ganti ukurannya. $bgcolor = imagecolorallocate($image, 0, 0, 0); //menambahkan warna pada latar belakang (RGB). $textcolor = imagecolorallocate($image, 255, 255, 255); //add text/code color with RGB. $code = rand(1000, 9999); //membuat angka acak antara 1000 dan 9999  $_SESSION['code'] = ($code); //menambahkan angka acak ke session 'code' imagestring($image, 10, 8, 3, $code, $textcolor); //membuat gambar dengan semua pengaturan diatas. header ("Content-type: image/png"); // mendefenisikan tipe gambar imagepng($image); //menampilkan gambar dengan format PNG ?>

style.css

#contactForm { margin-top: 30px; width: 500px; } #contactForm input, #contactForm textarea { border: 1px solid #ccc; font-family: Helvetica, arial, sans-serif; font-size: 14px; margin: 0px 0px 10px 0px; padding: 2px; width: 379px; } #contactForm textarea { height: 100px; } #contactForm textarea:focus, #contactForm input:focus { border: 1px solid #888; } #contactForm label { float: left; font-size: 14px; margin-right: 15px; text-align: right; width: 100px; } #contactForm input.submit { cursor: pointer; float: right; width: 130px; } #contactForm h2, #contactForm h3 { margin-left: 115px; } #contactForm .error { color: #ff0000; margin-left: 115px; }

Bagian-bagian penting yang harus diperhatikan:
Tentu saja kita harus membuat 2 file php dan 1 file css baru. Seperti biasa kita akan menggunakan Notepad. Isikan masing-masing script PHP dan css diatas kemudian simpan dengan nama contact.php, captcha.php dan style.css (Save as type: All Files)

Upload semua file ke web server kamu di satu folder (jika akan dibuatkan folder lagi)

Perhatikan pada captcha.php
Line 42: Ini adalah email penerima pesan, ganti email@kamu.disini dengan alamat email kamu.

Untuk lebih mudah menambahkan contact form ini di blog/website anda, bisa menggunakan iframe pada contact.php, misalnya seperti ini:

<iframe src="http://www.nama_domain_kamu.com/contact.php" height="600px" width="100%" frameborder="0" scrolling="no"></iframe>

Download script contact form ini: klik disini

Kirimkan komentar jika ada yang ingin ditanyakan.

0 comments:

Post a Comment