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.

Screenshots Widget Contact Form

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
Enter your email address to get update from Fathoni16.
Print PDF

28 komentar Tambahkan komentar

Keren gan, tapi kebanyakan orang males ngisi formnya.

Balas

manteb , berguna sekali buat newbie seperti saya, thanks gan

Balas

oke gan...sama-sama

Balas

saya kira nggak gan. itu contact form yang standard. kalo yg gak standard pasti ada tambahan form website dan ada chaptcha ya gan...

Balas

silahkan dicoba mas..... :)

Balas

Makasih Gan Info Nya :D

Balas

sama-sama sob....semoga bermanfa'at :D

Balas

wah keren nih hasilnya, bisa saya coba kalau begitu mas.

Balas

silahkan dicoba ustadz...hanya sederhana kok.
semoga bermanfaat :)

Balas

sepertinya perlu dicoba nih :) makasih mas fathoni

Balas

silahkan dicoba =D heheh... sama-sama sob....

Balas

keren gan contact formnya, simpel dan pastinya ringan :)

Balas

iya mba' simple dan ringan. tapi, hanya sederhana modelnya.. :)

Balas

tutornya sih saya suka, tap setelah di teapn ke blog pada malas buat ngisi form nya :D

Balas

pos nya sangat berguna mas, ijin untuk mencoba nya, sekalian silahturahmi salam kenal

Balas

hehehe,,, :D iya juga sih. orang memang pada malas jika dihadapkan dgn yg namanya form. Tapi, ini hanya sebagai alternative aja...

Balas

ya mas, silahkan dicoba..
=D salam kenal juga mas..

Balas

yang penting ringan :) heheee

Balas

kunjungan rutin gan :) heuheu

Balas

hehehe :D iya sob, silahkan....

Balas

widget contak form ini sangat dibutuhkan bagi blog saya yang dagang ubi, agar memudahkan bagi konsumen ya kang.
mantap euy.

Balas

wkwkwk.. :) .itu juga bisa Kang.... agar konsumen bisa CP ke pedagang nya.

Balas

Wah ini nih lumayan buat pelaporan atau dukungan blog saya :) makasih gan

Balas

Contact Form ini sangat penting untuk memudahkan pengunjung menghubungi Admin. Untuk contact form Saya sendiri menggunakan Google Docs :D

Balas

sama-sama gan. agar pengunjung bisa menghubungi adminya gan

Balas

iya kang. ini memang yang dibutuhkan dalam blog. :D
kapan-kapan saya coba deh kang dari Google Docs

Balas

Dilarang menyertakan link aktif, iklan, ataupun titip link dalam berkomentar di Blog Fathoni16. Silahkan berkomentar tanpa ada kata-kata kotor.

Konversi KodeEmoticon