Cara Membuat Contact Form di Halaman Statis untuk Blogger

Ok pada postingan pertama saya , saya akan membahas sudah tertera ya di judul.

Contact form sendiri merupakan kelengkapan tersendiri bagi suatu blog.

tanpa Contact Form mungkin blog kita dibilang ketinggalan jaman ,

Sebenarnya sih kita bisa membuat Contact Form tanpa harus ubek ubek html dengan widget blogger namun mungkin akan menambah widget blog kita sehingga tidak nyaman saat dilihat oleh visitor ,

Sehingga membuat jumlah visitor blog menurun.

Pada post kali ini saya akan menyampaikan sebuah tutorial membuat Contact from di halaman statis,

Jadi kita tak perlu membuat contact di website-website. 

Untuk live preview bisa anda lihat pada Contact us blog ini ada menu Features.

Dan ingat mungkin setiap template beda tampilan dan animasi.

Baiklah berikut ini caranya

1.Log in ke blogger

2.Klik menu Template

3.Setelah itu klik dan edit HTML Template

4.Lalu masukan kode berikut ini diatas ]]></b:skin>

 /* CSS Contact Form */

 #ContactForm1{

 display:none;

 }

 #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

 width: 300px;

 height:auto;

 margin: 5px auto;

 padding: 10px;

 background: #f2f2f2;

 border: 1px solid #ccc;

 color:#777;

 }

 #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{

 background: #fffff7;

 }

 #ContactForm1_contact-form-email-message{

 width: 450px;

 height: 175px;

 margin: 5px auto;

 padding: 10px;

 background: #f2f2f2;

 border: 1px solid #ccc;

 color:#777;

 font-family:Arial, sans-serif;

 }

 #ContactForm1_contact-form-submit {

 width: 101px;

 height: 35px;

 float: left;

 color: #FFF;

 padding: 0;

 margin: 10px 0 3px 0 0;

 cursor: pointer;

 background: #5E768D;

 border: 1px solid #556f8c;

 border-radius:3px;

 }

 #ContactForm1_contact-form-submit:hover {

 background:#435c74;

 }

 #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

 width: 450px;

 margin-top:35px;

 }

4.Setelah itu Cari menu Laman 

4.Lalu klik Laman baru dan ubah dari Compose ke HTML

5.Isikan post tersebut dengan kode html ini

 <form name="contact-form">

 <p></p>

 Nama

 <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

 <p></p>

 Alamat Email <span style="color: red; font-weight: bolder;">*</span>

 <p></p>

 <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

 <p></p>

 Isi Pesan <span style="color: red; font-weight: bolder;">*</span>

 <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

 <p></p>

 <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />

 <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>

 <style type="text/css">

 /* Menyembunyikan elemen dalam postingan */

 #comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

 </style>

tahap akhir,Lalu ubah option pada laman tersebut seperti ini

http://shareajayuk.blogspot.com/2015/08/cara-membuat-contact-form-di-halaman.html