Memasang Widget Contact Form di Halaman Statis

Memasang Widget Contact Form di Halaman Statis - Setelah sudah lama tidak nge-blog, akhirnya saya ngeblog lagi dengan pikiran yang sedang buntu untuk buat postingan apa. Tidak ada tema bagus yang masuk ke dalam pikiran saya. Akhirnya, saya share aja apa adanya kali ini. Di lihat dari judulnya, anda pasti sudah tau bukan yang akan saya share kali ini. Ya, memasang contact form di halaman statis blogger. Cara ini saya dapatkan dari +Kang Ismet. Selain tampilannya elegant, contact form ini juga simple dan ringan.

Sebenarnya setelah saya googling, memang banyak yang sudah posting cara memasang widget contact form di halaman statis. Tapi, nggak tau kenapa hati saya lebih terpanggil untuk mengunjungi Blog Kang Ismet. Dan tidak ada salahnya juga kalo saya mencoba share artikel ini.

Sebelumnya, Formulir Kontak merupakan hal yang baru yang merupakan fasilitas baru juga yang disediakan oleh Blogger. Kalo saya lihat, Blogger dari tahun ke tahun semakin meningkatkan dan memperbaiki fasilitasnya.

Oke, langsung saja, bagi anda ingin memasangnya, silahkan ikuti langkah berikut.

Cara Pemasangan

1.  Masuk ke Tata Letak. Pilih Add Gadget, terserah yang sebelah mana. Lalu pilih Gadget Lainnya dan klik Formulir Kontak.

2.  Nah, sampai di sini widget contact form sudah terpasang di blog anda. Tapi, sesuai judulnya, kalo widget ini akan disimpan di halaman statis. 

Menyimpan Widget Contact Form di Halaman Statis

1.  Yang pertama, silahkan sembunyikan widget contact form yang terpasang di tata letak tadi, agar tidak terjadi double contact form. Masukkan kode CSS berikut di Edit HTML untuk menyembunyikannya.

#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 300px;height:auto;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;}
#ContactForm1_contact-form-email-message{width: 450px;height: 175px;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;}
#ContactForm1_contact-form-submit {width: 101px;height: 35px;float: left;color: #FFF;padding: 0;margin: 10px 0 3px 0;cursor: pointer;background: #5E768D;border: 1px solid #556f8c;border-radius:3px;}
#ContactForm1_contact-form-submit:hover {background:#435c74;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 450px;margin-top:35px;}

Kode CSS di atas juga sebagai modifikasi untuk widget yang akan disimpan di halaman statis. Jadi, tampilannya akan sedikit berbeda dari contact form blogger di tata letak tadi.

2.  Masukkan kode pemanggil HTML-nya di postingan statis.

<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Jangan lupa juga untuk mengatur sistem baris barunya dengan "Tekan Enter  untuk baris baru". Caranya, silahkan klik Pilihan pada menu sebelah samping kanan postingan. Dan jika anda ingin halaman statis nya full page, silahkan sembunyikan sidebar dan element-element lainnya dengan tag kondisional. Misalnya, tag kondisional nya seperti ini.

<b:if cond='data:blog.url == &quot;URL HALAMAN STATIS CONTACT FORM&quot;'>
<style type='text/css'>
.sidebar-wrapper,.breadcrumbs,.post-footer,#comments {display:none}
.main-wrapper{width:100%}
</style>
</b:if>

Sesuaikan id dan class-nya untuk setiap elemen-element yang ingin disembunyikan. Karena id dan class pada setiap template umumnya berbeda-beda. Jika sudah, letakkan tag kondisional-nya di atas </body>

Silahkan ubah URL HALAMAN STATIS CONTACT FORM dengan URL halaman statis yang telah anda buat.

Dan bagi anda yang menggunakan trik menyembunyikan javascript widget blogger dari Kompi Ajaib, widget contact form ini tidak akan berfungsi. Solusinya, ubah kode &lt;!--</body>--&gt;&lt;/body&gt;  pada Edit HTML dengan kode </body>, agar bisa berfungsi kembali. 

Selesai....

Referensi : http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html