Cara Membuat Contact Form di Wordpress Tanpa Plugin

Penggunaan penambahan Contact Form pada Wordpres sangat disarankan sebagai salah satu syarat kelengkapan di Blog, ada banyak cara untuk memasangnya, salah satunya yaitu 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 ibarat 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 menghipnotis kecepatan loadingnya. Sebelum memulai membuatnya hal yang harus diperhatikan yaitu wajib menggunakan hosting sendiri alasannya yaitu cara ini menggunakan arahan php. 

  

 Nah bagaimana Cara Membuat Contact Form di Wordpress Tanpa Plugin, bagi sahabat yang tertarik silahkan simak dan ikuti langkah-langkahnya. 

Langkah Pertama

Silahkan salin arahan php berikut untuk page (page.php) di salin terlebih dahulu ke notepad alasannya yaitu theme mungkin beda-beda.

Langkah Kedua

Silahkan sahabat salin arahan <?php the_content (); ?> yang berasal dari arahan page.php yang sebelumnya sudah sahabat copy ke notepad menggunakan arahan 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 sahabat masuk ke Cpanel hostingnya > Public_html > wp-content > themes > pilih theme yang sahabat gunakan kemudian silahkan buat file php gres kasih nama filenya contact-us.php lalu paste semua arahan yang ada di notepad tadi (lihat langkah 1 dan 2).


Langkah Ke Empat
Silahkan sahabat buat page gres pada dashboard wordpress isi title page "Contact Us". Selanjutnya begitu juga pada bab Page Attributes di template tersebut, sebagai gambaran lihat pola gambar dibawah ini.

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 arahan css berikut sempurna 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 biar tidak error dan Selesai sudah silahkan di coba contact form tersebut. Ada beberapa hal yang harus diketahui kalau pada ketika mencoba mengirimkan pesan melalui contact form tersebut dan pesan yang dikirimkan ke email hosting tidak diterima silahkan sahabat hubungi penyedia hostingnya biasanya wp_mail masih tertutup belum diaktifkan, bahwasanya ini wajar sebagai upaya pertolongan dari hosting atas serangan malware. Saran saya silahkan sahabat menggunakan plugin WP-Mail-SMTP.

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

Penasaran..selamat mencobanya ya sobat.