Modifikasi Google Form Untuk Contact Form Blog AMP

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="[,,&quot;666676987482120412&quot;]">
                    <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://4.bp.blogspot.com/-rY5km74yj_I/V1ItqrbspBI/AAAAAAAAmxA/SK-aLPTjyuo8uiSYylRJ4tLslk2LJ581QCLcB/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">&times;</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>
    </amp-accordion><br />
<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>
 
</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:

Ganti emailanda@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 == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

dan di bawah kode ini


<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

Dan pastikan blog AMP Anda sudah menggunakan js amp-accordion dan js amp-iframe.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments