Membuat Contact Form di Blogger

Sobat, setelah mempelajari bagaimana membuat blog, kesempatan kali ini kita akan membahas mengenai komponen blogger lainnya, yaitu Contact Form. Komponen ini tidak kalah penting, kaerna salah satu requirement dalam pembuatan blog/website. Sesuai dengan judulnya, halaman ini bisa berisi data pribadi seperti nama, alamat, email, phone dll. Dapat berupa tulisan, ataupun form. Yang akan dibahas ini adalah pembuatan form untuk mengirimkan email secara otomatis kepada owner ketika pengunjung mengisi form isian.

Bagaimana caranya membuat halaman kontak ini? Pembuatan Form ini adalah pemanfaatan dari widget blogger dan diimplementasikan kesuatu halaman dengan menggunakan script html.

Ikuti dengan cermat langkah-langkah berikut ini:

Konfigurasi dahulu, email mana yang akan menerima kiriman email dari kontak.
Pilih menu Setting > Email pada kolom Comment Notification Email, diisi email untuk menerima kontak.
Jika sudah, klik tombol save. Setelah itu buka menu Layout. Klik Add a Gadget pada sidebar, atau pada area manapun. Akan muncul Jendela baru, kemudian pilih More Gadget > Contact Form kemudian di klik tanda "+" untuk menambahkan ke blog sobat.


pastikan sudah muncul Gadget tersebut pada area yang sobat pilih.
Setelah itu, masuk ke menu Theme > Edit HTML. Kemudian copy code berikut:

#ContactForm1 {
 display:none;
}

dan pastekan pada akhir layout css theme sobat, atau sebelm akhir dari layout.

/*------Layout (end)----------*/
]]></b:template-skin>

jika dilihat maka hasilnya akan seperti ini.

#ContactForm1 {
 display:none;
}
/*------Layout (end)----------*/
]]></b:template-skin>

Lebih jelasnya, lihat pada gambar:
script diatas berfungsi untuk menyembunyikan Contact form pada gadget.
Kemudian, pastikan juga sobat sudah membuat halaman/page kontak, jika belum silahkan buat terlebih dahulu. Pilih menu Pages > New Page . Isi judul nya dengan Contact ataupun Kontak Kami.

Kemudian, klik tombol HTML kemudian copy script berikut:

<div dir="ltr" style="text-align: left;">
<div style="text-align: justify;">
Kritik dan saran yang bersifat membangun sangat berguna bagi kami agar 
situs ini lebih berkualitas dan berguna bagi masyarakat luas. Setiap 
masukan yang menurut kami bermanfaat akan dibalas dalam waktu cepat, 
tergantung jumlah saran yang masuk.<br />
<br /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Jika Anda ingin menghubungi kami silahkan isi form kontak dibawah ini.<br />
<br /></div>
</div>
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
Name<br />
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
 <br />
Email
 <span style="font-weight: bolder;">*</span>
 <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
 <br />
Message
 <span style="font-weight: bolder;">*</span>
 <br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
 <br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
 <br />
<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=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-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>
 <br />
<div class="clear">
</div>
</div>

copy script diatas, kemudian pastekan pada area penulisan (workspace) sobat.
Diatas itu sudah termasuk kalimat pembuka, silahkan di edit sesuai keinginan. Atau untuk merubah ukuran kolom, pada script terdapat tulisan size="xx" silahkan disesuaikan.



Pada gambar diatas, masih dalam kondisi HTML, untuk melihat hasilnya bisa di klik tombol Compose tepat disebelah kiri Html, kemudiansilahkan Publish atau Update (jika sudah dibuat sebelumnya). Dan hasilnya adalah:


Selamat, sobat sudah berhasil membuat Contact Form pada Blog sobat :)
Untuk ujicoba, silahkan isi form tersebut, dan cek email yang sudah di setting pada langkah awal pengisian email.

Terima kasih, semoga bermanfaat.

_rhiel_