Cara Membuat Menu Contact atau Contact Form Blog

Cara Mudah Membuat Form Contact Pada Blogspot

Formulir Kontak / Contact Form pada sebuah blog biasanya disediakan oleh para pembuat blog dengan tujuan agar para pengunjung blog dapat lebih mudah jika ingin berkomunikasi dengan sipembuat blog sendiri. Sebenarnya pada setiap blog telah terdapat fasilitas kolom komentar yang biasanya terletak dibagian bawah artikel yang bisa digunakan oleh para pengunjung jika ingin bertanya atau sekedar mengomentari materi dari artikel yang telah dibagikan oleh pembuat blog, tetapi terkadang ada dari para pengunjung blog yang ingin berkonsultasi langsung dengan sipembuat blog dan tidak ingin pesan pertannyaannya diketahui oleh para pengunjung lainnya. Oleh sebab itu form contact ini dibuat agar para pengunjung yang ingin bertanya langsung dengan sipembuat blog, dapat menggunakan fasilitas contact form yang ada.

Pada blogspot sendiri telah disediakan fasilitas contact form yang dapat ditambahkan oleh para blogger dengan memanfaatkan fasilitas widget atau pilihan Tambahkan Gadget yang ada pada Menu Tata Letak. Berikut ini langkah-langkah untuk menambahkan contact form pada blogspot yang teman-teman kelola dari fasilitas Tambahkan Gadget yang ada :

1. Log In pada www.blogger.com dengan menggunakan email dan password blog yang ingin dikelola.
2. Selanjutnya pilih Menu Tata Letak / Menu Layout yang ada pada blog yang ingin dikelola.
3. Pada tampilan Menu Tata Letak, pilih fasilitas + Tambahkan Gadget / + Add Gadgets.
4. Maka otomatis Jendela Baru Browser akan menampilkan pengaturan Gadget yang dibuka, selanjutnya pilih pilihan Gadget Lainnya.
5. Pada Menu Gadget Lainnya yang tampil, cari dan pilih tambahkan + Formulir Kontak.
6. Silahkah atur Judul dari Formulir Kontak yang ingin ditambahkan, jika sudah selesai pilih Simpan.

Sampai tahap ini gadget Formulir Kontak pada blog teman-teman sudah jadi. Jika teman-teman merasa posisi dari gadget Formulir Kontak yang dibuat kurang pas, teman-teman dapat mengatur posisi gadget Formulir Kontak yang dibuat dengan melakukan langkah Klik dan Seret untuk menata ulang posisi gadget yang ada.

Jika teman-teman blogger ingin menyediakan atau membuat contact form pada Menu khusus diblog, teman-teman tidak perlu khawatir karena pada kesempatan kali ini akan saya bagikan juga tips untuk membuat Menu Contact Form pada blog.

Cara Membuat Menu Contact Pada Blogspot 
Setelah sebelumnya kita bahas tentang cara menambahkan gadget Formulir Kontak pada blogspot, selanjutnya kita bahas cara menyajikan Formulir Kontak pada menu khusus atau Menu Contact di blog. Langkah pertama silahkan teman-teman ikuti langkah-langkah menambahkan Gadget Formulir Kontak yang telah dijelaskan diatas, setelah gadget fomulir kontak telah berhasil ditambahkan pada blog teman-teman sekarang saatnya kita masuk kelangkah berikutnya untuk memindahkan Gadget Formulir Kontak tersebut ke Menu Contact yang ada di blog.

Silahkan teman-teman siapkan terlebih dahulu Halaman Contact Us yang akan dibuat dengan memilih pilihan Buat Entri Baru sama seperti saat teman-teman ingin membuat postingan / artikel baru pada blog yang digunakan. Pada laman Entri Baru yang terbuka silahkan teman-teman isikan kotak Judul Pos sesuai dengan bahasa yang digunakan pada blog bisa dengan Contact Us dalam bahasa inggris atau Hubungi Kami dalam bahasa indonesia. Masih pada halaman Entri Baru yang dibuka, karena nanti kita akan mengisinya dengan kode html yang akan diambil dari Gadget Formulir Kontak jadi silahkan pilih atau masuk ke Tab HTML yang berada disebelah Tab Compose.  Parkirkan / tinggalkan sebentar halaman Entri Baru yang telah dibuat dan jangan menutupnya terlebih dahulu karena tahapannya belum selesai. 

Buka atau kunjungi halaman utama blog yang dikelola, bisa dengan memilih pilihan Lihat blog pada tab baru browser yang kita gunakan. Caranya Klik Kanan pada pilihan Lihat blog >> Pilih Buka tautan di tab baru, atau bisa juga dengan membuka tab baru terlebih dahulu pada browser kemudian ketikkan alamat blog yang digunakan. Pada tampilan halaman utama blog yang terbuka, Pilih dan Klik Kanan gadget contact form yang telah ditambahkan sebelumnya >> Pilih pilihan Inspeksi Elemen, untuk melihat susunan kode HTML gadget contact form yang dipilih >> Pada kotak Inspeksi Elemen yang tampil, cari dan Klik Kanan pada susunan kode berikut ini tanpa tanda petik : " <div class="widget ContactForm" id="ContactForm1">...</div> " , selanjutnya pilih Edit as HTML, untuk melihat barisan kode HTML nya >>  Block dan Copy barisan kode HTML gadget Contact Form yang tampil >> Kemudian kembali ke halaman Entri Baru yang kita parkirkan sebelumnya, Paste atau tempelkan kode HTML gadget contact form yang telah dikopi pada tab HTML yang ada di halaman entri baru >> Klik Tab Compose yang ada disebelah Tab HTML halaman entri baru, untuk melihat hasil tampilan contact form yang telah ditempelkan tadi >> Jika tampilan contact form telah selesai dipercantik atau dirasa sudah cukup bagus, silahkan pilih pilihan Simpan dan kemudian pilih Publikasikan.

Note : Jika Menu Contact Us pada blog teman-teman baru ingin dibuat saat umur blog sudah cukup lama dan sudah memiliki puluhan artikel postingan, sebaiknya teman-teman melakukan sedikit pengaturan berikut ini pada halaman Contact Us yang ada pada postingan blog agar tidak tergabung dengan artikel lainnya saat pengunjung melihat artikel yang ada dihalaman utama. Pilih Edit pada Halaman Contact Us yang telah dibuat >> Pilih Menu Jadwal yang ada disebelah kanan posting >> Pilih Setel tanggal dan waktu, atur tanggal dan waktu saat blog pertama kali dibuat agar Halaman posting Contact Us ini masuk pada urutan artikel pertama blog dan dapat tersembunyi saat halaman utama blog dikunjungi >> Jika sudah diatur klik Pilihan Selesai. Teman-teman juga dapat menonaktifkan fitur komentar pada halaman Contact Us ini dengan memilih Menu Pilihan yang ada disebelah kanan Posting >> Pada Pilihan Komentar pembaca pilih Jangan bolehkan, sembunyikan yang ada >> Pilih Selesai >> Pilih Perbarui.


Jika teman-teman kesulitan dalam mencari ataupun mengambil kode HTML dari gadget contact form yang sebelumnya telah teman-teman tambahkan pada blog, teman-teman bisa mengkopi kode HTML yang akan saya bagikan dibawah ini. Lalu menggunakannya pada halaman contact us yang akan dibuat, dengan catatan pada kode HTML yang ada dibawah, teman-teman harus mengisikan atau mengganti kata-kata berikut ini "isi dengan angka blogID yang dikelola" dengan blogID yang teman-teman gunakan masing-masing. blogID yang teman-teman gunakan pada blog, dapat terlihat diatas address bar browser saat teman-teman sedang mengelola blog. Bisa dengan cara Login ke www.blogger.com >> Buka blog yang akan dikelola >> Lihat angka blogID pada Address bar browser.

Alternatif Kode HTML Untuk Halaman Contact Us Jika Kesulitan Menggambil Kode HTML Gadget / Widget Contact Form Yang Telah Ditambahkan Pada Blog :

<div class="widget ContactForm" id="ContactForm1">
<h2 class="title">
<span style="font-size: x-large;">Formulir Kontak</span></h2>
<h2 class="title">
<span style="font-size: small;"><span style="color: red;">Input dengan tanda (</span></span><span style="font-size: small;"><span style="color: red;"><span style="font-weight: bolder;">*</span>) harus diisi</span></span></h2>
<h2 class="title">
<span style="font-size: small;"><span style="color: black;"><u><span style="color: black;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u>&nbsp;</span></span> </h2>


<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Nama <span style="color: red; font-weight: bolder;">*</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="35" type="text" value="" />

Email <span style="color: red; font-weight: bolder;">*</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="35" type="text" value="" />

Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea class="contact-form-email-message" cols="50" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="https://www.blogger.com/rearrange?blogID=Isi Dengan Angka blogID Yang Dikelola&amp;widgetType=ContactForm1&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=footer-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;ContactForm1&quot;));" target="configContactForm1" title="Edit"> <img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span>
<div class="clear">
</div>
</div>

 
Sampai ditahap ini halaman Contact Form yang kita bahas telah jadi tetapi gadget contact form yang telah ditambahkan masih ada sehingga dirasa sedikit menggangu bukan ?
Mari kita sembunyikan tampilan gadget contact form tetapi tidak dengan cara menghapus gadgetnya karena jika gadget form contact dihapus maka halaman Contact Form yang kita copy sebelumnya tidak akan berfungsi lagi. Ikuti langkah dibawah ini untuk menyembunyikan gadget contact form yang telah ditambahkan sebelumnya :

1. Buka pengaturan Template yang ada pada blog dan pilih Edit HTML
2. Pada Tampilan Edit HTML yang terbuka, gunakan fasilitas Lompat ke widget dan pilih ContactForm1
3. Cari barisan kode HTML ContactForm1 berikut ini dan uraikan kode HTML nya agar lebih mudah menyeleksi kode yang akan dihilangkan dengan klik pilihan ... yang terdapat pada barisan kode HTML : <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>...</b:widget>
4. Amati baik-baik uraian kode HTML ContactForm1 yang dibuka, hapus beberapa kode HTML yang ada pada ContactForm1 sesuai dengan petunjuk yang ada pada kotak Script dibawah ini :
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>     <b:includable id='main'> Hapus kode HTML yang ada dibagian ini saja </b:includable>   </b:widget> </b:section>
5. Setelah bagian kode HTML ContactForm1 diseleksi dengan menghapus bagian kode yang tidak terpakai, selanjutnya pilih Simpan template.

Silahkan teman-teman uji coba kembali dengan mengunjungi halaman utama blog yang dibuat, bagaimana ?
Berhasil bukan, widget contact form yang sebelumnya telah ditambahkan telah berhasil disebunyikan dan fasilitas Contact Form yang ada pada halaman Contact Us tetap berfungsi dengan baik. 

Sekian artikel tentang "Cara Mudah Membuat Form Contact Pada Blogspot" yang dapat saya bagikan kepada teman-teman, semoga berguna dan dapat menambah pengetahuan blogging teman-teman. Jika ada pertanyaan seputar materi pada artikel kali ini, silahkan teman-teman bertanya melalui Menu Contact yang telah disediakan atau dapat juga dengan menggunakan kolom komentar yang telah disediakan dibawah.

Tweet