Cara Menciptakan Contact Form Di Posting Blog

Cara menciptakan contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Makara tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

Gambar diatas yaitu pola contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.

Langkah pertama : Membuat contact form dihalaman posting atau laman blog.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
2. Lalu klik tambahkan Gadget > Gadget Lainnya > kemudian pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel gres atau buat dilaman > Laman gres > Laman Kosong. Dan Copi instruksi dibawah ini kemudian pastekan dibagian HTML(disebelah compose).
<form name='contact-form'>
<div>Nama Kamu:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<div>Email:</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<div>Pesan:</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
</form>
4. Terakhir beri judul, dan Publikasikan. Selesai.

Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.

1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan instruksi ini kedalamnya.
/* untuk mengatur ukuran form name dan email*/
.contact-form-name, .contact-form-email {
max-width: 300px;
width: 100%;
}
/* untuk mengatur ukuran form pesan*/
.contact-form-email-message {
max-width: 300px;
width: 100%;
}
2. Lalu terapkan ke blog, bila ingin merubah tingginya tambahkan instruksi height:100px;. Silakan diatur sendiri.

Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.

1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
2. Selanjutnya, buka semua kode, dan hapus beberapa instruksi didalamnya(hanya instruksi dibagian ContactForm1 bab lain jangan dihapus). Sampai yang tertinggal hanya instruksi dibawah ini
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
3. Setelah itu, cari instruksi ]]></b:skin> dan tempatkan instruksi dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
#ContactForm1 {
height: 0px;
visibility: hidden;
display: none;
background:transparent;
box-shadow:none;}
4. Save temlate, selesai.

Widget contact form tetap akan ada di blog kita. Tapi hanya di bab tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kau baca di artikel cara menciptakan background dihalaman posting. Semoga dapat Bermanfaat untuk anda.