Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog

Daftar Isi [Tampil]

COPAD | Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog - Halo sobat COPAD, pada artikel kali ini mimin akan membahas mengenai pembuatan formulir kontak yang sederhana. Halaman formulir kontak memang cukup dibutuhkan oleh kita para blogger maupun oleh para pengunjung. Karena dengan formulir kontak ini, komunikasi antar blogger dan pengunjung dapat terhubung melalui email. 

Jadi, ketika seorang pengunjung menemukan atau mendapatkan masalah saat mengakses blog kita, si pengunjung bisa menghubungi kita secara langsung lewat halaman formulir kontak ini nantinya. Baiklah kalau begitu, berikut langkah-langkah pembuatannya.

1. Silahkan Log In ke blog agan terlebih dahulu, kemudian pilih menu Halaman / Pages lalu pilih Halaman Baru / New Page.

2. Masukkan judul halaman seperi Contact Us, Contact Me, Hubungi Kami, ataupun yang sejenisnya. Setelah itu, pilih lembar kerja HTML dan paste-kan kode berikut. Jangan lupa untuk mengganti kode berwarna merah dengan alamat blog kalian.

<script>
var blogId = 'ISI ALAMAT BLOG DI SINI';
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">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>

Perhatian!
Jika kalian ingin meng-Copy kode-kode HTML seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.

3. Matikan komentar pembaca dengan mengklik Pilihan / Setting yang bersimbol gerigi. Ini merupakan pilihan opsional (tidak harus).

4. Langsung publikasikan tanpa mengutak-atik hal lainnya lagi.

5. Selesai. Kalian bisa mengecek hasilnya dengan melihat blog kalian.

Catatan:
Jika kalian ingin menyampaikan pesan kepada pengunjung seperti screenshot di atas, silahkan tuliskan terlebih dulu pesannya pada lembar kerja Compose, baru setelah itu pilih lembar kerja HTML kemudian paste kode di atas di bagian paling bawah kode yang telah tertera.

Akhir Kata
Sekian untuk tutorial pada artikel Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.

Share this post

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.