Contact Form Blogger Pada Blog Yang Menyembunyikan Js Blogger

Contact Form Blogger
Contact Form Blogger Pada Blog Yang Menyembunyikan Js Blogger - Berbeda dengan contact form yang disediakan oleh pihak ketiga yang memberikan batasan pengiriman pesan untuk layanan gratisnya, dengan menggunakan contact form dari Blogger kita tidak perlu khawatir dengan jumlah pesan yang bisa kita terima dari blog kita. 

Namun banyak blog yang terpaksa menggunakan contact form dari pihak ketiga karena ternyata contact form Bloggernya tidak berjalan atau tidak bisa mengirim pesan.

Hal ini juga yang saya alami pada blog Kompi Ajaib. Sudah beberapa tutorial untuk menggunakan contact form Blogger khususnya untuk disimpan di halaman statis selalu tidak bisa berjalan.

Hal ini terjadi karena saya menyembunyikan js widget Blogger untuk mempercepat loading blog. Untuk mengingatkan, trik mempercepat loading blog dengan menyembunyikan js Blogger bisa Anda simak DI SINI.

Untuk itu saya terus memutar otak untuk mencari cara bagaimana agar contact form Blogger bisa jalan pada blog yang menyembunyikan js widget Blogger.

Akhirnya...!!! Horee..!!! Hehehehe... contact form Blogger bisa dipasang dan digunakan di blog Kompi Ajaib yang menggunakan trik menyembunyikan js widget Blogger ini.

Logikanya, saya menyimpan secara manual js widget blogger dan javascript untuk contact form Blogger tersebut di dalam halaman statis tempat menyimpan contact form-nya. Dan dengan ini kita tidak perlu memasang widget contact form di sidebar atau footer dulu. 

Dengan langsung menyimpan kodenya, contact form Blogger bisa tampil di halaman statis dan tentunya bisa digunakan.

Nah bagi yang kebetulan memiliki masalah yang sama seperti Kompi Ajaib yaitu contact form Blogger tidak bisa tampil karena memasang kode &lt;!--</body>--&gt;&lt;/body&gt; di edit html untuk mengganti kode </body>, silahkan gunakan trik saya ini dengan meng-copy kode di bawah ini dan paste di halaman statis pada mode HTML.


<style scoped="scoped" type="text/css">
.contact-form-box{width:50%;margin:20px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;}
#ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>

<div class="contact-form-box">
<div style="text-align: justify;">
Silahkan isi form di bawah ini untuk menghubungi admin Kompi Ajaib. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
</div>
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<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>
</div>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2583045784323695327';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//www.kompiajaib.com/','2583045784323695327');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '2583045784323695327', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Hal yang perlu diperhatikan:

window['blogger_blog_id'] = '2583045784323695327' silahkan ganti kode blog id 2583045784323695327 yang saya kasih mark kuning tersebut dengan blog id Anda yang tertera di address bar browser halaman dashboard blog Anda.

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//www.kompiajaib.com/','2583045784323695327') silahkan ganti angka yang saya kasih mark kuning tersebut dengan blog id Anda. Dan www.kompiajaib.com silahkan ganti dengan domain blog Anda.

'blogId': '2583045784323695327' silahkan ganti angkanya dengan id blog Anda.

Selesai... Silahkan publish halaman contact form yang barusan Anda buat dan silahkan coba contact formnya. Dan form ini sudah saya buat responsive, tinggal rubah tampilannya bila ingin sesuai dengan selera Anda pada kode CSS-nya.


You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments