Membuat Contact Form di WordPress Tanpa Plugin

Oke temen-temen, kali ini yang akan dibahas adalah cara membuat contact form pada WordPress tanpa menggunakan plugin. Sebenarnya untuk membuatnya sangat mudah dan tidak perlu repot-repot utak atik theme jika menggunakan plugin, namun ada beberapa alasan mengapa orang-orang menghindari untuk menggunakan plugin dan sebisa mungkin memilih untuk setting sendiri. Diantaranya untuk mengurangi beban pada server atau hosting. Seperti kita ketahui, setiap plugin membutuhkan resource CPU yang berbeda-beda, jika terlalu banyak plugin yang digunakan akan berpengaruh terhadap kecepatan loading blog.

Berbeda dengan Blogspot dimana sudah disediakan contact form pada widget blogger. Untuk setting contact form pada WordPress sedikit ribet, karena kamu harus berurusan dengan yang namanya PHP. Namun semua akan terasa mudah jika mengikuti tutorial dibawah ini dengan cermat. Mengingat halaman kontak merupakan syarat kelengkapan suatu blog. Jadi pastikan di blogmu terpasang yaa..

Setting Contact Form

1. Login ke cPanel dan cari file yang bernama page.php di direktori public_html » wp-content » themes » theme yang digunakan » disini dan copy seluruh isinya.
2. Lalu buat file baru dengan nama contact.php dan paste seluruh isi dari file page.php kedalamnya. Taruh file tersebut di direktori yang sama dengan file page.php.
3. Setelah itu edit file contact.php, ganti kode <?php the_content(); ?> biasanya kodenya seperti ini

   <?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
       <?php get_template_part( 'sections/content', 'page' ); ?>
   <?php endwhile; ?>

   ganti dengan 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 } ?>

4. Jika sudah klik save.
5. Tambahkan style CSS dibawah ini pada thememu agar tampilan contact formnya lebih menarik.

#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}

Untuk theme yang sudah support atau sudah ada fitur custom CSS tinggal masukkan saja kode diatas. Tapi jika belum ada, silahkan untuk edit file style.css pada thememu dan masukkan kode diatas.

Sampai disini kamu sudah selesai setting contact form. Langkah selanjutnya yaitu membuat dan menampilkan formnya diblogmu.

Membuat Halaman Contact Form

Buka menu Pages dan buat page/laman baru. Beri nama Contact Us atau terserah dan atur permalinknya. Lalu pada Atribut Halaman ubah menjadi Contact Us. Setelah itu klik publish.

Demikian cara membuat halaman contact form pada WordPress tanpa plugin. Selamat mencoba dan semoga bermanfaat.