Ditulis oleh: Ditulis pada: 9/12/2015
Sebenarnya tidak perlu pusing untuk membuat contact form di Wordpress, kita bisa menggunakan plugin seperti contact form 7 dengan mudah. Namun bagi mereka yang tidak senang dengan penambahan link js dan css pada source theme karena akan semakin menambah beban loading blog pasti akan berusaha untuk membuat contact form sendiri.Berbeda dengan blogspot yang sudah disediakan widget contact form blogger, untuk membuat contact form tanpa plugin di wordpress harus memiliki hosting sendiri karena menggunakan php.
Nah bagi yang ingin membuat contact form wordpress tanpa plugin, silahkan ikuti langkah-langkahnya di bawah ini.
1. Pertama
Karena ini akan kita tampilkan di page dan karena kode php untuk page setiap theme kadang berbeda-beda maka silahkan copy kode php untuk page (page.php) dan paste di notepad.
2. Kedua
Silahkan ganti kode
<?php the_content(); ?> dari kode page.php yang tadi di-copy dengan kode di bawah ini.
<?php
/*
Template Name: Contact Us
*/
if($_POST[sent]){
$error = "";
if(!trim($_POST[your_name])){
$error .= "<p>Please enter your name</p>";
}
if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
$error .= "<p>Please enter a valid email address</p>";
}
if(!trim($_POST[your_message])){
$error .= "<p>Please enter a message</p>";
}
if(!$error){
$email = wp_mail(get_option("admin_email"),trim($_POST[your_name])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nReply-To:".trim($_POST[your_email]));
}
}
?>
<?php if($email){ ?>
<p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
<?php } else { if($error) { ?>
<p><strong>Your messange hasn't been sent</strong><p>
<?php echo $error; ?>
<?php } else { the_content(); } ?>
<form action="<?php the_permalink(); ?>" id="contact_me" method="post">
<input type="hidden" name="sent" id="sent" value="1" />
<div id="form">
<div class="lebel">Your Name (required)</div>
<div class="input-field"><input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" /></div>
<div class="lebel">Your Email (required)</div>
<div class="input-field"><input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" /></div>
<div class="lebel">Subject</div>
<div class="input-field"><input type="text" name="your_subject" id="your_subject" value="<?php echo $_POST[your_subject];?>" /></div>
<div class="lebel">Your Message(required)</div>
<div class="input-field"><textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea></div>
<div class="lebel"> </div>
<div class="input-field-send"><input type="submit" name = "send" value = "Send email" /></div>
</div>
</form>
<?php } ?>
3. Ketiga
Silahkan masuk ke cpanel hosting Anda >> public_html >> wp-content >> themes >> pilih theme yang digunakan >> lalu buatlah file php baru dengan nama file contact-us.php dan paste seluruh kode page yang dibuat tadi pada langkah 1 dan 2.
4. Keempat
Sekarang silahkan buat page baru di dashboard wordpress Anda dengan title page "Contact Us". Kemudian di sebelah kanan pada Page Attributes, pada bagian template silahkan pilih Contact Us seperti pada gambar berikut:
Kemudian silahkan Publish atau publikasikan page tersebut. Silahkan cek url-nya untuk memastikan contact form sudah terpasang di page tersebut.
5. Kelima
Sekarang tinggal memperbaiki tampilan contact form tersebut. Silahkan tambahkan kode CSS di bawah ini pada Style.css
#contact_me input {line-height: 20px;width: 100%;border: 2px solid #e2e2e2;border-radius: 0;}
#contact_me input[type=text],#contact_me textarea {background: #fff;border: 2px solid #ddd;color: #777;display: block;width: 100%;outline: 0;padding: 7px 8px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#contact_me .input-field-send{margin-top:30px}
#contact_me .lebel{margin-top:10px}
#contact_me textarea{height:100px}
#contact_me input[type=submit]{background:#e8554e;color:#fff;padding:8px 14px;font-weight:600;display:inline-block;border:none;cursor:pointer;-webkit-border-radius:3px;border-radius:3px}
#contact_me input[type=submit]:hover{background:#444}
#contact_me input[type=submit]:active,#contact_me input[type=submit]:focus{outline:none}
#contact_me input[type=text]:focus,#contact_me textarea:focus{outline:0;border-color:#e8554e}
#contact_me button,#contact_me input,#contact_me textarea{-moz-appearance:none;-webkit-appearance:none;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;transition:all .2s ease}
Selesai...
Sekarang coba test contact form tersebut untuk memastikan pesan terkirim ke email admin. Jika email tidak terkirim (beberapa penyedia hosting menutup fungsi wp_mail() ini untuk menjaga spam dan pishing), maka Anda harus menggunakan plugin WP-Mail-SMTP dan konsultasikan dengan penyedia hosting Anda.
Biasanya pesan dari contact form ini akan terkirim ke email hosting, jika ingin mengirimkan pesannya ke Gmail atau lainnya, silahkan pastikan email address di Dashboard >> Setting >> General dengan Gmail Anda.
Selamat mencoba....
Sumber: http://wpapi.com/create-contact-page-wihout-wordpress-plugin/