2012/08 oleh Kang Firman Bloggist Ankshana

Blogger — Cara Membuat Form Contact Us

Welcome to KF-84 Al-Ambity Bloggist Ankshana

The Bloggist Ankshana; Dalam hal memudahkan para pengunjung (sebagai pembaca artikel) menghubungi author (si penulis artikel) dalam sebuah website/blog, biasanya disediakan formulir kontak pada halaman Contact Us atau Contact Me. Secara default - Blogger tidak menyediakan kebutuhan ini, tak seperti pada flatform Wordpress yang sudah menyediakan plugins untuk mengaktifkan form tersebut.

Ini berarti bahwa Anda harus membuat formulir kontak secara manual untuk keperluan tersebut, beberapa diantaranya juga bisa menyertakan bahasa pemrograman javascript pada halaman kontaknya.

Dalam bahasan kali ini, saya akan coba jelaskan tentang bagaimana cara membuat formulir kontak dalam flatform blogger yang mengintegrasikan bahasa pemrograman javascript (sebagai eksperimen, saya menggunakan bahan dengan contoh script dari situs SnapHost.com). Caranya sangat sederhana, cukup dengan menyalin (copy) kode yang disediakan lalu menyematkannya (paste) dalam halaman blogger Anda. Mudah bukan!?!

Cara Membuat Formulir Kontak

Pertama, anda harus login di situs resmi SnapHost.com terlebih dulu. Dari halaman dashboard, masuk ke halaman Posting › Edit Pages dan klik tombol New Pages untuk membuat/menambahkan halaman baru. Beri judul untuk halamannya (contoh: Contact Us atau Hubungi Saya), lalu klik Edit HTML Mode.

Salin (copy) kode yang diberikan, lalu tempel (paste) pada halaman blogger sesuai keinginan Anda (bisa di area widget, halaman tersendiri atau dalam mode Edit Template Blogger). Langkah terakhir, klik Publish Page untuk menyelesaikannya.

Berikut ini adalah contoh script kode yang sudah di dapatkan:

<form id="ContactUsCaptchaWebForm" action="http://www.snaphost.com/captcha/send.aspx" method="post" onSubmit="return ValidateForm(this)">
    <input name="skip_Subject" type="hidden" value="Contact Form" />
    <input name="skip_SendCopyToUser" type="hidden" value="1" />
    <input name="skip_ShowUsersIp" type="hidden" value="1" />
    <input name="skip_SnapHostID" type="hidden" value="0X2XXXX7X9XXX" />
    <input name="skip_WhereToSend" type="hidden" value="emailadress.anda@provider.isp" />
    <input name="skip_WhereToReturn" type="hidden" value="http://kangfirm84.blogspot.com/p/kontak.html" />
    <table border="0" cellpadding="5" cellspacing="0" style="max-width: 600px;" class="table table-condensed table-striped table-hover table-bordered">
      <tbody>
        <tr valign="top"><td>Name(*):</td> <td><input type="text" maxlength="60" name="Name" style="width: 160px;"/b></td></tr>
        <tr valign="top"><td>Email(*):</td> <td><input type="text" maxlength="60" name="FromEmailAddress" style="width: 160px;"/></td></tr>
        <tr valign="top"><td>Phone Number:</td> <td><input type="text" maxlength="43" name="PhoneNumber" style="width: 160px;"/></td></tr>
        <tr valign="top"><td>Message(*)</td> <td><textarea cols="40" rows="5" name="Comments" style="min-width: 160px;"></textarea></td></tr>
        <tr valign="top">
            <td align="center" colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" style=""><tbody>
              <tr>
                <td colspan="2" style="font-family: verdana,arial,helvetica;font-size: 10pt;padding-bottom: 18px;">
                        <a href="http://www.snaphost.com/" rel="nofollow" style="text-decoration: none;color: #000099;">This web form is protected from SPAM by <span style="text-decoration: underline;">SnapHost.com</span></a>
                </td>
              </tr>
              <tr>
                <td>Enter web form code: <input type="text" maxlength="6" name="skip_CaptchaCode" style="width: 80px;" /></td>
                <td><a href="http://www.snaphost.com/" rel="nofollow" style="text-decoration: none;color: #000099;">
                    <img alt="web form code" title="anti-spam web form" src="http://www.snaphost.com/captcha/CaptchaImage.aspx?id=X2XXXX7X9XXX0&ImgType=2" id="CaptchaImage" style="margin-left: 20px;" /></a></td>
              </tr>
            </tbody></table>
            * - required fields      
            <input type="submit" name="skip_Submit" value="Submit" />
            </td>
        </tr>
      </tr></tbody>
    </table>
<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('@') <= 0 || frm.FromEmailAddress.value.indexOf('.') <= 0) {
  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('Please enter webForm code.');frm.skip_CaptchaCode.focus();
  return false;
 }
 return true;
}
function ReloadCaptchaImage(captchaImageId) {
 var date= new Date();
 var obj = document.getElementById(captchaImageId);
 var src = obj.src;
 var pos = src.indexOf('&rad=');
 if (pos >=0){src = src.substr(0, pos);}
 obj.src = src + '&rad=' + date.getTime();
 return false;
}
</script>
</form>

Perhatikan kode yang ditebalkan dan berwarna biru, silahkan di sesuaikan saja:
0X2XXXX7X9XXX ganti dengan id akun yang Anda daftarkan di SnapHost.com
emailadress.anda@provider.isp ganti dengan alamat email Anda.
http://kangfirm84.blogspot.com/p/kontak.html ganti dengan halaman yang anda tentukan di blogger.com

Setelah melakukan hal tersebut diatas, anda telah memiliki formulir kontak di halaman blogger Anda. Kira-kira, penampakkannya seperti gambar berikut ini:
Gambar Hasil: Cara Membuat Form Contact Us

Selain dari SnapHost.com, Anda juga bisa membuat halaman formulir kontak dari situs penyedia yang lain seperti FoxyForm atau 123contactform. Setelah mendapatkan script kode dari situs tersebut, lakukan langkah yang sama pada halaman blogger Anda.

Demikian pembahasan tentang bagaimana cara membuat formulir kontak ini disajikan untuk anda untuk anda. Jika ada yang perlu ditanyakan, silahkan tinggalkan jejak komentar anda pada kolom dibawah.

Selamat Mencoba! dan, salam Blogger Indonesia

Terima kasih telah membaca artikel ini, silahkan SUKAI dan BAGIKAN halaman ini bila anda merasakan hal yang sama! Karena berbagi itu indah..
Thanks for read this article, please LIKE and SHARE this page if you feel the same! Because a sharing is beautiful..