Cara Membuat Halaman Kontak dan Contact Form di Blog

Romeltea | Follow @romel_tea
Halaman kontak plus Contact Form memudahkan pengunjung menghubungi admin blog. Berikut ini cara membuat Halaman Kontak di Blog Blogger. 

Cara Membuat Halaman Kontak dan Contact Form di Blog

Halaman Kontak adalah halaman statis (static page) di blog untuk memudahkan pengunjung menghubungi admin blog.

Keberadaan contact form di halaman kontak itu lebih memudahkan lagi. Siapa pun yang akan mengontak Anda, tinggal mengisi formulir yang tersedia.
 
Lihat DEMO halaman kontak. 

Linknya bisa dipasang di navigasi menu, sejajar dengan tautan About, Sitemap, dan Disclaimer. Berikut ini tangkapan layar form kontak.

Cara Membuat Halaman Kontak dan Contact Form di Blog

Bagaimana cara membuat halaman kontak lengkap dengan form kontak? Ini dia.

Cara Membuat Halaman Kontak dan Contact Form di Blog

1. Klik Tema > icon panah di Customize > pilih Edit HTML
2. Copas kode CSS berkut ini di atas kode ]]></b:skin>

.sidebar #ContactForm1 {display:none}


3. Save! Simpan template!

4. Sekarang klik Layout > klik Add a Gadget di Sidebar > pilih Contact Form > klik tanda plus (+)

Cara Membuat Halaman Kontak dan Contact Form di Blog
Selesai!

5. Membuat Halaman Kontak

- Klik Pages (Halaman)
- Klik New Page (Buat Halaman)
- Isi judul halaman dengan Kontak
- Klik Mode HTML 
- Copas kode berikut ini:

<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

5. Klik Publish (Publikasikan)

Selesai.

Demikian Cara Membuat Halaman Kontak di Blogger. Nanti, jika ada yang mengisi form kontak itu otomatis terkirim ke email admin blog. 

Cara Lainnya, Lebih Mudah

1. Buat halaman baru dengan Judul "Kontak"
2. 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>

Klik  Publish! Publikasikan.

Setelah berhasil membuat halaman kontak, Anda bisa lanjut dengan membuat halaman sitemap atau daftar isi.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Membuat Halaman Kontak dan Contact Form di Blog

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *