Feb 4, 2017

Cara Membuat Contact Form di Wordpress Tanpa Plugin

Contact Wp

Penggunaan penambahan Contact Form pada Wordpres sangat disarankan sebagai salah satu syarat kelengkapan di Blog, ada banyak cara untuk memasangnya, salah satunya adalah di Wordpress. Untuk Postingan kali ini akan membahas Cara Membuat Contact Form di Wordpress Tanpa menggunakan Plugin dari Wordpress itu sendiri alias kita buat secara manual melalui penambahan kode-kode script.

Sebenarnya untuk Platform Wordpress sendiri sudah tersedia Pluginnya seperti contact form 7 yang disediakan melalui plugin Wordpress, namun bagi mereka yang tidak suka menggunakan cara simple dengan menginstal plugin tersebut dapat menggunakan cara manual, memang saya akui dengan kita memasang Plugin di Wordpress tentu akan menambah beban load blog kita dan sangat mempengaruhi kecepatan loadingnya. Sebelum memulai membuatnya hal yang harus diperhatikan adalah wajib menggunakan hosting sendiri karena cara ini menggunakan kode php. 
  
 Nah bagaimana Cara Membuat Contact Form di Wordpress Tanpa Plugin, bagi sobat yang tertarik silahkan simak dan ikuti langkah-langkahnya. 

Langkah Pertama
Silahkan salin kode php berikut untuk page (page.php) di salin terlebih dahulu ke notepad karena theme mungkin beda-beda.


Langkah Kedua
Silahkan sobat salin kode <?php the_content (); ?> yang berasal dari kode page.php yang sebelumnya sudah sobat copy ke notepad menggunakan kode dibawah 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 } ?>

Langkah Ketiga
Silahkan sobat masuk ke Cpanel hostingnya > Public_html > wp-content > themes > pilih theme yang sobat gunakan kemudian silahkan buat file php baru kasih nama filenya contact-us.php lalu paste semua kode yang ada di notepad tadi (lihat langkah 1 dan 2).


Langkah Ke Empat
Silahkan sobat buat page baru pada dashboard wordpress isi title page "Contact Us". Selanjutnya begitu juga pada bagian Page Attributes di template tersebut, sebagai gambaran lihat contoh gambar dibawah ini.

Contact Wp2


Setelah itu klik Publish page yang sudah dibuat tadi, untuk memastikan page tersebut sudah jalan atau belum silahkan cek url-nya.

Langkah Ke Lima
Tampilan page contact form tersebut masih belum rapih untuk itu kita rapihkan dengan menggunakan atau menambahkan kode css berikut tepat di 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}

Perhatikan baik-baik penerapan kodenya agar tidak error dan Selesai sudah silahkan di coba contact form tersebut. Ada beberapa hal yang harus diketahui jika pada saat mencoba mengirimkan pesan melalui contact form tersebut dan pesan yang dikirimkan ke email hosting tidak diterima silahkan sobat hubungi penyedia hostingnya biasanya wp_mail masih tertutup belum diaktifkan, sebenarnya ini wajar sebagai upaya perlindungan dari hosting atas serangan malware. Saran saya silahkan sobat menggunakan plugin WP-Mail-SMTP.

Namun jika contact emailnya dihubungkan ke Gmail atau sejenisnya pastikan email addressnya berada di Dashboard > Setting > General di Gmail sobat.

Penasaran..selamat mencobanya ya sobat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.