Ditulis oleh: Ditulis pada: 11/21/2016
Setelah kemarin kita berhasil memodifikasi Google Form untuk contact form blog, kini kita akan memanfaatkan Google Form ini untuk contact form blog AMP HTML. Tentu saja pemasangan contact form ini pada blog AMP HTML sedikit berbeda dan agak ribet, jadi silahkan baca postingan ini pelan-pelan agar bisa dimngerti.Berbeda dengan blog biasa yang bisa dipasangkan secara langsung, pemasangan Google Form pada blog AMP ini harus menggunakan amp-iframe dan ditempatkan pada posisi 75% dari tepi atas blog agar form-nya bisa tampil.
Untuk itu, di atas amp-iframe, saya menambahkan kontak-kontak lainnya seperti email, whatsapp, telegram, bbm, dan lainnya untuk mendorong amp-iframe lebih ke bawah agar form-nya bisa tampil.
Jika Anda ingin mencobanya pada blog AMP Anda, silahkan ikuti llangkahnya di bawah ini.
Langkah Pertama
Silahkan hosting kode di bawah ini di Github, silahkan simpan dengan ekstensi *.html misalnya contact.html.
<style>
body{margin:0;padding:0}
#ss-form input:focus ~ label,
#ss-form textarea:focus ~ label,
#ss-form input:valid ~ label,
#ss-form textarea:valid ~ label {
font-size: 0.75em;
color: #e8554e;
top: -2.25rem;
-webkit-transition: all 0.125s ease;
transition: all 0.125s ease;
}
#ss-form .styled-input {
width: 33.3333%;
margin: 2rem 0 1rem;
padding: 0;
position: relative;
}
#ss-form .styled-input-in {
position: relative;
}
#ss-form .styled-input label {
color: #999;
padding: 1rem;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
pointer-events: none;
line-height: 1;
font-family: "Helvetica", "Arial", sans-serif;
}
#ss-form .styled-input.wide {
width: 100%;
}
#ss-form input,
#ss-form textarea {
padding: 1rem 1rem;
border: 1px solid #ddd;
width: 100%;
font-size: 1rem;
background: #fafafa;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica", "Arial", sans-serif;
}
#ss-form input ~ .span1,
#ss-form textarea ~ .span1 {
display: block;
width: 0;
height: 3px;
background: #e8554e;
position: absolute;
left: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#ss-form input ~ .span2,
#ss-form textarea ~ .span2 {
display: block;
width: 0;
height: 3px;
background: #e8554e;
position: absolute;
right: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#ss-form input ~ span {
bottom: 0;
}
#ss-form input:focus,
#ss-form textarea:focus {
outline: 0;
}
#ss-form input:focus ~ .span1,
#ss-form textarea:focus ~ .span1,
#ss-form input:focus ~ .span2,
#ss-form textarea:focus ~ .span2 {
width: 50%;
}
#ss-form textarea {
width: 100%;
min-height: 15em;
}
#ss-form .btn {
font-family: "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fafafa;
border: 1px solid #ddd;
cursor: pointer;
margin: 10px 0 0;
background-image: none;
}
#ss-form .btn-default:hover,
#ss-form .btn-default:focus {
background-color: #e8554e;
border: 1px solid #df4f49;
color: white;
outline: 0;
}
#fade {
opacity: 0;
display: none;
}
.thanks_layout{text-align: center; position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,.8);z-index:99999}
.thanks_message{font-family: "Helvetica", "Arial", sans-serif;width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid #DEDEDE;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;}
.thanks_message .close a{position:absolute; top:-15px; right: -15px; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; border:1px solid #ccc; border-radius:100%;color:#333;font-family: "Helvetica", "Arial", sans-serif;font-size:18px;text-decoration:none}
@media screen and (max-width:768px){.thanks_message{width:90%!important;margin-left:-45%!important;}
}
@media screen and (max-width:414px){#ss-form .styled-input {
width: 100%;
}
}
</style>
<script type="text/javascript">
var submitted=false;
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.elem.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
function myFunction() {
location.reload();
}
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){);}" style="display: none;"></iframe>
<form action="https://docs.google.com/forms/d/1aHcEFAqx-IpAPnWhCknh_9MHdEj1CkbTaofxxxxxxxx/formResponse" id="ss-form" method="POST" onsubmit="fadeEffect.init('fade', 1);document.getElementById('fade').style.display = 'block'" target="hidden_iframe">
<div class="styled-input">
<div class="styled-input-in">
<input type="text" aria-label="Name" name="entry.2005620554" value="" id="entry.2005620554" dir="auto" title="" required="required">
<label>Name</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input type="email" aria-label="Email" name="entry.1045781291" value="" id="entry.1045781291" dir="auto" title="Must be a valid email address" required="required">
<label>Email</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea aria-label="Comments" name="entry.839337160" rows="8" cols="0" id="entry.839337160" dir="auto" aria-required="true" required="required"></textarea>
<label>Message</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<input name="draftResponse" type="hidden" value="[,,"666676987482120412"]">
<input name="pageHistory" type="hidden" value="0">
<input name="fbzx" type="hidden" value="666676987482120412">
<button type="submit" name="submit" class="btn btn-default">Send</button>
</div>
</form>
<div id="fade">
<div class="thanks_layout">
<div class="thanks_message">
<img alt="Thumb" height="48" width="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNBYqgIgY_nQgcFPM4OdNtS5sm9JqRVwGmaQzB8cZp_GBCf2I_hDRx48urii_js60t1nkp2g5VvPOnu11HzX4snxiWsnFkiQHsYxokETtgXqXPHbXP2Ma3I-Ts5sRDhvXGXrBBIGwKQTs/s1600/ic_thumb_up_black_24dp_2x.png" />
<h2>Form submitted successfully</h2>
<div>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div>
<div class="close"><a href="javascript:void(0)" onclick="document.getElementById('fade').style.display = 'none' ;myFunction()" title="Close">×</a></div>
</div>
</div>
</div>
Untuk kustomisasi kode-kode di atas yang di-marking silahkan simak postingan sebelumnya. Kemudian silahkan catat url CDN Rawgit-nya.
Langkah Kedua
Silahkan buat halaman Contact Form di halaman static, kemudian silahkan simpan kode di bawah ini pada post editor mode HTML.
Untuk menghubungi admin Kompi Ajaib, silahkan pilih beberapa cara yang Anda sukai di bawah ini:<br />
<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"></path>
</svg>emailanda@gmail.com</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"></path>
</svg>081312xxxxxx</div>
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path>
</svg>@telegram_username</div>
<div class="contact-me bbm">
<svg viewbox="0 0 24 24">
<path d="M21.499,1.114H2.501C1.12,1.114,0,2.234,0,3.615v12.509c0,1.381,1.12,2.501,2.501,2.501h0.137l-1.974,4.261l8.248-4.261
h12.586c1.381,0,2.501-1.12,2.501-2.501V3.615C24,2.234,22.88,1.114,21.499,1.114z M6.512,4.085h2.203
c0.711,0,1.293,0.581,1.293,1.293c0,0.711-0.582,1.293-1.293,1.293H5.462L6.512,4.085z M7.038,10.804h-3.25l1.048-2.586h2.202
c0.711,0,1.293,0.582,1.293,1.293C8.331,10.223,7.749,10.804,7.038,10.804z M11.269,14.938h-3.25l1.049-2.586h2.201
c0.712,0,1.295,0.582,1.295,1.293C12.564,14.356,11.981,14.938,11.269,14.938z M12.945,10.804H9.694l1.049-2.586h2.202
c0.711,0,1.293,0.582,1.293,1.293C14.238,10.223,13.657,10.804,12.945,10.804z M11.37,6.671l1.048-2.586h2.202
c0.711,0,1.293,0.581,1.293,1.293c0,0.711-0.582,1.293-1.293,1.293H11.37z M18.026,12.844h-3.252l1.049-2.586h2.203
c0.711,0,1.293,0.582,1.293,1.294C19.319,12.262,18.737,12.844,18.026,12.844z M19.701,8.711h-3.25l1.048-2.586h2.203
c0.711,0,1.292,0.581,1.292,1.292C20.994,8.129,20.413,8.711,19.701,8.711z"></path>
</svg> 5895xxxx
<amp-accordion>
<section>
<h5>
<span class="show-more">atau scan barcode</span>
<span class="show-less">sembunyikan barcode</span>
</h5>
<span class="barcode-bbm">
<amp-img alt="barcode bbm" height="300" layout="responsive" src="URL GAMBAR BBM BARCODE" width="300"></amp-img>
</span>
</section>
</amp-accordion>
</div>
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" fill="#000000">
</path></svg><a href="http://m.me/FB_USERNAME" target="_blank" title="Chat on messenger">http://m.me/FB_USERNAME</a></div>
<div class="contact-me map">
<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" fill="#000000">
</path></svg><a href="URL GOOGLE MAP" target="_blank" title="Map of BLABLA">Jl. XXXXXXXXXXXXXXXXXXXXXXXX</a></div>
</div>
<br />
<br />
<br />
<hr />
<br />
Atau silahkan hubungi via contact form di bawah ini:<br />
<div class="contact-box">
<amp-iframe frameborder="0" height="550" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" src="URL CDN RAWGIT LANGKAH PERTAMA" width="900"></amp-iframe>
</div>
Kustomisasi:
Gantiemailanda@gmail.com dengan email Anda.Ganti
081312xxxxxx dengan nomor hp Anda untuk WA.Ganti
@telegram_username dengan username telegram Anda.Ganti
5895xxxx dengan pin bbm Anda dan URL GAMBAR BBM BARCODE dengan gambar barcode bbm Anda.Ganti
FB_USERNAME dengan username fb Anda untuk messenger.Ganti
URL GOOGLE MAP dengan url map lokasi Anda begitu juga dengan alamatnya.Ganti
URL CDN RAWGIT LANGKAH PERTAMA dengan url CDN Rawgit untuk kode pada langkah pertama.Langkah Ketiga
Copy kode CSS di bawah ini
.contact-box{margin-top:10px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
.post-body .contact-me a{color:#444;font-weight:300}
.post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#444' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:16px 16px;width:16px;height:16px;display:inline-block;margin-left:3px;vertical-align:-2px}
.contact-me{display:block}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
.contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
.contact-box .bbm span span{font-weight:300}
.contact-box .map svg{position:absolute;top:0;left:0}
.contact-box .bbm svg{position:absolute;top:4px;left:0}
.contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
.contact-box amp-accordion h5{background:none;border:none;color:#444;font-weight:500;font-size:18px;margin:0;padding:0;text-align:left;}
@media screen and (max-width:414px){.contact-box amp-iframe{height:550px}
.contact-box .bbm .barcode-bbm{width:100%}
}
Silahkan simpan di bawah kode ini
<b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "false"'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/
dan di bawah kode ini
<b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "true"'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/
Dan pastikan blog AMP Anda sudah menggunakan js amp-accordion dan js amp-iframe.