Modifikasi Google Form Untuk Contact Form Blog Amp
Setelah kemarin kita berhasil memodifikasi Google Form untuk contact form blog, sekarang 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 semoga dapat dimngerti.Berbeda dengan blog biasa yang dapat dipasangkan secara langsung, pemasangan Google Form pada blog AMP ini harus memakai amp-iframe dan ditempatkan pada posisi 75% dari tepi atas blog semoga form-nya dapat tampil.
Untuk itu, di atas amp-iframe, aku menambahkan kontak-kontak lainnya menyerupai email, whatsapp, telegram, bbm, dan lainnya untuk mendorong amp-iframe lebih ke bawah semoga form-nya dapat tampil.
Jika Anda ingin mencobanya pada blog AMP Anda, silahkan ikuti llangkahnya di bawah ini.
Langkah Pertama
Silahkan hosting aba-aba di bawah ini di Github, silahkan simpan dengan ekstensi *.html contohnya 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 = sasaran ? sasaran : 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="Modifikasi Google Form Untuk Contact Form Blog AMP" 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="Modifikasi Google Form Untuk Contact Form Blog AMP" 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="Modifikasi Google Form Untuk Contact Form Blog AMP Modifikasi Google Form Untuk Contact Form Blog AMP" height="48" width="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6it3J5F2TsWTsAUnkGRUS2DF0kmtcgm0z2PviVty12Bloc18t6rIbiHK1nTwK7ojA8dRVMMPOhykfPiCEwc8w0Y3feeJx7ma_5UuY09KrCzwp_ZmxXW1K1OQol4323y46HnrAtbKnH0j/s1600/ic_thumb_up_black_24dp_2x.png" />
<h2>Form submitted successfully</h2>
<div>Jika tidak ada halangan dan kesibukan lainnya, admin akan eksklusif merespon pesan yang Anda kirimkan.</div>
<div class="close"><a href="javascript:void(0)" onclick="document.getElementById('fade').style.display = 'none' ;myFunction()" title="Modifikasi Google Form Untuk Contact Form Blog AMP">×</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, lalu silahkan simpan aba-aba 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="Modifikasi Google Form Untuk Contact Form Blog AMP Modifikasi Google Form Untuk Contact Form Blog AMP" 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="Modifikasi Google Form Untuk Contact Form Blog AMP">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="Modifikasi Google Form Untuk Contact Form Blog AMP">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 aba-aba pada langkah pertama.Langkah Ketiga
Copy aba-aba 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 aba-aba ini
<b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "false"'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/
dan di bawah aba-aba 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 memakai js amp-accordion dan js amp-iframe. Sumber https://www.kompiajaib.com/
0 Response to "Modifikasi Google Form Untuk Contact Form Blog Amp"
Posting Komentar