Cara Membuat Halaman Contact Us pada Blogspot

Kali ini saya akan berbagi tutorial cara menambahkan halaman Contact Us pada blog. Perlu diketahui, halaman Contact Us adalah suatu yang diperlukan dalam sebuah web atau blog karena dengan itu para pengunjung bisa menyampaikan pesan mereka kepada owner/pemilik blog.

Lalu bagaimana cara membuatnya? Oke langsung saja. Saya akan memberikan dua cara untuk membuat sebuah halaman Contact Us.

Yang pertama adalah menggunakan fasilitas Google Formulir dari Google, dan yang kedua menggunakan widget yang ada pada Blogger.

Cara 1

1. Buka drive.google.com dari browser.
2. Klik tombol  BARU untuk mulai membuat halaman Contact Us.
3. Pilih Google formulir
4. Ubah judul form sesuai kebutuhan.
   
5. Pada judul pertanyaan ketikan dengan kata 'Nama'
6. Pada teks bantuan isikan kalimat berupa petunjuk sederhana contoh isikan dengan “Isikan nama lengkap anda”
7. Di pilihan jenis pertanyaan silahkan ganti dengan pilihan teks.
8. Tambahkan kan field yang lain dengan cara mengklik tambahkan item, dan isi seperti cara di atas untuk membuat field Email. 
9. Tambahkan satu lagi field untuk menampung pesan pengunjungnya dengan Jenis pertanyaan nya adalah Text Paragraf. Ini akan menghasilkan kotak yang lebar berbeda dengan kotak-kotak field yang pertama.
10. Jika semuanya telah selesai diisi sekarang tinggal mengklik tombol Kirim formulir dan akan dibawah ke jendela baru yaitu kirim formulir.
11. Pilih tombol sematkan dan salin kode yang ada didalam kotak tersebut ke halaman blog yang ingin dibuat halaman contact form nya dengan metode penulisan HTML.

Cara 2

1. Masuk ke "layout" atau "tata letak".
2. Klik "Add a Gadget", klik more gadgets, terus klik dengan tulisan contact form, setelah itu klik save, dan lihat hasilnya.
   
3. Buat page atau halaman, di halaman yang masih kosong tambahkan kode dibawah ini dibagian HTML, jangan lupa pada menu option atau pilihan, pilih Tekan "Enter" untuk baris baru.

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




4. Lalu edit template HTML anda untuk menyembunyikan form yang ada di halaman utama blog. Caranya 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;
}

Dan selesai, kini blog anda sudah memiliki halaman contact us.

Semoga artikel ini dapat membantu. Terimakasih.