Cara Membuat Halaman Kontak dan Contact Form di Blog

Baca Juga

Halaman kontak plus Contact Form memudahkan pengunjung menghubungi admin blog. Berikut ini cara membuat Halaman Kontak di Blog Blogger. 

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.

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 (+)

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.

Kode Halaman Kontak Blog Romeltea

Kode halaman kontak dengan tampilan seperti di halaman kontak blog ini:

<form id="kontak-form" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>  <input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />   <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><style scoped="" type="text/css">#comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-form{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0} .contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>