Cara Membuat Form Kontak di WordPress Tanpa Menggunakan Plugin: Panduan Terlengkap

Info Menarik – Dalam menjalankan situs web WordPress, memiliki formulir kontak yang berfungsi dengan baik sangat penting. Formulir kontak memungkinkan pengunjung situs untuk menghubungi Kamu dengan mudah, memberikan pertanyaan, memberikan umpan balik, atau bahkan melakukan permintaan layanan. Banyak pengguna WordPress menggunakan plugin untuk membuat formulir kontak, namun, jika Kamu ingin mengurangi penggunaan plugin, Kamu dapat membuat formulir kontak di WordPress tanpa plugin dengan mudah. Artikel ini akan memberikan panduan langkah-demi-langkah tentang cara membuat form kontak di WordPress tanpa plugin.

Baca Juga: Cara Membuat Halaman Maintenance yang Menarik di WordPress Tanpa Plugin

1. Aktifkan Notepad

Jika Kamu tertarik ingin mencoba untuk mempraktekkannya, mari kita mulai saja tutorialnya. Yang kita butuhkan untuk membuat form kontak tanpa plugin adalah, aplikasi Notepad.

Saya rasa bagi pengguna Windows aplikasi Notepad itu sudah tidak asing lagi di pendengaran mereka. Aplikasi ini merupakan aplikasi default dan kita cukup hanya mengaktifkannya saja.

Silakan Kamu buka aplikasi Notepad dari Start > All Programs > Accessories > Notepad.

2. Membuat Nama Template

Langkah selanjutnya menentukan nama template dengan menyisipkan kode php berikut di dalam Notepad:

<?php
 /* Template Name: Form Kontak */
?>

Contoh saya telah memberikan nama pada template adalah Form Kontak. Kamu bisa menentukan nama template yang lain, atau sama juga tidak masalah.

3. Membuat Perintah Error

Maksud perintah error ini adalah sebuah fungsi untuk mengatur pemberitahuan error/kesalahan jika melakukan submit dan masing-masing form terdapat hal yang tidak sesuai dengan yang kita tentukan.

Contoh, dalam form kontak ini kita hanya menyediakan 3 form untuk pengunjung isi, yaitu: form nama, form email, dan form isi email/pesan. Kemudian dari ketiga form tersebut satupun kita tidak membuat form optional (pilihan), artinya semua form harus mereka isi. Kemudian ketika pengirim pesan lupa mengisi salah satu form, maka isi pesan tidak akan berhasil terkirim dan akan muncul pesan error yang menyatakan form mana yang salah.

Nah, sekarang kita akan membuat perintah error tersebut. Dan contoh kali ini kita hanya membuat 3 form yang wajib terisi. Kode untuk fungsi perintah errornya adalah seperti ini :

<?php 
if(isset($_POST['submitted'])) {
 {
 if(trim($_POST['contactName']) === '') {
 $nameError = 'Harap diisi !';
 $hasError = true;
 } else {
 $name = trim($_POST['contactName']);
 }
 if(trim($_POST['email']) === '') {
 $emailError = 'Harap diisi !';
 $hasError = true;
 } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
 $emailError = 'Alamat Email yang Anda masukkan salah';
 $hasError = true;
 } else {
 $email = trim($_POST['email']);
 }
 if(trim($_POST['comments']) === '') {
 $commentError = 'Harap diisi !';
 $hasError = true;
 } else {
 if(function_exists('stripslashes')) {
 $comments = stripslashes(trim($_POST['comments']));
 } else {
 $comments = trim($_POST['comments']);
 }
 }

Silakan sesuaikan lagi dengan kebutuhan pada isi pesan errornya. Pada contoh di atas saya membuat isi pesan error “Harap diisi !“. Nanti jika ada form yang terlewat saat pengunjung mengirim pesan, maka akan muncul pesan seperti itu ketika pesan di submit.

4. Menentukan Alamat Email Penerima Isi Pesan

Menentukan alamat email aktif merupakan salah satu hal yang wajib kita terapkan. Jika nanti ada yang menggunakan form kontak, maka isi pesan akan diteruskan secara otomatis ke alamat email ini.

Sisipkan kode berikut untuk menentukan alamat email yang fungsinya sebagai penerima isi pesan dari form kontak yang berada di WordPress :

if(!isset($hasError)) {
 $emailTo = 'admin@info-menarik.net';
 $subject = 'Pesan ini dikirim melalui blog Info-Menarik.Net dari '.$name;
 $sendCopy = trim($_POST['sendCopy']);
 $body = "Name : $name \n\nEmail : $email \n\nPesan Anda : $comments";
 $headers = 'From : My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 mail($emailTo, $subject, $body, $headers);
 if($sendCopy == true) {
 $subject = 'Ini adalah salinan pesan Anda di blog Info-Menarik.Net';
 $headers = 'From : Info-Menarik.Net | Berbagi Info & Tips Trik Menarik <admin@info-menarik.net>';
 mail($email, $subject, $body, $headers);
 }
 $emailSent = true;
 }
 }
} ?>

Kamu sesuaikan lagi alamat email penerimanya dengan alamat email yang Kamu miliki. Kemudian Kamu juga bisa mengubah tulisan subject dan header isi email dengan yang Kamu inginkan.

5. Membuat Form Kontak

Jika ketiga langkah di atas sudah selesai Kamu buat, kini saatnya pembuatan form kontak. Seperti yang sudah saya jelaskan di atas, bahwa form kontak yang akan kita buat hanya terdiri dari form nama, form email, form isi pesan, dan tombol submit. Kemudian saya akan menambahkan tombol check yang fungsinya untuk membuat salinan pesan ke alamat email pengirim jika pengirim mencentangnya.

Contoh kodenya untuk membuat form kontak yang saya maksud adalah sebagai berikut :

<p><label for="contactName"></label>
 <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" placeholder="Nama Anda" size="30" />
 <?php if($nameError != '') { ?>
 <span class="error"><?=$nameError;?></span> 
 <?php } ?></p>
 <p><label for="email"></label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" placeholder="Email Anda" size="30" />
 <?php if($emailError != '') { ?>
 <span class="error"><?=$emailError;?></span>
 <?php } ?></p>
 <p class="textarea"><label for="commentsText"></label>
<textarea name="comments" id="commentsText" rows="15" cols="50" class="requiredField" placeholder="Isi Pesan Anda ..."><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
 <?php if($commentError != '') { ?>
 <span class="error"><?=$commentError;?></span> 
 <?php } ?></p>
 <p class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy"> Apakah Anda ingin mengirim salinan pesan ini ke Email Anda ?</label></p> 
 <p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit" class="kirim">Kirim Pesan</button></p>

Kamu bisa menentukan sendiri untuk masing-masing ukuran weight dan height pada form sesuai dengan kebutuhan.

6. Membuat Isi Laporan Sukses atau Gagal Ketika Pesan Dikirim

Selanjutnya sebaiknya Kamu lengkapi juga dengan laporannya. Apakah pesan yang kita buat sukses terkirim  atau gagal. Hal ini untuk memastikan pengirim pesan dan supaya tidak terjadi double publish.

Contoh kode untuk membuat laporan bahwa pesan telah sukses terkirim adalah sebagai beikut :

<?php if(isset($emailSent) && $emailSent == true) { ?>
 <h1>Terima kasih telah menghubungi kami, <?=$name;?></h1>
 <h3>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin. Salam sukses !</h3>
 <?php } else { ?>

Dan jika pesan gagal terkirim, maka contoh kode untuk membuat laporannya adalah sebagai berikut :

<?php if(isset($hasError) || isset($captchaError)) { ?>
 <p class="error">Maaf ! Tampaknya ada masalah dalam pengiriman pesan Anda, silakan dicoba lagi !<p>
 <?php } ?>

Kamu bisa menyisipkan kedua contoh kode di atas di dalam Notepad yang sedang Kamu kerjakan.

7. Contoh Full Kode Form Kontak

Kemudian jika tampilan halaman form kontak ingin sama dengan tampilan halaman lainnya, seperti pada bagian header, content, sidebar, footer dan title, maka Kamu harus menambahkan kode php untuk memanggil dari masing-masing yang Kamu perlukan. Contoh untuk memanggil header, maka kodenya adalah <?php get_header(); ?> memanggil sidebar <?php get_sidebar(); ?> memanggil footer <?php get_footer(); ?>.

Sebagai contoh, berikut semua kode form kontak dari awal sampai selesai yang sudah saya gabungkan menjadi satu. Bahkan di dalamnya sudah saya tambahkan kode php untuk memanggil header, footer, sidebar, dan title.

<?php
 /* Template Name: Form Kontak */
?>
<?php 
if(isset($_POST['submitted'])) {
 {
 if(trim($_POST['contactName']) === '') {
 $nameError = 'Harap diisi !';
 $hasError = true;
 } else {
 $name = trim($_POST['contactName']);
 }
 if(trim($_POST['email']) === '') {
 $emailError = 'Harap diisi !';
 $hasError = true;
 } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
 $emailError = 'Alamat Email yang Anda masukkan salah';
 $hasError = true;
 } else {
 $email = trim($_POST['email']);
 }
 if(trim($_POST['comments']) === '') {
 $commentError = 'Harap diisi !';
 $hasError = true;
 } else {
 if(function_exists('stripslashes')) {
 $comments = stripslashes(trim($_POST['comments']));
 } else {
 $comments = trim($_POST['comments']);
 }
 }
 if(!isset($hasError)) {
 $emailTo = 'cepiwansetiawan@gmail.com';
 $subject = 'Pesan ini dikirim melalui blog Info-Menarik.Net dari '.$name;
 $sendCopy = trim($_POST['sendCopy']);
 $body = "Name : $name \n\nEmail : $email \n\nPesan Anda : $comments";
 $headers = 'From : My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 mail($emailTo, $subject, $body, $headers);
 if($sendCopy == true) {
 $subject = 'Ini adalah salinan pesan Anda di blog Info-Menarik.Net';
 $headers = 'From : Info-Menarik.Net | Berbagi Info & Tips Trik Menarik <cepiwansetiawan@gmail.com>';
 mail($email, $subject, $body, $headers);
 }
 $emailSent = true;
 }
 }
} ?>
 <?php get_header(); ?>
 <div id="page">
 <div class="content">
 <article class="article">
 <div id="kontak"><!--Kontak Wrapper-->
 <?php if(isset($emailSent) && $emailSent == true) { ?>
 <h1>Terima kasih telah menghubungi kami, <?=$name;?></h1>
 <h3>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin. Salam sukses !</h3>
 <?php } else { ?>
 <?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <header>
 <h1 class="single-page"><?php the_title(); ?></h1>
 <?php if($options['mts_headline_meta'] == '1') { ?> 
 <?php } ?>
 </header>
 <!-- Form Komentar -->
 <?php the_content(); ?>
 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
 <?php if(isset($hasError) || isset($captchaError)) { ?>
 <p class="error">Maaf ! Tampaknya ada masalah dalam pengiriman pesan Anda, silakan dicoba lagi !<p>
 <?php } ?>
 <p><label for="contactName"></label>
 <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" placeholder="Nama Anda" size="30" />
 <?php if($nameError != '') { ?>
 <span class="error"><?=$nameError;?></span> 
 <?php } ?></p>
 <p><label for="email"></label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" placeholder="Email Anda" size="30" />
 <?php if($emailError != '') { ?>
 <span class="error"><?=$emailError;?></span>
 <?php } ?></p>
 <p class="textarea"><label for="commentsText"></label>
<textarea name="comments" id="commentsText" rows="15" cols="50" class="requiredField" placeholder="Isi Pesan Anda ..."><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
 <?php if($commentError != '') { ?>
 <span class="error"><?=$commentError;?></span> 
 <?php } ?></p>
 <p class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy"> Apakah Anda ingin mengirim salinan pesan ini ke Email Anda ?</label></p> 
 <p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit" class="kirim">Kirim Pesan</button></p>
 </form>
 <div class="clear"></div>
 <?php endwhile; ?>
 <?php endif; ?>
 <?php } ?>
 </div><!--Kontak Wrapper-->
 </article>
 <?php get_sidebar(); ?>
 </div>
 </div>
 <?php get_footer(); ?>

8. Simpan dengan Format PHP

Langkah selanjutnya adalah menyimpan hasil kerja kita untuk nantinya kita jalankan di WordPress. Silakan Kamu simpan dengan nama file form-kontak.php.

9. Upload File Kontak

Kemudian upload file format php ke dalam root tema yang kita gunakan. Untuk upload file php ini Kamu harus masuk ke cPanel Hosting.

Upload file ke File Manager > Web Root (public_html/www) > wp-content > themes > tema yang Kamu gunakan. Lebih jelasnya lagi, bisa Kamu lihat pada artikel Cara Membuat Daftar Isi di WordPress Tanpa Plugin.

Nanti di wp-admin dashboard WordPress tepatnya di menu Appearance > Editor akan bertambah sebuah file php baru dengan nama Form Kontak Page Template.

10. Mengaktifkan Form Kontak

1. Membuat Halaman Baru

Sekarang mungkin Kamu sudah tidak sabar ingin mencoba form kontak ini. Untuk mencobanya, silakan Kamu buat halaman baru dari menu Pages > Add New. Beri judul halaman tersebut, contoh Kontak Saya.

2. Mengubah Template Default

Kemudian Kamu ubah Default Templates menjadi ke Form Kontak. Tepatnya untuk mengubah ini berada di halaman Page Attributes (sebelah kanan).

3. Menerbitkan Halaman Baru

Sekarang klik Publish/Terbitkan dan lihat hasilnya. Jika form kontak yang baru saja kita buat tidak tampil, mungkin Kamu belum membuat daftar menu di Appearance > Menus Dashboard WordPress.

11. Mengubah Tampilan Form Kontak

Setelah Kamu melihat hasilnya, mungkin form kontak tersebut tampilannya kurang menarik. Untuk membuat tampilan form kontak lebih menarik atau lebih rapih, Kamu bisa membuat css khusus yang kita simpan di dalam style.css tema yang kita gunakan.

Contoh saya menggunakan kode css seperti berikut ini :

/*-[ Form Kontak Tanpa Plugin ]*/
#kontak input,#kontak textarea {
 border-radius: 5px;
 font-family: Verdana,Arial,sans-serif;
 margin-top: 2px;
 border-color: #0074A2;
 box-shadow: 0px 1px 0px rgba(120, 200, 230, 0.5)
 inset, 0px 1px 0px rgba(0, 0, 0, 0.15);
 border-style: solid;
}
#kontak input:focus,
#kontak input#email:focus,
#kontak textarea:focus,
#kontak input:hover,
#kontak input#email:hover,
#kontak textarea:hover { 
 border-color: #ff9800; 
 -moz-box-shadow: 0 0 3px 3px #000;
 box-shadow: 0 0 3px 3px #aaa;
 -webkit-box-shadow: 0 0 3px 3px #aaa;
 text-decoration: none;
}
#kontak .kirim {
 border-radius: 5px;
 border: 2px solid #0074A2;
 padding: 6px;
 border-style: solid;
 font-weight:bold;
 text-transform: uppercase;
 cursor:pointer;
 transition:all 0.2s linear 0s;
}
#kontak .kirim:hover {
 color: #fff;
 background:#0074a2;
}
#kontak .error, .error-mail {
 color: #f00;
}
#kontak p.inline input { 
 margin: 0 5px 0 5px;
 border: none; 
 box-shadow: none;
}

Baca Juga: Cara Membuat Form Kontak di WordPress Menggunakan Plugin Contact Form 7

Selesai sudah artikel cara membuat form kontak di WordPress tanpa plugin ini. Saya tutup artikelnya dan jika ada pertanyaan bisa Kamu sampaikan pada kotak komentar. Semoga sukses dan semoga bermanfaat …