ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Cara Membuat Formulir Contact Us di Halaman Blogspot

Cara Membuat Formulir Contact Us di Halaman Blogspot. Form kontak merupakan hal yang cukup penting bagi pemilik blog. Terutama apabila blog yang memiliki banyak pengunjung, maka form kontak wajib ada. Untuk menunjang keberadaan suatu blog diperlukan komunikasi antara pemilik dengan pengunjung blog. Selain untuk kepentingan diatas, Form kontak juga memegang peranan penting dalam proses peninjauan blog yang didaftarkan untuk keperluan periklanan semisal Google AdSense.  Walaupun telah disedian form komentar di setiap artikel/halaman blog, namun mungkin saja ada beberapa para pengunjung yang ingin bertanya lebih suka menggunakan Form Contact Us.

contact us
Tampilan Contact Us
Saat ini, blogger sudah menyediakan widget yang berisi form contact. Sayangnya widget ini hanya bisa ditempelkan pada layout yang ada. Jadi kita tidak bisa menampilkan widget ini pada halaman khusus blog, semisal dihalaman yang anda inginkan sebagai contoh pada halaman contact us blog kita. Tampilan widget yang berisi form contact us adalah seperti ini:
Tampilan widget yang berisi form contact us
Membuat Widget Form Contact Us
Untuk langkah awal,  masuk ke dasbord lanjutkan ke menu "Tata Letak" dan tambahkan widget Formulir Kontak dan taruh dibawah block "Posting Blog". Lalu taruh disembarang tempat. Lihat seperti gambar dibawah ini.

Membuat Widget Form Contact Us
Membuat Widget Form Contact Us

Akhiri "Simpan setelan"

Membuat Halaman Kontak di Blogger
Terakhir adalah membuat halaman Contact Us, Contact Me atau Kontak Kami, terserah anda yang mana yang diinginkan.
Masih didalam dasbor pilih tab Laman > Buat laman baru, lalu beri nama judul halamannya.

Lalu klik tombol "HTML" dan pastekan semua kode dibawah ini:

<div class="hanyalah-contact-form">
<div class="form">
<!-- Custom Contact Form By hanyalah start -->
<div class="hanyalah-contact-title" style="font-family: &quot;dancing script&quot;; font-size: 25px;">
Contact Form</div>
<form name="contact-form">
<!-- Name Field -->
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="50" type="text" value="Name" />
<!-- Email ID Field -->
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="50" type="text" value="Email ID" />
<!-- Message Field -->
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
<!-- Send Button -->
<input class="contact-form-button contact-form-button-submit hanyalah-button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<!-- Clear Button -->
<input class="contact-form-button contact-form-button-submit hanyalah-button-color" type="reset" value="Clear" />
<!-- Validation -->
<div style="max-width: 222px; 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>
<!-- End Custom Contact Form By hanyalah -->
</div>
</div>








Lalu klik tombol "Publikasikan".

Terakhir, silahkan lihat hasilnya nanti seperti ini:


Tampilan halaman contact us

menghubungkan link contact us ke navigasi ujung atas seperti gambar pertama diatas, silakan  masuk menu "Template" > "Edit HTML" 

Tekan Ctrl dan F bersamaan kemudian ketikkan contact us lalu masukkan link halaman Contact Us yang sudah kita buat tadi.

Tampilan edit HTML

Setelah selesai klik "Simpan" kemudian refresh dashboard

Demikian Cara Membuat Formulir Contact Us di Halaman Blogspot semoga bermanfaat
Share This :

0 komentar

 Recent