membuat page contact form , contact me atau contact us 2015

Salam Blogger, setelah lama ADM Blog tidak lagi menulis artikel baru, karena sedang sibuk mengrurusi pekerjaan kantor, akhirnya baru sekarang ini saya dapat meluangkan waktu untuk kembali menulis artikel pertama saya setelah lama tidak menulis, yaitu mengenai cara membuat page contact form, contact me, atau contact us, yang mana sangatlah penting, gunanya untuk sebagai sharing secara personal antara pembaca dan pemilik blog, jika ada yang mau ditanyakan oleh pengunjung kepada pemilik blog atau ada perlu sesuatu lain, maka keberadaan menu contact form ini, keberadaan nya sangat penting dalam suatu blog.

kira-kira menu contact seperti apa yang bagus diterapkan di blog itu.? kalo dulu menu contact itu kebanyakan isinya begini, inti isi tulisan nya mungkin seperti ini :

"jika kamu ada pertanyaan atau mau kasih kritik saran nya silahkan kirim pesannya ke email, adibisnismurah@gmail.com, terimakasih atas perhatiannya.."

biasanya menu contact seperti ini udah agak ~~kuno~~, menu contact form dengan contoh diatas hanya cocok untuk blog formal, atau blog lowongan kerja.
jadi menu seperti apa yang efektif diterapkan di blog, menu yang bagus menurut saya untuk saat ini adalah
menu yang ada form nya, jadi namanya sesuai judul postingan ini, yaitu menu "contact form".

pada postingan ini saya akan mencoba membahas 2 cara membuat contact form:

Cara membuat Contact form di widget blog
Cara membuat contact form di halaman statis blog/halaman page blog

1.) Cara membuat Contact form di widget blog
1. masuk ke "layout" kalo atau kalo dalam bahasa indonesia namanya "tata letak".
2. terus klik "Ad a Gadget", klik more gadgets, terus klik dengan tulisan contact form, setelah itu klik save, dan lihat hasilnya,
ini contoh preview gambarnya nya:

contoh Contact form widget dibagian sidebar

2.) Cara membuat contact form di halaman statis/halaman page blog
contact seperti ini adalah contact form yang saya gunakan di blog ini untuk saat ini, cara membuat
contact form di halaman statis/halaman page blog cukup mudah.

contact form seperti ini gak jauh beda dengan cara kesatu, jadi cuman menyembunyikan contact form di bagian widget sidebar dan dipindahkan ke halaman status/halaman page blog

Cara membuat contact form di halaman statis/halaman page blog
1. buat contact form terlebih dahulu caranya seperti di nomor 1, jika sudah ada lanjut ke tahap kedua
2. tambahkan halaman, untuk menambahkan nya halaman baru ( new page), halaman kosong, terus
tambahkan kode dibawah ini dibagian HTML

<form name="contact-form">
 Jika kamu punya pertanyaan seputar blog <a href="http://adibisnis-murah.blogspot.com/">ADM BLOG</a> ini,<br />
mungkin dari isi blog ini yang belum jelas, saran buat blog ini kedepannya apa, kritik,<br />
dan atau kalau kamu ada yang perlu ditanyakan bisa menghubungi saya disini, makasih yah kak' :)<br />
<br />
<label for="name">Your name:</label><br />
<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<label for="name">Alamat Email:</label><br />
<br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<label for="name">Isi Pesan:</label><br />
<br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<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>
<br />
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

pada menu option atau pilihan, pilih Tekan "Enter" untuk baris baru, atau sesuaikan format option nya

sesuai dengan tampilan gambar dibawah ini : setelah selesai klik "publikasikan"

3. meyembunyikan widget dan menambahkan CSS
langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. tambahkan kode ini di atas ]]></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. tahap keempat, Selesai dan lihat hasilnya..... :)

tampilan hasil akhirnya nanti kurang lebih akan seperti contoh gambar dibawah ini atau kamu bisa
melihat contoh hasil akhirnya di bagian menu Contact Us di blog ini.

dan saya mencoba contact form ini, dengan mengisi formnya terus klik kirim