Contact Form Blogger Pada Blog Yang Menyembunyikan Js Blogger

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

Namun banyak blog yang terpaksa memakai contact form dari pihak ketiga alasannya yakni ternyata contact form Bloggernya tidak berjalan atau tidak dapat mengirim pesan.

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

Hal ini terjadi alasannya yakni aku menyembunyikan js widget Blogger untuk mempercepat loading blog. Untuk mengingatkan, trik mempercepat loading blog dengan menyembunyikan js Blogger dapat Anda simak DI SINI.

Untuk itu aku terus memutar otak untuk mencari cara bagaimana semoga contact form Blogger dapat jalan pada blog yang menyembunyikan js widget Blogger.

Akhirnya...!!! Horee..!!! Hehehehe... contact form Blogger dapat dipasang dan dipakai di blog Kompi Ajaib yang memakai trik menyembunyikan js widget Blogger ini.

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

Dengan pribadi menyimpan kodenya, contact form Blogger dapat tampil di halaman statis dan tentunya dapat digunakan.

Nah bagi yang kebetulan mempunyai duduk kasus yang sama menyerupai Kompi Ajaib yaitu contact form Blogger tidak dapat tampil alasannya yakni memasang kode &lt;!--</body>--&gt;&lt;/body&gt; di edit html untuk mengganti arahan </body>, silahkan gunakan trik aku ini dengan meng-copy arahan 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 pribadi 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 arahan blog id 2583045784323695327 yang aku kasih mark kuning tersebut dengan blog id Anda yang tertera di address kafetaria browser halaman dashboard blog Anda.

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//www.kompiajaib.com/','2583045784323695327') silahkan ganti angka yang aku 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 aku buat responsive, tinggal rubah tampilannya jikalau ingin sesuai dengan selera Anda pada arahan CSS-nya.

DEMO

Sumber https://www.kompiajaib.com/

Share this post