Membuat Contact Form Untuk Wordpress Tanpa Plugin

Sebenarnya tidak perlu pusing untuk menciptakan contact form di Wordpress, kita dapat memakai plugin ibarat contact form 7 dengan mudah. Namun bagi mereka yang tidak bahagia dengan penambahan link js dan css pada source theme alasannya akan semakin menambah beban loading blog niscaya akan berusaha untuk menciptakan contact form sendiri.

Berbeda dengan blogspot yang sudah disediakan widget contact form blogger, untuk menciptakan contact form tanpa plugin di wordpress harus mempunyai hosting sendiri alasannya memakai php.

Nah bagi yang ingin menciptakan contact form wordpress tanpa plugin, silahkan ikuti langkah-langkahnya di bawah ini.

1. Pertama
Karena ini akan kita tampilkan di page dan alasannya instruksi php untuk page setiap theme kadang berbeda-beda maka silahkan copy instruksi php untuk page (page.php) dan paste di notepad.

2. Kedua
Silahkan ganti instruksi <?php the_content(); ?> dari instruksi page.php yang tadi di-copy dengan instruksi 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 dipakai >> kemudian buatlah file php gres dengan nama file contact-us.php dan paste seluruh instruksi page yang dibentuk tadi pada langkah 1 dan 2.

4. Keempat
Sekarang silahkan buat page gres di dashboard wordpress Anda dengan title page "Contact Us". Kemudian di sebelah kanan pada Page Attributes, pada bab template silahkan pilih Contact Us ibarat 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 instruksi 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 memakai plugin WP-Mail-SMTP dan konsultasikan dengan penyedia hosting Anda.

Biasanya pesan dari contact form ini akan terkirim ke email hosting, jikalau 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/


Sumber https://www.kompiajaib.com/

Share this post