Home » Tips & Trik » Membuat Form Kontak Menggunakan Simple PHP Script
12 Desember 2010
Jika pada posting sebelumnya tentang cara membuat form kontak dengan menggunakan google docs & online form generator, sekarang sedikit mengulas tentang Cara Membuat Kontak Form Dengan Menggunakan Simple PHP Script.
Langsung saja & tanpa banyak basa-basi. Begini tahapannya:
Buat dahulu file phpnya.
[php]
<?php
if(!$_POST) exit;
$email = $_POST['email'];
//$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $_POST['email']) ? '' : 'INVALID EMAIL ADDRESS';
if(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email )){
$error.="Alamat email yang anda masukkan tidak valid";
$errors=1;
}
if($errors==1) echo $error;
else{
$values = array ('nama','email','pesan');
$required = array('nama','email','pesan');
$your_email = "emailanda@email.com";
$email_subject = "Pesan baru: ".$_POST['subject'];
$email_content = "Isi pesan:\n";
foreach($values as $key => $value){
if(in_array($value,$required)){
if ($key != 'subject' && $key != 'subject') {
if( empty($_POST[$value]) ) { echo 'Jangan kosongkan field yang wajib diisi'; exit; }
}
$email_content .= $value.': '.$_POST[$value]."\n";
}
}
if(@mail($your_email,$email_subject,$email_content)) {
echo 'Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.';
} else {
echo 'ERROR!';
}
}
?>
[/php]
Copy dan pastekan kode di atas pada text editor (notepad misalnya) dan berilah nama terserah & diakhiri dengan file extention php (.php), atau;
Download filenya di sini.
Yang harus anda edit:
"Alamat email yang anda masukkan tidak valid" → Notifikasi ke visitor jika input alamat email yang di isi tidak valid.
"emailanda@email.com" → alamat email dimana seluruh konten isi pesan akan dikirimkan (isikan dengan alamat email anda).
"Pesan baru: ".$_POST['subject']" → Subjek pesan yang akan ditampilkan di alamat email anda (Pesan baru: diikuti dengan subjek pesan yang diisikan pada form kontak). Ganti tulisan "Subjek pesan:" dengan text terserah anda.
"Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda." → Ganti dengan kata-kata anda.
Upload file php di atas ke web server, atau jika anda akan menggunakan form kontak ini di blogspot, upload ke google site.
Selanjutnya, copy dan pastekan kode di bawah ini antara tag "<head> Kode di sini </head>" (blogspot → sisipkan kode ini pada tab "Edit HTML").
[jscript]
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
Nama: $('#nama').val(),
eMail: $('#email').val(),
Subject: $('#subject').val(),
Pesan: $('#pesan').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'');
$('.response').slideDown();
if(data=='Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.') $('#contactform').slideUp();
}
);
return false;
});
});
// ]]>
</script>
[/jscript]
Buat property css untuk kontak form. CSS ini terserah mau anda buat seperti apa, namun ID form harus sama dengan tag ID & Class yang ada pada kode script di atas ("#contactform" dan ".response").
Untuk blogspot, copy dan pastekan kode di bawah ini di atas kode "]]>" pada tab "Edit HTML".
[css]
#contactform {margin:0; padding:5px 10px;}
#contactform * {color:#222222;}
#contactform ol {margin:0; padding:0; list-style:none;}
#contactform li {margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons {margin:5px 0 5px 0;}
#contactform label {margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span {display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text {width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:16px; background:#f5f5f5;}
#contactform input.text:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform input.text:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform textarea {width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform textarea:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform textareat:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform li.buttons input {padding:3px 0; margin:0; border:0; color:#FFF;}
p.response {text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto; }
#contactform li.buttons {margin:5px 0 5px 0;}
.kirimpesan {margin: 1em 0 1em 0; width: 116px; height: 30px; position: relative; overflow: hidden; padding: 0; border: none; }
.kirimpesan input{background: url(kirim_pesan.jpg) 0 0 no-repeat; width: 116px; height:30px; float:left; padding: 0; overflow: hidden; border: 0; text-indent: -9000px; cursor: pointer;}
.kirimpesan input:hover{background-position: 0 -30px;}
[/css]
Sekarang tinggal buat halaman presentasi (visual) kontak form. Kode html nya seperti contoh di bawah ini:
[html]
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Nama <span>Isikan nama anda</span></label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Email <span style="text-align:left">Isikan alamat email valid</span></label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="subject">Subjek <span>Subjek pesan anda</span></label>
<input id="subject" name="subject" class="text" />
</li>
<li>
<label for="message">Pesan <span style="text-align:left">Yang ingin anda sampaikan</span></label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li class="buttons">
<span class="kirimpesan"><input name="imageField" type="submit" /></span>
</li>
</ol>
</form>
[/html]
Ganti "contact.php" dengan alamat url dimana script php contact anda letakkan.
Tampilannya akan seperti ini:
Selesai. Semua pesan yang diisikan melalui form kontak di atas akan dikirimkan ke alamat email sesuai dengan alamat email pilihan anda.
Monggo dicoba.
Membuat Form Kontak Menggunakan Simple PHP Script
Jika pada posting sebelumnya tentang cara membuat form kontak dengan menggunakan google docs & online form generator, sekarang sedikit mengulas tentang Cara Membuat Kontak Form Dengan Menggunakan Simple PHP Script.
Langsung saja & tanpa banyak basa-basi. Begini tahapannya:
Buat dahulu file phpnya.
[php]
<?php
if(!$_POST) exit;
$email = $_POST['email'];
//$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $_POST['email']) ? '' : 'INVALID EMAIL ADDRESS';
if(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email )){
$error.="Alamat email yang anda masukkan tidak valid";
$errors=1;
}
if($errors==1) echo $error;
else{
$values = array ('nama','email','pesan');
$required = array('nama','email','pesan');
$your_email = "emailanda@email.com";
$email_subject = "Pesan baru: ".$_POST['subject'];
$email_content = "Isi pesan:\n";
foreach($values as $key => $value){
if(in_array($value,$required)){
if ($key != 'subject' && $key != 'subject') {
if( empty($_POST[$value]) ) { echo 'Jangan kosongkan field yang wajib diisi'; exit; }
}
$email_content .= $value.': '.$_POST[$value]."\n";
}
}
if(@mail($your_email,$email_subject,$email_content)) {
echo 'Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.';
} else {
echo 'ERROR!';
}
}
?>
[/php]
Copy dan pastekan kode di atas pada text editor (notepad misalnya) dan berilah nama terserah & diakhiri dengan file extention php (.php), atau;
Download filenya di sini.
Yang harus anda edit:
"Alamat email yang anda masukkan tidak valid" → Notifikasi ke visitor jika input alamat email yang di isi tidak valid.
"emailanda@email.com" → alamat email dimana seluruh konten isi pesan akan dikirimkan (isikan dengan alamat email anda).
"Pesan baru: ".$_POST['subject']" → Subjek pesan yang akan ditampilkan di alamat email anda (Pesan baru: diikuti dengan subjek pesan yang diisikan pada form kontak). Ganti tulisan "Subjek pesan:" dengan text terserah anda.
"Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda." → Ganti dengan kata-kata anda.
Upload file php di atas ke web server, atau jika anda akan menggunakan form kontak ini di blogspot, upload ke google site.
Selanjutnya, copy dan pastekan kode di bawah ini antara tag "<head> Kode di sini </head>" (blogspot → sisipkan kode ini pada tab "Edit HTML").
[jscript]
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
Nama: $('#nama').val(),
eMail: $('#email').val(),
Subject: $('#subject').val(),
Pesan: $('#pesan').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'');
$('.response').slideDown();
if(data=='Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.') $('#contactform').slideUp();
}
);
return false;
});
});
// ]]>
</script>
[/jscript]
Buat property css untuk kontak form. CSS ini terserah mau anda buat seperti apa, namun ID form harus sama dengan tag ID & Class yang ada pada kode script di atas ("#contactform" dan ".response").
Untuk blogspot, copy dan pastekan kode di bawah ini di atas kode "]]>" pada tab "Edit HTML".
[css]
#contactform {margin:0; padding:5px 10px;}
#contactform * {color:#222222;}
#contactform ol {margin:0; padding:0; list-style:none;}
#contactform li {margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons {margin:5px 0 5px 0;}
#contactform label {margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span {display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text {width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:16px; background:#f5f5f5;}
#contactform input.text:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform input.text:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform textarea {width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform textarea:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform textareat:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform li.buttons input {padding:3px 0; margin:0; border:0; color:#FFF;}
p.response {text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto; }
#contactform li.buttons {margin:5px 0 5px 0;}
.kirimpesan {margin: 1em 0 1em 0; width: 116px; height: 30px; position: relative; overflow: hidden; padding: 0; border: none; }
.kirimpesan input{background: url(kirim_pesan.jpg) 0 0 no-repeat; width: 116px; height:30px; float:left; padding: 0; overflow: hidden; border: 0; text-indent: -9000px; cursor: pointer;}
.kirimpesan input:hover{background-position: 0 -30px;}
[/css]
Sekarang tinggal buat halaman presentasi (visual) kontak form. Kode html nya seperti contoh di bawah ini:
[html]
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Nama <span>Isikan nama anda</span></label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Email <span style="text-align:left">Isikan alamat email valid</span></label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="subject">Subjek <span>Subjek pesan anda</span></label>
<input id="subject" name="subject" class="text" />
</li>
<li>
<label for="message">Pesan <span style="text-align:left">Yang ingin anda sampaikan</span></label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li class="buttons">
<span class="kirimpesan"><input name="imageField" type="submit" /></span>
</li>
</ol>
</form>
[/html]
Ganti "contact.php" dengan alamat url dimana script php contact anda letakkan.
Tampilannya akan seperti ini:
Selesai. Semua pesan yang diisikan melalui form kontak di atas akan dikirimkan ke alamat email sesuai dengan alamat email pilihan anda.
Monggo dicoba.
Langganan:
Posting Komentar (Atom)
Not respond gan
BalasHapusi need juga. tolong dong gmn kalo di blogger. pas terakhir ane gak ngerti
BalasHapus