Cara Membuat Halaman Kontak di Blog

Halaman kontak adalah halaman statis yang berisi formulir kontak. Dengan formulir ini, pembaca bisa dengan mudah menghubungi admin blog.

Nanti, pesan yang dikirimkan melalui halaman kontak ini akan diteruskan oleh Blogger ke email admin blog. Kita bisa menjawabnya di email.

Ini tampilan formulir kontak di halaman khusus yang kita buat nanti. Lihat DEMO.

Cara Membuat Halaman Kontak di Blog

Ini dia cara Cara Membuat Halaman Kontak di Blog

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

#ContactForm1 {display:none}

3. Simpan template!
4. Klik Layout > Add a Gadget

5. Tambahkan widget Contact Form

6. Pindahkan widget tadi ke sidebar paling bawah, atau di bawah Blog Post.

7. Klik Halaman > Halaman Baru

8. Isi judul halaman dengan Kontak
9. Klik mode HTML

10. Copas kode berikut ini dalam mode HTML, bukan Compose.

 <script>
var blogId = '806025991167628763';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
Nama
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" style="max-width: 400px; width: 100%;" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" style="max-width: 400px; width: 100%;" type="text" value="" />
Pesan
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="max-width: 400px; width: 100%;"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 400px; 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>

11. Ganti kode blogID yang warna merah dengan blogID Anda.(ada di address bar saat membuat halaman kontak).

12. Publikasikan!

Demikian Cara Membuat Halaman Kontak di Blog.*

• Facebook
• Twitter