Membuat Kontak Form Untuk Blog Yang Menyembunyikan JS Default Blogger

Ditulis oleh: Ifrod Maksum
Ditulis pada: 7/04/2017

Kontak merupakan salah satu sarana yang harus disediakan oleh pemilik website atau blog supaya pengunjung lebih mudah menghubungi admin jika ada yang kurang dimengerti terkait dengan isi blog tersebut. Secara default kontak blogger bisa langsung ditambahkan melalui page layout atau tata letak, baik di sidebar atau footer, dan saat ini sudah banyak yang memindahkan kontak tersebut ke halaman static. Namun untuk blog yang menyembunyikan javascript default blogger, memindahkan default contact blogger ke halaman static tidak akan berfungsi, solusinya kita harus menyimpan JS tersebut secara manual kedalam HTML. Supaya JS tersebut tidak mempengaruhi loading seluruh halaman blog, maka kita harus menambahkan tag kondisional khusus halaman kontak tersebut.

Bagaimana anda tertarik? coba simak pesan-pesan berikut ini tentang membuat kontak form untuk blog yang menyembunyikan js default blogger:

Demo

Silahkan simpan kode css dibawah ini diatas </head>

<b:if cond='data:blog.url == &quot;URL-HALAMAN-STATIC&quot;'>

<style type='text/css'>

/*<![CDATA[*/

.contact-box{margin:10px 0 0 50px}

.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}

.contact-box svg path{fill:#444}

.contact-me{display:block}

.contact-me a{color:#333;text-decoration:none}

.contact-me a:hover{color:#eb4938}

.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}

.contact-form-box{width:100%;margin:20px auto;padding:0}

#contactForm .floating-label-form-group{font-size:14px;position:relative;margin-bottom:0;padding-bottom:20px;border-bottom:1px solid #ddd}

#contactForm .floating-label-form-group.floating-label-form-group-with-focus{position:relative}

#contactForm .floating-label-form-group:after,#contactForm .floating-label-form-group:before{position:absolute;bottom:-1px;width:0;height:2px;background-color:#e8554e;content:"";transition:width .4s ease-in-out;display:block}

#contactForm .floating-label-form-group:before{right:50%}

#contactForm .floating-label-form-group:after{left:50%}

#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before{width:50%}

#contactForm .floating-label-form-group input,#contactForm .floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:16px;font-family:Roboto,Arial,sans-serif;font-weight:300;background:0 0;box-shadow:none!important;resize:none}

#contactForm .floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:12px;font-family:Roboto,Arial,sans-serif;font-weight:300;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}

#contactForm .floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #eee}

#contactForm .floating-label-form-group-with-value label{top:0;opacity:1}

#contactForm .floating-label-form-group-with-focus label{color:#e8554e}

#contactForm{border-top:1px solid #ddd}

#contactForm textarea.form-control{height:auto}

#contactForm .form-control{display:block;width:100%;color:#555}

#contactForm input:active,#contactForm input:focus,#contactForm textarea:active,#contactForm textarea:focus{outline:0}

#contactForm .btn,#contactForm .contact-form-button-submit{font-family:Roboto,Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fff;border:1px solid #ccc;cursor:pointer;margin:20px 0 0;background-image:none}

#contactForm .contact-form-button{height:51px;line-height:51px}

#contactForm .btn-default:focus,#contactForm .btn-default:hover,#contactForm .contact-form-button-submit:focus,#contactForm .contact-form-button-submit:hover{background-color:#e8554e;border:1px solid #be403a;color:#fff}

.contact-form-error-message-with-border,.contact-form-success-message-with-border{background:#fff;border:1px solid #ddd;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#666;font-size:16px;font-weight:400;line-height:30px;opacity:1;position:static;text-align:center;margin:20px 0 0}

.contact-form-cross{height:11px;margin:0 5px;vertical-align:0!important;width:11px;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;-goog-ms-box-shadow:none!important;box-shadow:none!important}

.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}

.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.message{width:100%;max-width:100%;text-align:left}

#contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#e8554e;position:absolute;left:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}

#contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#e8554e;position:absolute;right:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}

#contactForm input ~ span{bottom:0}

#contactForm input:focus,#contactForm textarea:focus{outline:0}

#contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%}

@media screen and (max-width:768px) {

.contact_message{width:90%!important;margin-left:-45%!important}

.contact-form-box{width:100%}

.contact-box{margin:10px 0 0}

}

/*]]>*/

</style>

</b:if>

kemudian simpan kode javascript ini diatas </body>

<b:if cond='data:blog.url == &quot;URL-HALAMAN-STATIC&quot;'>

<script src='https://www.blogger.com/static/v1/widgets/2859494812-widgets.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3025760016463066759';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3025760016463066759','//www.nomifrod.com/','3025760016463066759');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "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": "3025760016463066759", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));

//]]>

</script>

</b:if>

selanjutnya simpan kode berikut ini di halaman static mode html (bukan compose)

<div class="contact-box">

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg><span>emailanda@gmail.com</span>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z" /></svg><a href="https://plus.google.com/+username" target="_blank" title="Google Plus">Google Plus</a>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" /></svg><a href="https://www.facebook.com/username" target="_blank" title="Facebook">Facebook</a>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" />
</svg><a href="https://twitter.com/username" target="_blank" title="Twitter">Twitter</a>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg><a href="https://www.instagram.com/username" target="_blank" title="Instagram">Instagram</a>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />

</svg><span>nomor-whatsapp</span>

</div>

<div class="contact-me">

<svg viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /></svg><a href="URL-GOOGLE-MAPS" target="_blank" title="Map of bloganda">Alamat-anda</a>

</div>

</div>

<br />

<div class="contact-form-box">

<div>

Atau bisa menggunakan form di bawah ini.

</div>

<br/>

<form name="contact-form" id="contactForm">

<div class="floating-label-form-group">

<label>Name</label>

<input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" />

<span class="span1"></span><span class="span2"></span>

</div>

<div class="floating-label-form-group">

<label>Email Address</label>

<input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" />

<span class="span1"></span><span class="span2"></span>

</div>

<div class="floating-label-form-group">

<label>Message</label>

<textarea rows="5" class="form-control" name="email-message" placeholder="Message"
 id="ContactForm1_contact-form-email-message"></textarea>

<span class="span1"></span><span class="span2"></span>

</div>

<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="Kirim" />

<div class="clear"></div>

<div class="message">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

atau bisa juga semua kode diatas disimpan langsung di halaman static, tapi menurut beberapa blogger sebaiknya disimpan di html supaya loading lebih cepat. Sama halnya dengan template amp yang semuanya ngumpul di html dalam satu style.

Oke sudah ya selamat mencoba dan semoga bermanfaat...