Cara Membuat Halaman Kontak di Blogger - Blogger Bandung

HALAMAN  kontak berisi formulir (Contact Form) berfungsi memudahkan pengunjung menghubungi admin blog.

Halaman kontak ini berisi nama, email, dan pesan. Pesan yang dikirimkan akan muncul di inbox email admin blog. (Lihat DEMO).

Form Kontak adalah formulir yang memudahkan pengunjung menghubungi admin sebuah blog/website. Berikut ini Cara Membuat Form Kontak di Halaman Statis Blogger.

Dengan membuat form kontak di halaman statis blog, kita memudahkan pembaca atau pihak berkepentingan menghubungi kita dengan mudah.

Contact form for Blogger ini terdiri dari:

• Kolom Nama 
• Kolom Email
• Kolom Pesan
• Tombol Kirim (Submit)

Berikut ini screen shot-nya.

Bagus kan formulir kontaknya? Yuk, kita bikin sekarang. Begini caranya.

Cara Membuat Form Kontak di Halaman Statis Blogger

Berikut ini Cara Membuat Form Kontak di Halaman Statis Blogger. Login ke Blogger. 

Langkah 1: Tambahkan Widget Kontak di Sidebar

Di Dashboard Blogger, klik Layout (Tata Letak)

1. Di sebelah kanan Anda, klik Add a Gadget (Tambahkan Gadget)

2. Cari dan pilih/klik Contact Form (Form Kontak). Judul Widget kosongkan!

3. Save! Simpan.

Langkah 2: Tambahkan Kode CSS di Template

Klik Theme (Tema) > klik tand panah di Customize > pilih Edit HTML. 

Copas kode berikut ini di atas kode ]]></b:skin> 

/* Contact Form */

.contact-form-widget {width: 500px;max-width: 100%;margin: 0 auto;padding: 10px;background: #F8F8F8;color: #000;border: 1px solid #C1C1C1;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);border-radius: 10px;}
.contact-form-name, .contact-form-email, .contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;}
.contact-form-button-submit {border-color: #C1C1C1;background: #E3E3E3;color: #585858;width: 20%;max-width: 20%;margin-bottom: 10px;}
.contact-form-button-submit:hover{background: #4C8EF9;color: #ffffff;border: 1px solid #FAFAFA;}

Save! Simpan Template!

Langkah 3: Hapus Kode Widget

Masih di template, cari (Ctrl+F) kode widget "ContactForm" dan hapus kode yang berwarna merah.

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

Save! Simpan Template dan kembali ke Dashboard Blogger.

Langkah 5: Membuat Halaman Kontak

Kini saatnya membuat form kontak di halaman statis Blogger.

1. Klik Pages (Halaman)

2. Klik New Page (Halaman Baru)

3. Isi judul halaman dengan Kontak atau Contact

4. Klik Mode HTML (klik icon pena di kiri Anda)

5. Copas atau simpan kode ini di kolom konten:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<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>
</form>
</div>
</div>
</div>

6. Klik Publish (Publikasikan)

Kini form kontak di halaman statis sudah jadi. Pesan yang masuk akan terkirim ke email Anda sebagau admin blog. Anda bisa tes dengan mengirim pesan buat Anda sendiri.

Cara Lain Membuat Halaman Kontak di Blogger

Berikut ini cara membuatnya:

1. Klik Layout > Add a Gadget
2. Pilih Contact Form

3. Simpan di bagian paling bawah sidebar
4. Save!

Langkah berikutnya memasang kode di template:

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#ContactForm1 {display:none}

3. Simpan!

Langkah selanjutnya membuat halaman kontak.

1. Klik Halaman > Halaman Baru
2. Isi kolok Judul Halaman dengan Kontak
3. Klik Mode HTML
3. Copas kode berikut ini:

<form name="contact-form">
<p></p>
Nama<p></p>
<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}
#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;}
</style>

PUBLISH!

Selesai. Itu dia Cara Membuat Halaman Kontak di Blogger. (Blogger Bandung).*