Membuat contact form php part 2: dilengkapi captcha ~ Indonesia Info Ku

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 contact.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.

3 comments:

Unknown5 March 2015 at 00:39
Saya sudah coba tutorialnya, berhasil buat contact form nya
Tapi ketika di coba kok gak bisa send ya mas
Mohon dibantu.
webnya: www.spiritindonesia.co.id
Terima kasih
Unknown5 April 2015 at 00:00
itu untuk captcha nya kok gk muncul ya??? saya coba disini >> http://wikymovies.site88.net/contact.php

Perhatian
- Berkomentarlah Dengan Sopan Dan Baik
- Mohon Untuk Tidak Berkomentar Junk, Sara, Promosi Web/Blog, Dll
- Bila Mendapat Kesulitan, Silahkan Hubungi Admin ( Klik Disini )
Terima Kasih...

Indonesia Info Ku