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 

 
 
#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

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

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple