Dalam sebuah blog biasanya terdapat halaman kontak untuk menghubungi pemilik blog tersebut. Bagi pengguna WordPress, ada cukup banyak plugin untuk membuat/menampilkan form kontak seperti Contact Form 7, Super Contact Form dan lain-lain. Silakan anda cari sendiri di Directory Plugin WordPress.
Nah gimana kalau kita bikin sendiri aja? Caranya gamnpang kok. Silakan ikuti tutorial berikut.
Langkah 1: Membuat Page Template Form Kontak
Buatlah sebuah file baru di direktori theme WordPress anda dan beri nama “form-kontak.php”. Kemudian buka file yang kita buat dan masukkan baris kode berikut:
<?php
/* Template Name: Form Kontak */
?>
Langkah 2: Membuat the_loop() dari Form Kontak
Setiap post template WordPress harus menggunakan template tag the_loop() agar bisa menampilkan konten dari halaman. Jadi sekarang mari kita buat the_loop()-nya dulu. Silakan masukkan kode berikut :
<?php get_header(); //Memanggil header.php (header blog) ?>
<div id="kontak"><!--Kontak Wrapper-->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); //Akhir the_loop ?>
<?php endwhile; ?>
<?php endif; ?>
</div><!--Akhir Kontak Wrapper-->
<?php get_footer(); //Memanggil footer.php (footer blog) ?>
Langkah 3: Membuat Form Komentar
Kode pada langkah 2 adalah kode standar dari setiap post template WordPress (single.php, index.php, archives.php, dan search.php), sekarang kita mulai masuk bagian inti, yaitu membuat form komentar. Oke sekarang masukkan kode berikut di bawah <?php the_content(); //Akhir the_loop ?>
<!-- Form Komentar -->
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<p>Silakan menghubungi saya via form kontak berikut ini</p><!-- Kata pembuka yang ditampilkan di bagian atas form komentar -->
<p><label for="contactName">Name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</p>
<p><label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</p>
<p class="textarea"><label for="commentsText">Pesan</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</p>
<p class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda</label></p>
<p class="screenReader"><label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></p><!--Chaptca rahasia-->
<p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Kirim »</button></p>
</form>Langkah 4: Mengatur Fungsi Form
Kita sudah memiliki form komentar, tapi belum berfungsi apa-apa karena pengaturan form kontaknya belum dibuat. Sekarang kita atur dulu fungsi form, masukkan kode berikut di atas template tag <?php get_header(); //Memanggil header.php (header blog) ?> :
<?php
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
//Mengecek apakah chaptcha rahasia terisi
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {
//Mengecek apakah kolom nama sudah diisi
if(trim($_POST['contactName']) === '') {
$nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//Mengecek apakah kolom alamat email sudah diisi dan valid
if(trim($_POST['email']) === '') {
$emailError = 'Anda lupa memasukkan alamat email anda';//Pesan error jika kolom email kosong
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'Alamat email yang Anda masukkan salah';//Pesan error jika alamat email tidak valid
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Mengecek apakah kolom isi pesan sudah disi
if(trim($_POST['comments']) === '') {
$commentError = 'Apakah anda mau mengirim pesan kosong? silakan diisi dulu pesan anda';//Pesan error jika kolom pesan masih kosong
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
//Mengirimkan pesan, jika semua kolom telah diisi dengan valid
if(!isset($hasError)) {
$emailTo = 'name@domain.com';//Alamat email tujuan, ganti dengan email anda
$subject = 'Pesan via blog dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
$sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
$body = "Name: $name \n\nEmail: $email \n\nPesan anda: $comments";//Isi Email
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
mail($emailTo, $subject, $body, $headers);
if($sendCopy == true) {
$subject = 'Salinan pesan anda di blog Cekerholic';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
$headers = 'From: Blog Aris FM <name@domain.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
mail($email, $subject, $body, $headers);
}
$emailSent = true;
}
}
} ?>Sekarang form kontak kita sudah berfungsi, masih ada beberapa langkah lagi agar form kontak semakin sempurna.
Langkah 5: Membuat pemberitahuan bahwa pesan yang dikirim telah sampai
Pengirim pesan tentu penasaran apakah pesan yang dikirimnya sampai atau tidak, untuk itu kita perlu menampilkan pemberitahuan bahwa pesan mereka telah terkirim atau tidak, silakan masukkan kode berikut di bawah kode <div id="kontak"><!--Kontak Wrapper-->
<?php if(isset($emailSent) && $emailSent == true) { ?>
<h1>Terima kasih, <?=$name;?></h1>
<p>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin :)</p>
<?php } else { ?>dan kode berikut di atas baris <!-- Form Komentar -->
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Maaf, tampaknya ada masalah dalam mengirim pesan Anda, silakan dicoba lagi<p>
<?php } ?>terakhir masukkan kode berikut ini di atas tag </div><!--Akhir Kontak Wrapper-->
Berikut hasil akhir dari Form Kontak yang baru kita buat:
<?php
/* Template Name: Form Kontak */
?>
<?php
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
//Mengecek apakah chaptcha rahasia terisi
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {
//Mengecek apakah kolom nama sudah diisi
if(trim($_POST['contactName']) === '') {
$nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
//Mengecek apakah kolom alamat email sudah diisi dan valid
if(trim($_POST['email']) === '') {
$emailError = 'Anda lupa memasukkan alamat email anda';//Pesan error jika kolom email kosong
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'Alamat email yang Anda masukkan salah';//Pesan error jika alamat email tidak valid
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Mengecek apakah kolom isi pesan sudah disi
if(trim($_POST['comments']) === '') {
$commentError = 'Apakah anda mau mengirim pesan kosong? silakan diisi dulu pesan anda';//Pesan error jika kolom pesan masih kosong
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
//Mengirimkan pesan, jika semua kolom telah diisi dengan valid
if(!isset($hasError)) {
$emailTo = 'name@domain.com';//Alamat email tujuan, ganti dengan email anda
$subject = 'Pesan via blog dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
$sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
$body = "Name: $name \n\nEmail: $email \n\nPesan anda: $comments";//Isi Email
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
mail($emailTo, $subject, $body, $headers);
if($sendCopy == true) {
$subject = 'Salinan pesan anda di blog Cekerholic';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
$headers = 'From: Blog Aris FM <name@domain.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
mail($email, $subject, $body, $headers);
}
$emailSent = true;
}
}
} ?>
<?php get_header(); //Memanggil header.php (header blog) ?>
<div id="kontak"><!--Kontak Wrapper-->
<?php if(isset($emailSent) && $emailSent == true) { ?>
<h1>Terima kasih, <?=$name;?></h1>
<p>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin :)</p>
<?php } else { ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); //Akhir the_loop ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Maaf, tampaknya ada masalah dalam mengirim pesan Anda, silakan dicoba lagi<p>
<?php } ?>
<!-- Form Komentar -->
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<p>Silakan menghubungi saya via form kontak berikut ini</p><!-- Kata pembuka yang ditampilkan di bagian atas form komentar -->
<p><label for="contactName">Name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</p>
<p><label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</p>
<p class="textarea"><label for="commentsText">Pesan</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</p>
<p class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda</label></p>
<p class="screenReader"><label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></p><!--Chaptca rahasia-->
<p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Kirim »</button></p>
</form>
<?php endwhile; ?>
<?php endif; ?>
<?php } ?>
</div><!--Akhir Kontak Wrapper-->
<?php get_footer(); //Memanggil footer.php (footer blog) ?>Langkah 6: Mengatur Tampilan Form Kontak
Form kontak kita memang sudah jadi, tapi tampilannya belum diatur kan? sekarang mari kita atur tampilannya dengan CSS. Masukkan kode ini di style.css :
#kontak {margin:0 auto;overflow:hidden;width:auto;}
#kontak form{float:left;margin:50px 0;width:100%}
#kontak label {cursor:pointer;display: block;float: left;padding-right: 20px;width: 100px;}
#kontak input, #kontak textarea {width: 214px;}
#kontak textarea { height: 300px; width:500px; }
#kontak input:focus, ol#kontak textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
#kontak p .error { font-size: 12px; margin-left: 20px; }
#kontak p.textarea .error {display: block;position: absolute;right: 0;top: 0;width: 100px;}
#kontak p.screenReader { margin-bottom: 0; }
#kontak p.inline input { width: auto; }
#kontak p.inline label { display: inline; float: none; width: auto; }Langkah 7: Menampilkan Form Kontak di blog
Yay! akhirnya sampai juga di langkah terakhir. Langkah ini cukup mudah, yang perlu dilakukan hanyalah masuk ke dasbor WordPress, buat page baru, buat judul page dan aktifkan page template Form Kontak.
Cara mengaktifkan halaman kontak
Dan ….. taraaaaa! form kontak blog kita udah jadi. Contohnya silakan dilihat di halaman kontak blog saya.
Jika anda malas mengikuti tutorialnya, silakan download file-nya dengan mengklik tombol ini :
DOWNLOAD
