Selamat, Anda sudah bisa membuat Form Contact di WordPress tanpa menggunakan plugin. Happy Blogging !
Cara Mudah Membuat Contact Form di WordPress Tanpa Plugin
Salah satu kelebihan WordPress.org adalah melimpahnya Plugin untuk memanjakan para pengguna WordPress dalam mengatasi berbagai kebutuhan dalam nge-blog. Namun semakin banyak Plugin yang Anda pasang, performa blog kita akan berkurang kecepatan aksesnya. Saya pribadi sebisa mungkin mengurangi ketergantungan atas plugin, sekaligus sebagai sarana untuk memperdalam pemrograman PHP, khususnya coding PHP di WordPress.
Menu Contact merupakan suatu keharusan dalam nge-blog. Dengan adanya menu contact, selain menjaga komunikasi dengan para pengujung juga agar Blog kita terlihat professional atau asal-asalan. Terlebih lagi jika Anda berniat blog Anda untuk didaftarkan ke Google Adsen, maka adanya menu Contact konon katanya salah satu persyaratan agar blog kita di-approve oleh Google Adesense.
Pada kesempatan ini, saya akan menjelaskan bagaimana membuat Contact Form tanpa plugin. Berikut ini langkahnya:
MEMBUAT FILE TEMPLATE CONTACT FORM
Silakan buat file dengan nama contact.php atau apapun yang Anda suka. Sebelum memasukan kode, agar tampilan form contact ini sesuai dengan theme, sebaiknya meng-copy dari file single.php. Berikut tampilan kode file single.php:
<?php get_header(); ?>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Page Content Column -->
<div class="col-lg-8 page-title">
<!-- Blog Post -->
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Title -->
<h2><?php the_title(); ?></h2>
<!-- Post Content -->
<p><?php the_content(); ?></p>
<!-- Letak Form Contact -->
<?php endwhile; ?>
<?php else : ?>
<?php __('Sorry, Posts not found!') ?>
<?php endif; ?>
</div><!-- col-lg-8 -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Pada baris ke-16 ini akan diletakkan form kontak. Sebelum itu, silakan masukkan kode berikut pada bagian atas, persis sebelum <?php get_header(); ?> :
<?php
/**
* Template Name: Contact Me
*/
?>
<?php
//response generation function
$response = "";
//function to generate response
function my_contact_form_generate_response($type, $message){
global $response;
if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";
}
//response messages
$not_human = '<div class="alert alert-danger" role="alert">Human verification salah!</div>';
$missing_content = '<div class="alert alert-danger" role="alert">Semua Form wajib diisi!</div>';
$email_invalid = '<div class="alert alert-danger" role="alert">Harap masukan email yang valid!</div>';
$message_unsent = "Pesan Anda GAGAL dikirim, silakan ulangi lagi!";
$message_sent = '<div class="alert alert-success" role="alert">Terima kasih, pesan Anda berhasil dikirim. Kami akan merespon pesan Anda sesegera mungkin. <em>Happy Blogging !</em></div>';
//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$message = $_POST['message_text'];
$human = $_POST['message_human'];
//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers = 'From: '. $email . "\r\n" .
'Reply-To: ' . $email . "\r\n";
if(!$human == 0){
if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
else {
//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else //email is valid
{
//validate presence of name and message
if(empty($name) || empty($message)){
my_contact_form_generate_response("error", $missing_content);
}
else //ready to go!
{
$sent = wp_mail($to, $subject, strip_tags($message), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}
}
}
else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?>
<?php get_header(); ?>
Perhatikan kode baris ke-2 sampai ke-4, itu adalah script agar template form contact bisa dikenali di halaman admin ketika membuat Page. Pada baris ke-3 tertulis nama Contact Me, artinya template form akan dikenali dengan nama tersebut.
Langkah selanjutnya, ganti kode <!-- Letak Form Contact --> dengan kode berikut:
<!-- KODE FORM KONTAK -->
<div class="contact-form">
<div id="respond">
<?php echo $response; ?>
<form class="form-horizontal" action="<?php the_permalink(); ?>" method="post">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Nama :<span> *</span> </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>">
</div>
</div>
<div class="form-group">
<label for="message_email" class="col-sm-3 control-label">Email:<span> *</span> </label>
<div class="col-sm-9">
<input type="email" class="form-control" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>">
</div>
</div>
<div class="form-group">
<label for="message_text" class="col-sm-3 control-label">Pesan:<span> *</span></label>
<div class="col-sm-9">
<textarea name="message_text" class="form-control" rows="5"><?php echo esc_textarea($_POST['message_text']); ?></textarea>
</div>
</div>
<div class="form-group">
<label for="message_human" class="col-sm-3 control-label">Human Verification:<span> *</span> </label>
<div class="form-group">
<div class="col-sm-1">
<input type="text" class="form-control" name="message_human" />
</div>
<label class="control-label">+ 3 = 5</label>
</div>
</div>
<input type="hidden" name="submitted" value="1">
<p>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-7">
<button type="submit" class="btn btn-danger">Kirim Email</button>
</div>
</div>
</form>
</div>
</div>
<!-- AKHIR KODE FORM KONTAK -->
Sehingga isi keseluruhan file contact.php, seharusnya seperti ini:
<?php
/**
* Template Name: Page Contact
*/
?>
<?php
//response generation function
$response = "";
//function to generate response
function my_contact_form_generate_response($type, $message){
global $response;
if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";
}
//response messages
$not_human = '<div class="alert alert-danger" role="alert">Human verification salah!</div>';
$missing_content = '<div class="alert alert-danger" role="alert">Semua Form wajib diisi!</div>';
$email_invalid = '<div class="alert alert-danger" role="alert">Harap masukan email yang valid!</div>';
$message_unsent = "Pesan Anda GAGAL dikirim, silakan ulangi lagi!";
$message_sent = '<div class="alert alert-success" role="alert">Terima kasih, pesan Anda berhasil dikirim. Kami akan merespon pesan Anda sesegera mungkin. <em>Happy Blogging !</em></div>';
//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$message = $_POST['message_text'];
$human = $_POST['message_human'];
//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers = 'From: '. $email . "\r\n" .
'Reply-To: ' . $email . "\r\n";
if(!$human == 0){
if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
else {
//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else //email is valid
{
//validate presence of name and message
if(empty($name) || empty($message)){
my_contact_form_generate_response("error", $missing_content);
}
else //ready to go!
{
$sent = wp_mail($to, $subject, strip_tags($message), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}
}
}
else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?>
<?php get_header(); ?>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Page Content Column -->
<div class="col-lg-8 page-title">
<!-- Blog Post -->
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Title -->
<h2><?php the_title(); ?></h2>
<!-- Post Content -->
<p><?php the_content(); ?></p>
<!-- KODE FORM KONTAK -->
<div class="contact-form">
<div id="respond">
<?php echo $response; ?>
<form class="form-horizontal" action="<?php the_permalink(); ?>" method="post">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Nama :<span> *</span> </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>">
</div>
</div>
<div class="form-group">
<label for="message_email" class="col-sm-3 control-label">Email:<span> *</span> </label>
<div class="col-sm-9">
<input type="email" class="form-control" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>">
</div>
</div>
<div class="form-group">
<label for="message_text" class="col-sm-3 control-label">Pesan:<span> *</span></label>
<div class="col-sm-9">
<textarea name="message_text" class="form-control" rows="5"><?php echo esc_textarea($_POST['message_text']); ?></textarea>
</div>
</div>
<div class="form-group">
<label for="message_human" class="col-sm-3 control-label">Human Verification:<span> *</span> </label>
<div class="form-group">
<div class="col-sm-1">
<input type="text" class="form-control" name="message_human" />
</div>
<label class="control-label">+ 3 = 5</label>
</div>
</div>
<input type="hidden" name="submitted" value="1">
<p>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-7">
<button type="submit" class="btn btn-danger">Kirim Email</button>
</div>
</div>
</form>
</div>
</div>
<!-- KODE FORM KONTAK -->
<?php endwhile; ?>
<?php else : ?>
<?php __('Sorry, Posts not found!') ?>
<?php endif; ?>
</div><!-- col-lg-8 -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
MEMBUAT FORM TAMPILAN DI PAGE
Silakan buat halaman baru pada menu Pages -> Add New. Buat nama page, misalnya Contact agar muncul di menu page. Isi biarkan kosong, kemudian klik pada bagian Page Attributes klik Template dan pilih Contact Me seperti gambar di atas. Akhiri dengan klik Publish.
