Cekerholic

Personal Playground of Aris FM

WordPress Tips: Membuat Form Kontak tanpa Plugin

25 Oct 2010 Wordpress 14 Comments

Dalam sebuah blog biasanya terdapat halaman kontak untuk menghubungi pemilik blog tersebut. Bagi pengguna WordPress, ada cukup banyak plugin untuk membuat/menampilkan form kontak seperti Contact Form 7, Super Contact Form dan lain-lain. Silakan anda cari sendiri di Directory Plugin WordPress.

Nah gimana kalau kita bikin sendiri aja? Caranya gamnpang kok. Silakan ikuti tutorial berikut.

Langkah 1: Membuat Page Template Form Kontak
Buatlah sebuah file baru di direktori theme WordPress anda dan beri nama “form-kontak.php”. Kemudian buka file yang kita buat dan masukkan baris kode berikut:

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

Langkah 2: Membuat the_loop() dari Form Kontak
Setiap post template WordPress harus menggunakan template tag the_loop() agar bisa menampilkan konten dari halaman. Jadi sekarang mari kita buat the_loop()-nya dulu. Silakan masukkan kode berikut :

<?php get_header(); //Memanggil header.php (header blog) ?>
<div id="kontak"><!--Kontak Wrapper-->
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
			<?php the_content(); //Akhir the_loop ?>
	<?php endwhile; ?>
	<?php endif; ?>
</div><!--Akhir Kontak Wrapper-->
<?php get_footer(); //Memanggil footer.php (footer blog) ?>

Langkah 3: Membuat Form Komentar
Kode pada langkah 2 adalah kode standar dari setiap post template WordPress (single.php, index.php, archives.php, dan search.php), sekarang kita mulai masuk bagian inti, yaitu membuat form komentar. Oke sekarang masukkan kode berikut di bawah <?php the_content(); //Akhir the_loop ?>

	<!-- Form Komentar -->
	<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
		<p>Silakan menghubungi saya via form kontak berikut ini</p><!-- Kata pembuka yang ditampilkan di bagian atas form komentar -->
			<p><label for="contactName">Name</label>
				<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
				<?php if($nameError != '') { ?>
					<span class="error"><?=$nameError;?></span> 
				<?php } ?>
			</p>
			<p><label for="email">Email</label>
				<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />
				<?php if($emailError != '') { ?>
					<span class="error"><?=$emailError;?></span>
				<?php } ?>
			</p>
			<p class="textarea"><label for="commentsText">Pesan</label>
				<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?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">Kirim salinan pesan ini ke email Anda</label></p>
				<p class="screenReader"><label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" /></p><!--Chaptca rahasia-->
				<p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Kirim &raquo;</button></p>
	</form>

Langkah 4: Mengatur Fungsi Form
Kita sudah memiliki form komentar, tapi belum berfungsi apa-apa karena pengaturan form kontaknya belum dibuat. Sekarang kita atur dulu fungsi form, masukkan kode berikut di atas template tag <?php get_header(); //Memanggil header.php (header blog) ?> :

<?php 
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 
	//Mengecek apakah chaptcha rahasia terisi
	if(trim($_POST['checking']) !== '') {
		$captchaError = true;
	} else {
 
		//Mengecek apakah kolom nama sudah diisi
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}
 
		//Mengecek apakah kolom alamat email sudah diisi dan valid
		if(trim($_POST['email']) === '')  {
			$emailError = 'Anda lupa memasukkan alamat email anda';//Pesan error jika kolom email kosong
			$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';//Pesan error jika alamat email tidak valid
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}
 
		//Mengecek apakah kolom isi pesan sudah disi
		if(trim($_POST['comments']) === '') {
			$commentError = 'Apakah anda mau mengirim pesan kosong? silakan diisi dulu pesan anda';//Pesan error jika kolom pesan masih kosong
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['comments']));
			} else {
				$comments = trim($_POST['comments']);
			}
		}
 
		//Mengirimkan pesan, jika semua kolom telah diisi dengan valid
		if(!isset($hasError)) {
 
			$emailTo = 'name@domain.com';//Alamat email tujuan, ganti dengan email anda
			$subject = 'Pesan via blog dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
			$sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
			$body = "Name: $name \n\nEmail: $email \n\nPesan anda: $comments";//Isi Email
			$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
 
			mail($emailTo, $subject, $body, $headers);
 
			if($sendCopy == true) {
				$subject = 'Salinan pesan anda di blog Cekerholic';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
				$headers = 'From: Blog Aris FM <name@domain.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
				mail($email, $subject, $body, $headers);
			}
 
			$emailSent = true;
 
		}
	}
} ?>

Sekarang form kontak kita sudah berfungsi, masih ada beberapa langkah lagi agar form kontak semakin sempurna.

Langkah 5: Membuat pemberitahuan bahwa pesan yang dikirim telah sampai
Pengirim pesan tentu penasaran apakah pesan yang dikirimnya sampai atau tidak, untuk itu kita perlu menampilkan pemberitahuan bahwa pesan mereka telah terkirim atau tidak, silakan masukkan kode berikut di bawah kode <div id="kontak"><!--Kontak Wrapper-->

<?php if(isset($emailSent) && $emailSent == true) { ?>
 
		<h1>Terima kasih, <?=$name;?></h1>
		<p>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin :)</p>
 
<?php } else { ?>

dan kode berikut di atas baris <!-- Form Komentar -->

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

terakhir masukkan kode berikut ini di atas tag </div><!--Akhir Kontak Wrapper-->

<?php } ?>

Berikut hasil akhir dari Form Kontak yang baru kita buat:

<?php
	/* Template Name: Form Kontak */
?>
 
<?php 
//Mengecek apakah isi form sudah dikirim
if(isset($_POST['submitted'])) {
 
	//Mengecek apakah chaptcha rahasia terisi
	if(trim($_POST['checking']) !== '') {
		$captchaError = true;
	} else {
 
		//Mengecek apakah kolom nama sudah diisi
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}
 
		//Mengecek apakah kolom alamat email sudah diisi dan valid
		if(trim($_POST['email']) === '')  {
			$emailError = 'Anda lupa memasukkan alamat email anda';//Pesan error jika kolom email kosong
			$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';//Pesan error jika alamat email tidak valid
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}
 
		//Mengecek apakah kolom isi pesan sudah disi
		if(trim($_POST['comments']) === '') {
			$commentError = 'Apakah anda mau mengirim pesan kosong? silakan diisi dulu pesan anda';//Pesan error jika kolom pesan masih kosong
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['comments']));
			} else {
				$comments = trim($_POST['comments']);
			}
		}
 
		//Mengirimkan pesan, jika semua kolom telah diisi dengan valid
		if(!isset($hasError)) {
 
			$emailTo = 'name@domain.com';//Alamat email tujuan, ganti dengan email anda
			$subject = 'Pesan via blog dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak
			$sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim
			$body = "Name: $name \n\nEmail: $email \n\nPesan anda: $comments";//Isi Email
			$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email
 
			mail($emailTo, $subject, $body, $headers);
 
			if($sendCopy == true) {
				$subject = 'Salinan pesan anda di blog Cekerholic';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang
				$headers = 'From: Blog Aris FM <name@domain.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya
				mail($email, $subject, $body, $headers);
			}
 
			$emailSent = true;
 
		}
	}
} ?>
 
<?php get_header(); //Memanggil header.php (header blog) ?>
<div id="kontak"><!--Kontak Wrapper-->
 
	<?php if(isset($emailSent) && $emailSent == true) { ?>
		<h1>Terima kasih, <?=$name;?></h1>
		<p>Pesan Anda telah terkirim, saya akan segera membalasnya secepat mungkin :)</p>
	<?php } else { ?>
 
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<h1><?php the_title(); ?></h1>
			<?php the_content(); //Akhir the_loop ?>
 
		<?php if(isset($hasError) || isset($captchaError)) { ?>
			<p class="error">Maaf, tampaknya ada masalah dalam mengirim pesan Anda, silakan dicoba lagi<p>
		<?php } ?>
				<!-- Form Komentar -->
				<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
					<p>Silakan menghubungi saya via form kontak berikut ini</p><!-- Kata pembuka yang ditampilkan di bagian atas form komentar -->
					<p><label for="contactName">Name</label>
						<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
						<?php if($nameError != '') { ?>
							<span class="error"><?=$nameError;?></span> 
						<?php } ?>
					</p>
					<p><label for="email">Email</label>
						<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />
						<?php if($emailError != '') { ?>
							<span class="error"><?=$emailError;?></span>
						<?php } ?>
					</p>
					<p class="textarea"><label for="commentsText">Pesan</label>
						<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?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">Kirim salinan pesan ini ke email Anda</label></p>
						<p class="screenReader"><label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" /></p><!--Chaptca rahasia-->
						<p class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Kirim &raquo;</button></p>
				</form>
 
	<?php endwhile; ?>
	<?php endif; ?>
	<?php } ?>
</div><!--Akhir Kontak Wrapper-->
<?php get_footer(); //Memanggil footer.php (footer blog) ?>

Langkah 6: Mengatur Tampilan Form Kontak
Form kontak kita memang sudah jadi, tapi tampilannya belum diatur kan? sekarang mari kita atur tampilannya dengan CSS. Masukkan kode ini di style.css :

#kontak {margin:0 auto;overflow:hidden;width:auto;}
#kontak form{float:left;margin:50px 0;width:100%}
#kontak label {cursor:pointer;display: block;float: left;padding-right: 20px;width: 100px;}
#kontak input, #kontak textarea {width: 214px;}
#kontak textarea { height: 300px; width:500px; }
#kontak input:focus, ol#kontak textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
#kontak p .error { font-size: 12px; margin-left: 20px; }
#kontak p.textarea .error {display: block;position: absolute;right: 0;top: 0;width: 100px;}
#kontak p.screenReader { margin-bottom: 0; }
#kontak p.inline input { width: auto; }
#kontak p.inline label { display: inline; float: none; width: auto; }

Langkah 7: Menampilkan Form Kontak di blog
Yay! akhirnya sampai juga di langkah terakhir. Langkah ini cukup mudah, yang perlu dilakukan hanyalah masuk ke dasbor WordPress, buat page baru, buat judul page dan aktifkan page template Form Kontak.

Cara mengaktifkan halaman kontak

Dan ….. taraaaaa! form kontak blog kita udah jadi. Contohnya silakan dilihat di halaman kontak blog saya.

Jika anda malas mengikuti tutorialnya, silakan download file-nya dengan mengklik tombol ini :

DOWNLOAD

14 Comments

  1. by oelil on 26 October 2010 at 10:34 am. # | Reply

    wah boleh nih dicoba…selama ini sy mengandalkan plugin
    makasih udah mau share masbro..

  2. by imadewira on 27 October 2010 at 8:06 am. # | Reply

    lengkap dan mantap sekali tutorialnya,

    tapi di blog saya hingga saat ini masih belum menggunakan contact form :-)

  3. by Mas Adi on 1 November 2010 at 1:50 am. # | Reply

    sip… langsung di coba… selama ini aku pake plugin contact form 7 mas… he he..

  4. by Topan Aprilia on 23 December 2010 at 8:00 am. # | Reply

    kayanya perlu di coba ne,,,
    yar ga terlalu banyak install plugin,,,

  5. by sam_oyi on 13 May 2011 at 3:03 pm. # | Reply

    nice post, thx gan

  6. by OmUngke on 7 June 2011 at 10:50 am. # | Reply

    Patent benar,,, mas, terimaksih ! langsung praktek

  7. by Semua Ada on 17 July 2011 at 4:52 pm. # | Reply

    wah, oke banget nih mas tutorialnya saya coba dulu mas, semoga tidak gagal :D

  8. by Sukabumi Travel on 15 August 2011 at 2:26 pm. # | Reply

    Ini dia yg ane cari2, biasanya ane pake plugin, tapi mengurangi kecepetan loading website.
    Untung ane nemu blog ini, haturtengkiuw Gan. Mau ane praktekin

  9. by idf on 27 September 2011 at 1:16 am. # | Reply

    ini nih solusi mnghemat disk space.jgn sllu ngandelin plugin.kalo ada yg lbh irit ngpn boros.ya ga?,tq bngt gan tips n scriptnya.donlot ya :-D

  10. by Kumpulan Berita Unik on 30 September 2011 at 7:23 am. # | Reply

    Waw panjang bgt gan… btw ane coba dulu ya…

  11. by dhenycahyoe on 17 February 2012 at 7:54 am. # | Reply

    widih, manteb sob gua coba2 dulu thank’s sharing-nya :D

  12. by kochi on 26 February 2012 at 2:27 pm. # | Reply

    manteb gan..
    Slama ni ane msh pake plugin bisa dcoba nich..

  13. by Randeezt on 4 May 2012 at 2:57 pm. # | Reply

    Nyimak aja, saya gak terlalu paham tentang kode2 diatas :)

  14. by hendra on 10 May 2012 at 3:12 pm. # | Reply

    tutorialnya sangat berguna mas, pas ada tugas membuat web

Leave Your Comment Here