Membuat Halaman Kontak Blog Yang Anggun

Halaman kontak blog umumnya dipakai sebagai masukana komunikasi antara pemilik blog dengan pengunjung blog. Melalui halaman kontak blog, pengunjung sanggup mempersembahkan Koreksi atau masukan kepada pemilik blog, atau spesialuntuk sekedar bertanya tentng sesuatu. Biasanya halaman kontak sering disebut juga dengan form contact, alasannya memang saat pengunjung memasuki halaman kontak akan terdapat sebuah formulir kontak dalam format isian untuk nama, email, dan pesan . 

Setiap halaman kontak blog mungkin sanggup tidak sama – beda tergantung metode ataupun cara menciptakannya, ada yang memakai form isian yang dibentuk dari pihak ketiga menyerupai misal dari website 123contactform.com [baca : Membuat Contact Form di Blogspot ] dan ada juga yang menciptakannya dari widget yang sudah disediakan oleh layanan blog itu sendiri.


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

#Langkah pertama menambahkan widget formulit kontak
Tambahkan terlebih lampau 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 dimenambahkan sebelumnya. Klik Tema > Edit HTML

Pada type=’ContactForm’>….</b:widget>. Klik titik – titiknya agar kodenya terbuka, kemudian nanti instruksi akan terlihat kurang lebih menyerupai diberikut

 <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 spesialuntuk tersisa tag <b:includable id='main'> dan </b:includable> kemudian Simpan

 
#Langkah ketiga menambahkan instruksi css
Tambahkan instruksi CSS diberikut diatas instruksi </head>, disini Saya kita akan memakai tag conditional sehingga style css spesialuntuk berlaku untuk halaman statik saja. Kode CSS ini nantinya untuk tampilan form kontaknya, pola salah satu style/gaya dari kontak ini yaitu saat kursor diletakan pada pecahan input maka akan muncul garis bawah dengan komplemen 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 menambahkan instruksi diberikut 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 komplemen saja kalau sudah dimenambahkan tidakboleh klik tombol ‘compose’ alasannya hal tersebut mungkin sanggup menimbulkan kerusakan pada susunan kode, hal tersebut memang kadang sering terjadi pada halaman – halaman statik blog yang memuat instruksi – instruksi tertentu.

DEMO

Untuk tampilannya silahkan edit - edit sendiri saja, kalau misal tampilannya kurang responsive di blog Anda, silahkan menambahkan 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 sanggup dilihat pada tab sosial di inbox email, kemudian nanti akan terlihat keterangan pesan yang masuk tersebut dikirim dari gadget formulit kontak

Share :