Header

Cara Membuat Contact Form Di Blog

Posted by : Admin On 31 December 2012 22 comments

Halaman contact us wajib hukumnya gan, biar pengunjung blog bisa ngirim pesan ke kita kapan pun mereka mau. Dan juga buat loe yang pengen daftar Adsense halaman contact us ini harus ada. Kalo buat halaman contact us cuma isinya tulisan doank gak aysik gan, jadi harus di isi formnya biar keren.


Loe ada niat buat halaman contact us tapi gak tau cara buat formnya. Tenang pada postingan kali ini gw bakal share cara buatnya gan. Gw share cara yang gampang dan gak perlu registrasi2an segala gan, silahkan disimak.



Cara Membuat Contact Us Form Di Blog




  • Pertama loe masuk ke Blogger terus dari buat Page baru judulnya misal Contact Us lalu copy kode dibawah ini gan and pastein di mode HTMLnya. Kalo udah save lalu di close jangan di publish dulu.

<div style="border: solid 1px #000000;"><form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);">
<input name="skip_WhereToSend" type="hidden" value="Alamat Email Loe" />
<input name="skip_SnapHostID" type="hidden" value="BM833MKCXEXQ" />
<input name="skip_WhereToReturn" type="hidden" value="URL Halaman Pesan Terkirim" />
<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.Nama.value == "") {alert('Nama harus di isi.');frm.Nama.focus();return false;}
if (frm.Dari.value == "") {alert('Alamat email harus di isi.');frm.Dari.focus();return false;}
if (frm.Dari.value.indexOf("@") < 1 || frm.Dari.value.indexOf(".") < 1) {alert('Tolong masukan alamat email yang benar.');frm.Dari.focus();return false;}
if (frm.Pesan.value == "") {alert('Silahkan kirimkan komentar atau pertanyaan.');frm.Pesan.focus();return false;}
if (frm.skip_CaptchaCode.value == "") {alert('Masukan kode di samping.');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>
<br />
<table border="0" cellpadding="5" cellspacing="0" style="width: 600px;"><tbody>
<tr> <td><b>Nama* :</b></td> <td><input maxlength="60" name="Nama" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Nomer Telpon :</b></td> <td><input maxlength="43" name="NomorTelepon" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Email* :</b></td> <td><input maxlength="60" name="Dari" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Pesan* :</b></td> <td><textarea cols="40" name="Pesan" 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/" rel="nofollow" style="color: #000099; font-family: Verdana, Arial, Helvetica; font-size: 11px; text-decoration: none;" target="_blank">
Kontak form ini dilindungi dari SPAM by :
<span style="text-decoration: underline;">SnapHost.com</span></a></td></tr>
<tr valign="top"><td><i>Masukan kode berikut*.</i>
<input maxlength="6" name="skip_CaptchaCode" style="width: 80px;" type="text" /></td><td><a href="http://www.snaphost.com/" rel="nofollow" target="_blank"><img alt="Web Form Code" src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=BM833MKCXEXQ&amp;ImgType=2" id="CaptchaImage" style="margin-left: 20px;" title="Anti-spam web forms" /></a></td></tr>
</tbody></table>
* Harus Di Isi. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<input name="skip_Submit" type="submit" value="Kirim" /></td></tr>
</tbody></table>
</form></div>


  • Lalu buat page baru lagi gan, ini buat redirect halaman pas pesan udah terkirim. Loe bisa buat isinya mungkin "selamat pesan anda sudah terkirim" ato apalah terserah loe gan. Kalo udah beres tinggal di publish gan.
  • Langkah selanjutnya loe edit kode kontak form yang tadi, tinggal ganti Alamat Email Loe dengan alamat email kemana pesannya bakal dikirim, terus buat URL Halaman Pesan Terkirim loe ganti sama URL page yang tadi udah loe buat. Semua beres tinggal di publish aja gan. Sekarang loe udah punya contact form baru.
  • Kalo mau edit kata-katanya silahkan aja gan tapi jangan ampe salah ntar gak berfungsi contact formnya.



Selain contact form di atas loe juga bisa buat langsung online gan, gak perlu registrasi tinggal masukin alamat email loe aja dan contact form siap dipasang di blog. Gw pake ini form gan, simple dan gampang cuman sayang bahasanya english. Kalo mau buat loe langsung cek di Foxyform. Bisa juga loe buat di Jotform.


Yang lainnya ada juga tapi harus registrasi gan misal : EmailMeForm, 123 Contact Form, Kontactr atau My Contact Form, pilih aja sesuka hati loe semua gratis gan.



Sekian dulu gw share cara buat contact us form di blog gan, semoga bermanfaat buat kalian. Kalo loe punya tips laen silahkan di share jangan malu-malu, dan inget jangan lupa berkomentar gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

22 comments:

  1. mantap dan keren bro, ane coba yee...

    ReplyDelete
  2. nah, in yang gue suka, karena pesan mandiri yang dibuat langusng, makasih banyak ya

    ReplyDelete
  3. gan cara bikin halaman redirectnya gmn?apa pakai kode html juga?trus kalau gak pake bikin halamana redirect apa kontak bisa berfingsi?mohon petunjuk

    ReplyDelete
  4. mkasih bnyak ya bro atas tutornya

    ReplyDelete
  5. makasih udah berbagi yang bermanfaat, kunjungi balik ya blog saya

    ReplyDelete
  6. "URL Halamana Pesan Terkirim" yng bagaimana Bos??? saya ganti2 tapi belum maksimal hasilnya... Maaf ini blogger pemula

    ReplyDelete
  7. thanks broo...
    contact form nya keren abis...
    udah saya pasang diblog saya

    ReplyDelete
  8. url halaman terkirim gimana sob?

    ReplyDelete
  9. thank gan untuk penjelasannya,mak nyus cospleng...

    ReplyDelete
  10. gan... yang dari 123 contact form tu katanya kalau kita pasang badge dari mereka, kita dib ayar mas yah.. !??! tapi ko sepertinya gag ada konfirmasi dari mereka ya... ada ide?

    terimakasih

    Belajar Photoshop

    ReplyDelete
  11. Klo mau nambahin utk upload file gmn mastah caranya?

    ReplyDelete
  12. Cuman mau bilang terima kasih share tutorialnya

    ReplyDelete
  13. Kontak form memang sangat penting ya, salah satu urgensinya adalah untuk menghubungi pemilik blog sebagai saran atau kritik yang ingin disampaikan. :D salam hangat dari www.terwujud.com

    ReplyDelete
  14. keren gan,, boleh coba buat blog saya

    ReplyDelete
  15. wah keren ini. mantap
    http://mebel-jepara.net

    ReplyDelete
  16. wah... it works gan. terimakasih banyak

    ReplyDelete
  17. Keren untuk blogspot, tapi kalau wordpress Hosting lebih mudah, tinggal pake plugins

    ReplyDelete
  18. Trimakasih gan tapi kok terlalu besar cuman keliatan separo gimana caranya agar sesuai dengan templat saya gan mohon pencerahanya.

    ReplyDelete
  19. mantap gan teruskan
    backlink gan blog anyar yang isinya menabjukan monggo mas mas ESTKomputer.blogspot.co.id

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya