Membuat Halaman Kontak Blog Yang Bagus

Halaman kontak blog umumnya digunakan sebagai sarana komunikasi antara pemilik blog dengan pengunjung blog. Melalui halaman kontak blog, pengunjung dapat memberikan kritik atau saran kepada pemilik blog, atau hanya sekedar bertanya tentng sesuatu. Biasanya halaman kontak sering disebut juga dengan form contact, karena memang ketika pengunjung memasuki halaman kontak akan terdapat sebuah formulir kontak dalam format isian untuk nama, email, dan pesan . 

Setiap halaman kontak blog mungkin bisa berbeda – beda tergantung teknik ataupun cara membuatnya, ada yang menggunakan form isian yang dibuat dari pihak ketiga seperti misal dari website 123contactform.com [baca : Membuat Contact Form di Blogspot ] dan ada juga yang membuatnya dari widget yang sudah disediakan oleh layanan blog itu sendiri.


Disini Saya akan membuat halaman kontak blog yang bagus dengan memanfaatkan widget contact form / formulir kontak yang sudah tersedia di blog, khususnya disini adalah untuk blog jenis blogspot. Halaman kontak tersebut nantinya akan dimodifikasi tampilannya kemudian di tampilkan pada halaman statis blog.

#Langkah pertama tambahkan widget formulit kontak
Tambahkan terlebih dahulu widget formulir kontak. Pada halaman tata letak blog, klik Tambahkan Gadget > Gadget Lainnya > Formulir Kontak 


menambahkan gadget
 
 

#Langkah kedua cari widget contact form didalam template
 

Masuk ke mode Edit Html template blog, kemudian cari widget formulir kontak yang sudah ditambahkan sebelumnya. Klik Tema > Edit HTML
widget contact form yang bagus


Pada type=’ContactForm’>….</b:widget>. Klik titik – titiknya supaya kodenya terbuka, kemudian nanti kode akan terlihat kurang lebih seperti berikut



<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>


Hapus kode dari bawah <b:includable id='main'> sampai  <b:include name='quickedit'/> sehingga nanti hanya tersisa tag
<b:includable id='main'> dan </b:includable> kemudian Simpan
 
#Langkah ketiga menambahkan kode css
Tambahkan kode CSS berikut diatas kode </head>, disini Saya kita akan menggunakan tag conditional sehingga style css hanya berlaku untuk halaman statik saja. Kode CSS ini nantinya untuk tampilan form kontaknya, contoh salah satu style/gaya dari kontak ini adalah ketika kursor diletakan pada bagian input maka akan muncul garis bawah dengan tambahan efek transition
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
/* Halaman Kontak Style */
.inputpesan {float: none; position: relative; margin-bottom: 45px; margin-right: 10px;}
#ContactForm1_contact-form-email, #ContactForm1_contact-form-name, #ContactForm1_contact-form-email-message {width: 100%;padding: 15px 0; border: none; color: #777; border-bottom: 1px solid #ddd; display: block;font-size: 15px;}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{border-bottom: 2px solid #2b43f5; transition:all .3s ease-out}
#ContactForm1_contact-form-submit{color: #fff !important; background: #2196F3; padding: 15px 25px; border-radius: 4px; border: none; outline: none; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor: pointer; transition: all .4s ease-in-out; text-transform: uppercase; float: left; margin-top: 15px;}
#ContactForm1_contact-form-submit:hover{background-color:#f5785f}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:10px;}

</style>
</b:if>


#Langkah terakhir panggil formulir kontak
Buatlah halaman kontak di blog Anda, klik mode ‘HTML’ kemudian tambahkan kode berikut untuk membuat / memanggil formulir kontak


<div class="inputpesan">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>


Bila sudah selesai klik Save/Publikasikan. Sebagai tambahan saja bila sudah ditambahkan jangan klik tombol ‘compose’ karena hal tersebut mungkin bisa mengakibatkan kerusakan pada susunan kode, hal tersebut memang kadang sering terjadi pada halaman – halaman statik blog yang memuat kode – kode tertentu.



DEMO

Untuk tampilannya silahkan edit - edit sendiri saja, bila misal tampilannya kurang responsive di blog Anda, silahkan tambahkan media query atau silahkan atur media query post blog masing - masing

Pesan yang dikirim oleh pengunjung nantinya akan masuk ke inbox email admin blog, nanti bisa dilihat pada tab sosial di inbox email, kemudian nanti akan terlihat keterangan pesan yang masuk tersebut dikirim dari gadget formulit kontak


email yang masuk dari formulir kontak



11 Responses to "Membuat Halaman Kontak Blog Yang Bagus "

  1. Keren! Dari dulu pengen buat yang kaya gini ga sempat-sempat. Nanti kalau ada waktu buka post ini lagi

    ReplyDelete
    Replies
    1. hehehe....masih keneh teu sempet mah teu kudu alesan mang

      Delete
  2. liat tampilan kontak hasil kreasi mang root sih emang sukeren banget sih...cuman angger weh kudu saat waktu nyantey ngopreknya, jadinya....biarin dengan form kontak yang ada aja ah, kecuali mang admin mau bikinin buat saya, nggak nolak atuh

    ReplyDelete
  3. Setelah baca artikel ini saya baru inget diblog saya gak ada form kontak :D, tutorial buat worpress dong mang :d

    ReplyDelete
  4. Form kontak nya langsung manfaatin dari blogger ya mas? Kalo di blog saya kan dari google form., kapan2 coba deh.. Hehe

    ReplyDelete
  5. Keren juga ya kalau kyak gini. Boleh nih aku praktekan :)
    Salam kenal ya :)

    ReplyDelete
  6. Semakin keren nih si mamang kodingan tutorialnya, ijin simpan ya mang. Nanti bisa buat belajar.

    ReplyDelete
  7. Wah mantep nih, jadi memudahkan user jika ingin menghubungi kita ya mas :D

    ReplyDelete
  8. cobain ah kang form kontaknya, sepertinya ga terlalu sulit..

    ReplyDelete
  9. yah aku baru bisa baca dulu ini ilmu barunya, tapi belum bisa mempraktekkannya, beneran belum bisa kalau edit-edit bagian dalam
    nanti malah berantakan, tapi aku pahami
    terima kasih

    ReplyDelete
  10. keren mas jadi pengen coba buat untuk blog saya

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...