September 3, 2012

Membuat Form Kontak (Contact Us) Untuk Blogger

Dalam hal memudahkan pembaca menghubungi penulis atau author, pada sebuah website dan blog biasanya disediakan form kontak seperti halaman contact us atau contact me. Namun tidak seperti wordpress yang menyediakan plugin untuk mengaktifkan form tersebut, pada blogger secara default tidak tersedia kebutuhan akan hal itu, artinya anda harus membuat halaman sendiri dan biasanya beberapa orang menggunakan javascript untuk keperluan hal tersebut.

Disini akan dijelaskan bagaimana cara membuat form kontak untuk blogger dengan menggunakan script dari snapshot.com, caranya sederhana anda tinggal mengcopy kode yang ada dan memasukkanya pada halaman blogger.

Pertama anda harus login terlebih dahulu dengan account blogger, kemudian pada Dashboard, masuk ke Posting > Edit Pages, dan klik tombol New Page untuk membuat halaman baru, berikan judul (seperti Contact Us) > klik Edit Html Mode dan copykan kode dibawah, setelah selesai klik tombol Publish Page.

<form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);">
<input name="skip_WhereToSend" type="hidden" value="eMAIL@domainanda.com" />
<input name="skip_SnapHostID" type="hidden" value="YCUNN4U2ZE8M" />
<input name="skip_WhereToReturn" type="hidden" value="http://domainanda.blogspot.com/p/terima-kasih.html" />
<input name="skip_Subject" type="hidden" value="Contact Form" />
<input name="skip_ShowUsersIp" type="hidden" value="1" />
<input name="skip_SendCopyToUser" type="hidden" value="1" />
<script type="text/javascript">
function ValidateForm(frm) {
if (frm.Name.value == "") {alert('Name is required.');frm.Name.focus();return false;}
if (frm.FromEmailAddress.value == "") {alert('Email address is required.');frm.FromEmailAddress.focus();return false;}
if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.FromEmailAddress.focus();return false;}
if (frm.Comments.value == "") {alert('Please enter comments or questions.');frm.Comments.focus();return false;}
if (frm.skip_CaptchaCode.value == "") {alert('Enter web form code.');frm.skip_CaptchaCode.focus();return false;}
return true; }
function ReloadCaptchaImage(captchaImageId) {
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false; }
</script>
<table border="0" cellpadding="5" cellspacing="0" style="width: 600px;"><tbody>
<tr> <td><b>Name*:</b></td> <td><input maxlength="60" name="Name" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Phone Number*:</b></td> <td><input maxlength="43" name="PhoneNumber" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Email*:</b></td> <td><input maxlength="60" name="FromEmailAddress" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Message*:</b></td> <td><textarea cols="40" name="Comments" rows="7" style="width: 350px;"></textarea></td> </tr>
<tr> <td align="center" colspan="2">

<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td colspan="2" style="padding-bottom: 18px;">

<a href="http://www.snaphost.com/" style="color: #000099; font-family: Verdana, Arial, Helvetica; font-size: 11px; text-decoration: none;">
rel="nofollow">
This web form is protected from SPAM by
<span style="text-decoration: underline;">SnapHost.com</span></a></td></tr>
<tr valign="top"><td><i>Enter web form code*:</i>
<input maxlength="6" name="skip_CaptchaCode" style="width: 80px;" type="text" /></td><td>
<a href="http://www.snaphost.com/" rel="nofollow"><img alt="Web Form Code" id="CaptchaImage" src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=YCUNN4U2ZE8M&amp;ImgType=2" style="margin-left: 20px;" title="Anti-spam web forms" /></a></td></tr>
</tbody></table>
* - required fields. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<input name="skip_Submit" type="submit" value="Submit" /></td></tr>
</tbody></table>
</form>

Perhatikan tulisan yang dberi warna orange:

eMAIL@domainanda.com ganti dengan email anda
http://domainanda.blogspot.com/p/terima-kasih.html ganti dengan halaman anda
(halaman terima kasih ini harus sudah dibuat sebelumnya, caranya sama
seperti diatas hanya isinya adalah ucapan seperti "terima kasih telah menghubungi kami"

Setelah melakukan semua hal diatas anda akan mempunyai halaman Contact Us seperti gambar berikut:

contact us

Anda juga bisa membuat form kontak dengan membuatnya pada situs foxyform atau 123contactform, setelah mendapatkan kode atau script dari sana lakukan langkah untuk mengcopy kode pada halaman blogger anda.

Demikianlah, Terima kasih dan jangan ragu untuk meninggalkan komentar.

13 comments:

  1. sob setelah isi komentar di contact us, gimana kita bisa tahu kalau ada orang yang mengisi form itu, apakah diberitahukan lewat email?

    ReplyDelete
    Replies
    1. betul sekali kawan, secara otomatis contact form akan mengirimnya ke email yang disikan diatas

      Delete
  2. kaka' punya ku kok g bisa ya...??
    mohon bantuannya....

    ReplyDelete
    Replies
    1. gak bisanya gi mana ya, pastikan pada saat copy paste kode, halaman posting dalam posisi HTML mode, untuk melihat hasilnya kembali ke mode compose, ganti tulisan orange dengan milik anda

      Delete
  3. Sob ada yang salah di bagian => "....value="http://domainanda.blogspot.com/p/terima-kasih.html />..."
    harusnya ditambah " di bagian belakangnya. jadinya=> value="http://domainanda.blogspot.com/p/terima-kasih.html"/>

    ReplyDelete
    Replies
    1. yup, thanks koreksinya sob, syntax sy update

      Delete
  4. terikasih.. akhirnya saya mengerti... sukses selalu..

    ReplyDelete
  5. sebagai bahan testimoni dari Artikel Membuat form kontak sendiri pada blogger, pada situs saya di <a href="http://wikipediaherbal.blogspot.com" target="_blank" title="Wikipedia Herbal | Perpustakan Pengobatan Alami">Wikipedia Herbal</a>, sukses dan bekerja dengan baik tanpa ada kesalahan, serta pesan pun masuk ke email saya. Thanks atas informasinya gan!

    ReplyDelete