Popup Contact Form Blogger With Javascript

Ditulis oleh: Adhy Suryadi
Ditulis pada: 12/12/2014

Masih ingatkah pada postingan saya terdahulu tentang contact form blogger pada blog yang menyembunyikan js Blogger? Hal tersebut untuk mengatasi Blogger yang kesulitan menggunakan contact form Blogger karena js Blogger pada templatenya disembunyikan.

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

Dan kini saya akan share cara membuat contact form Blogger dengan efek popup. Dan ini bisa digunakan oleh blog yang menyembunyikan atau tidak menyembunyikan js Blogger.

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

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

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

Bagaimana, tertarik untuk mencobanya?

Langkah 1

Silahkan buat blog baru dulu pada dashboard Blogger Anda. Title dan URL blognya terserah Anda. Setelah selesai silahkan ganti HTML template blognya dengan HTML template yang saya buat menjadi blank. Anda bisa mendownload kode HTML template blank yang saya buat DI SINI. Silahkan copy kode HTML templatenya dari notepad file download dan ganti semua kode HTML template yang Anda buat tadi dengan kode tersebut.

Langkah 2

Setelah langkah 1 selesai, silahkan buat postingan baru untuk menyimpan contact form Blogger dengan judul post terserah Anda. Silahkan gunakan kode 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 saya 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 bar browser blognya. Untuk lebih jelasnya silahkan lihat DI SINI.

Langkah 3

Setelah langkah 2 selesai di publish, silahkan buka edit HTML template blog Anda (blog yang akan menggunakan popup contact form) dan simpan kode 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 kode di bawah ini di atas kode </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 saya marking merah di atas dengan URL blog contact form yang Anda buat pada langkah 1 (persis seperti contoh, tanpa tanda garis miring "/" di belakangnya).

Dan untuk membuat link atau tombol contact-nya silahkan gunakan kode berikut:


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

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

Popup Contact Form Blogger With Javascript

Ditulis oleh: Adhy Suryadi Ditulis pada: 12/12/2014

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 12/12/2014