Popup Contact Form Blogger With Javascript

Masih ingatkah pada postingan aku terdahulu perihal contact form blogger pada blog yang menyembunyikan js Blogger? Hal tersebut untuk mengatasi Blogger yang kesulitan memakai contact form Blogger alasannya yaitu js Blogger pada templatenya disembunyikan.

Dan hal tersebut juga mempermudah dalam pembuatan contact form Blogger alasannya yaitu dengan trik tersebut kita tidak perlu menciptakan widget contact form Blogger di sidebar terlebih dahulu sehingga menjadi lebih simple.

Dan sekarang aku akan share cara menciptakan contact form Blogger dengan efek popup. Dan ini dapat dipakai oleh blog yang menyembunyikan atau tidak menyembunyikan js Blogger.

Dan di sini kita akan memanfaatkan blog dummy yang dibentuk hanya untuk menyimpan contact form Blogger saja. Dan blog dummy tersebut akan kita tampilkan dalam iframe dan penulisan iframenya akan memakai javascript sehingga terhindar dari pengurangan nilai seo blog ibarat halnya menampilkan embed video Youtube dengan javascript yang lalu.

Untuk hanya menyimpan contact form saja, kita akan menciptakan blog dummy tersebut menjadi blank blog sehingga yang tampil hanya contact form saja dan penampakannya ibarat pada link berikut: Blank Blog: Contact Form Kompi Ajaib.

Dan penampakan popup contact form Blogger ini ibarat pada link berikut: JsFiddle, silahkan klik goresan pena Contact di pojok kiri atas.

Bagaimana, tertarik untuk mencobanya?

Langkah 1

Silahkan buat blog gres dulu pada dashboard Blogger Anda. Title dan URL blognya terserah Anda. Setelah simpulan silahkan ganti HTML template blognya dengan HTML template yang aku buat menjadi blank. Anda dapat mendownload isyarat HTML template blank yang aku buat DI SINI. Silahkan copy isyarat HTML templatenya dari notepad file download dan ganti semua isyarat HTML template yang Anda buat tadi dengan isyarat tersebut.

Langkah 2

Setelah langkah 1 selesai, silahkan buat postingan gres untuk menyimpan contact form Blogger dengan judul post terserah Anda. Silahkan gunakan isyarat di bawah ini. Paste kodenya di postingan mode HTML.

 <style scoped="scoped" type="text/css">
 .contact-form-box{width:260px;margin-right:15px;padding:0;}
 #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width:94%;height:auto;margin: 5px 5px 15px 0;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:94%;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:inline-block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;background-image:none;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 {background-color:#f4836a;position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
 #ContactForm1_contact-form-submit:focus{background-color:#f4836a;outline:none}
 #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:10px;text-align:left;background:none;border:none;box-shadow:none}
 img.contact-form-cross{background:none;border:none;box-shadow:none;}
 .contact-form-cross{vertical-align:middle!important}
 </style>
 
 <div class="contact-form-box">
 <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='clear:both'></div>
 <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 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'] = '8814356209253897607';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8814356209253897607','//contactkompiajaib.blogspot.com/','8814356209253897607');
 _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': '8814356209253897607', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
 //]]>
 </script>

Kode yang aku marking merah, silahkan ganti dengan URL blog contact form yang Anda buat tadi dan silahkan ganti ID blog dengan ID blog contact form Anda tersebut yang tertera di address kafe browser blognya. Untuk lebih jelasnya silahkan lihat DI SINI.

Langkah 3

Setelah langkah 2 simpulan di publish, silahkan buka edit HTML template blog Anda (blog yang akan memakai popup contact form) dan simpan isyarat CSS di bawah ini.

 .box-contact{width:300px;height:380px;overflow:hidden;position:fixed;margin:20px auto;border:15px solid #ddd;z-index:100000;background:#fff;display:none;top:50%;margin-top:-205px;left:50%;margin-left:-165px}
 .boxcontact-iframe{width:100%;height:860px;overflow:hidden;position:relative;margin:0 auto}
 .boxcontact-iframe iframe{position:absolute;top:-360px;left:-3px}
 .ct-overlay{background:rgba(0,0,0,.7);position:fixed;top:0;left:0;bottom:0;right:0;z-index:99999;display:none}

Kemudian silahkan simpan isyarat di bawah ini di atas isyarat </body>

 <script type='text/javascript'>
 //<![CDATA[
 function ct(e){document.write('<iframe src="http://contactkompiajaib.blogspot.com');document.write(e);document.write('" frameborder="no" allowfullscreen="allowfullscreen" scrolling="no"></iframe>')}
 //]]>
 </script>
 <div class='box-contact'>
 <div class='boxcontact-iframe'>
 <script type='text/javascript'>ct("/");</script>
 </div>
 </div>
 <div class='ct-overlay' onclick='$(&#39;.box-contact,.ct-overlay&#39;).toggle();'></div>

Silahkan ganti URL yang aku marking merah di atas dengan URL blog contact form yang Anda buat pada langkah 1 (persis ibarat contoh, tanpa tanda garis miring "/" di belakangnya).

Dan untuk menciptakan link atau tombol contact-nya silahkan gunakan isyarat berikut:

 <div onclick="$('.box-contact,.ct-overlay').toggle(400);">Contact</div>

Link contact tersebut dapat Anda simpan di menu, di footer, atau di mana saja. Sebagai pola dapat Anda coba contact Kompi Ajaib di sajian Kompi Ajaib (jika belum aku ganti lagi hehhehee....). Dan pastikan Anda sudah memasang jquery library (berapa pun versinya) di template blog untuk mengaktifkan toggle show hide.

Sumber https://www.kompiajaib.com/

Share this post