Home / WordPress / Cara Membuat Form Kontak Tanpa Plugin Di WordPress

Cara Membuat Form Kontak Tanpa Plugin Di WordPress

Cara Membuat Form Kontak Tanpa Plugin Di WordPress – Keberadaan halaman kontak di sebuah website atau blog bisa dikatakan penting. Ini dimaksudkan untuk mempermudah interaksi secara private antara pengunjung dan admin website atau blog. Dan untuk memenuhi kebutuhan tersebut, bagi blog CMS WordPress kalau sekedar membuat form kontak mudah saja dilakukan. Baik itu WordPress.com (free) ataupun WordPress.org (TLD). Namun bagi WordPress.org mempunyai kelebihan dalam hal kebebasan berekspresi untuk memanjakan penggunanya. Contohnya dalam hal membuat form kontak selain bisa menggunakan plugin, kita juga bisa membuat form kontak di WordPress tanpa menggunakan plugin. Syaratnya kita harus sedikit paham akan kode php dan css. Untuk kebutuhan tersebut, disini saya akan berbagi cara membuat form kontak tanpa plugin di blog CMS WordPress.

Baca Juga : Perkuat Login Form WordPress Dengan Memasang Captcha

Pada tulisan sebelumnya saya pernah membahas tentang pembuatan form kontak di WordPress. Namun pada tulisan tersebut saya mencontohkan dengan menggunakan plugin, yaitu plugin Contact Form7. Silakan bisa Anda lihat sendiri tulisannya jika memang diperlukan pada artikel Begini Cara Membuat Form Kontak di WordPress.

Untuk form kontak yang akan saya bahas disini adalah form kontak tanpa plugin. Saya rasa tampilannya tidak kalah menarik dengan yang menggunakan plugin. Justru kita akan lebih bebas berekspresi dalam penerapan stylenya. Dan juga, loading halaman blog kita akan tambah ringan, dibanding dengan form kontak hasil plugin.

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 0

Inilah Cara Membuat Form Kontak Tanpa Plugin Di Blog CMS WordPress

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

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 1

Saya rasa untuk aplikasi Notepad kita tidak akan menemui kesulitan. Karena aplikasi ini adalah program bawaan (default) Windows. Silakan tanpa harus basa-basi lagi, buka aplikasi Notepad yang sudah terpasang di Komputer Windows melalui Start > All Programs > Accessories > Notepad.

1#Membuat Nama Template

Pertama kita buat nama template yang akan kita buat dengan menyisipkan kode php berikut di dalam Notepad :

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

Contoh disini saya memberi nama pada template yang akan kita buat adalah Form Kontak. Anda bisa menentukan nama template yang lain, atau disamakan juga tidak apa-apa.

2#Membuat Perintah Error

Maksud perintah error disini adalah sebuah fungsi untuk mengatur pemberitahuan error / ada kesalahan jika mereka melakukan submit dan masing-masing form ada yang tidak sesuai dengan yang telah kita tentukan. Contoh dalam form kontak yang akan dibuat disini, kita hanya menyediakan 3 form untuk diisi, 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 diisi wajib. Kemudian ketika pengirim pesan lupa mengisi salah satu form, maka isi pesan tidak akan berhasil dikirim dan akan muncul perintah error yang menyatakan form mana yang salah. Nah sekarang kita akan membuat perintah error tersebut. Dan disini kita hanya membuat 3 form yang wajib diisi saja, form nama, form email, dan form isi pesan. 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 keinginan Anda pada isi pesan errornya. Pada contoh diatas saya membuat isi pesan error “Harap diisi !”. Nanti jika ada yang terlewat satu form saat pengunjung mengirim pesan, maka akan muncul pesan seperti itu ketika pesan di submit.

3#Menentukan Alamat Email Penerima Isi Pesan

Jika nanti ada yang mengirim pesan melalui halaman form kontak yang kita sediakan di blog atau website, maka isi pesan tersebut harus kita arahkan ke tempat khusus. Tidak ada tempat lain lagi selain kita menentukannya ke alamat email yang kita miliki. Isi pesan dalam form kontak halaman website ini akan berhasil dikirim dan bisa kita baca isinya jika yang mengirim telah melakukan pengisian form dengan benar. Sisipkan kode berikut untuk menentukan alamat email yang fungsinya sebagai penerima isi pesan yang dikirim dari form kontak halaman blog :

if(!isset($hasError)) {
 $emailTo = [email protected]';
 $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 <[email protected]>';
 mail($email, $subject, $body, $headers);
 }
 $emailSent = true;
 }
 }
} ?>

Disesuaikan lagi alamat email penerimanya dengan alamat email yang Anda miliki. Kemudian Anda juga bisa merubah tulisan subject dan header isi email dengan yang Anda inginkan.

4#Membuat Form Kontak

Jika ketiga langkah diatas sudah selesai dibuat atau disisipkan di Notepad, kini saatnya membuat kegiatan intinya yaitu membuat form kontak. Seperti yang sudah saya jelaskan diatas, 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>

Anda bisa menentukan sendiri untuk masing-masing ukuran weight dan height form.

5#Membuat Isi Laporan Sukses/Gagal Kalau Pesan Dikirim

Dalam membuat form kontak, sebaiknya dilengkapi juga dengan laporannya. Apakah pesan yang dibuat sukses dikirim atau sebaliknya gagal. Hal ini untuk memberi keyakinan pengirim pesan dan supaya tidak terjadi double publish. Contoh kode untuk membuat laporan bahwa pesan telah sukses dikirim 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 dikirim, 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 } ?>

Anda bisa menyisipkan kedua contoh kode diatas didalam Notepad yang sedang Anda kerjakan dalam membuat form kontak.

Kemudian jika tampilan halaman form kontak yang akan dibuat ingin sama dengan tampilan halaman lainnya, seperti pada bagian header, content, sidebar, footer dan title, maka Anda harus menambahkan kode php untuk memanggil dari masing-masing yang Anda 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 langkah awal sampai selesai yang sudah saya gabungkan menjadi satu. Bahkan didalamnya sudah ditambahkan kode php untuk memanggil header, footer, sidebar, 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 = [email protected]';
 $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 <[email protected]>';
 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(); ?>

Jika semua sudah dirasa cukup, maka langkah selanjutnya menyimpan hasil kerjaan kita untuk dijalankan di website atau blog yang kita kelola. Pertama simpan hasil kerja kita yang kita kerjakan dalam Notepad dengan nama file form-kontak.php.

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 2

Kemudian upload file format php yang baru saja kita buat tersebut ke dalam root tema yang kita gunakan. Untuk upload file php ini Anda harus login terlebih dahulu di cPanel Hosting. Upload file format php form kontak tersebut ke File Manager > Web Root (public_html/www) > wp-content > themes > tema yang Anda gunakan. Lebih jelasnya lagi, bisa Anda lihat pada tulisan Cara Membuat Daftar Isi Di WordPress Tanpa Plugin. Sehingga nanti di wp-admin dashboard WordPress tepatnya di menu Appearance > Editor akan bertambah sebuah file php baru dengan nama Form Kontak Page Template.

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 3

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

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 4

Kemudian rubah Default Templatesnya menjadi ke Form Kontak. Tepatnya untuk merubah Deafult Template ini berada di halaman Page Attributes (sebelah kanan).

Cara Membuat Form Kontak Tanpa Plugin Di WordPress 5

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

Setelah Anda melihat hasilnya, mungkin form kontak tersebut tampilannya kurang menarik. Untuk lebih memperindah lagi tampilan form kontak tanpa plugin ini, Anda bisa membuat syle khusus yang disimpan di dalam style.css tema yang digunakan. Contoh disini 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;
}

Selesai sudah tulisan panjang tentang Cara Membuat Form Kontak Tanpa Plugin Di WordPress. Untuk sementara tutorial cara membuat form kontak tanpa plugin ini dicukupkan sekian saja. Jika ada pertanyaan bisa disampaikan pada kotak komentar, semoga yang lain bisa saling membantu. Semoga sukses dan semoga bermanfa’at.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

2 comments

  1. asslamualaikum
    mas berhasil saya membuatnya tapi setelah saya pasang di page kok semua widged jadi berada di bawahnya semua ya mas coba cek mas webnanda.com/kontak mohon dibantu ya mas terima kasih sebelumnya

    • Karena struktur kode widget dan sidebar masing-masing tema itu berbeda mas. Solusinya Mas meski copy kode dari page.php tema yang mas gunakan dan paste ke file form kontak yang sedang dikerjakan. Kemudian hapus < ?php the_content(); ?> dan ganti dengan kode form kontak ini.

Leave a Reply

Your email address will not be published. Required fields are marked *