Solusi Jitu Membuat Formulir Di Acclimated Mobile Page


BLOG MOBILE.




     Untuk membuat formulir contact form di blog AMP sedikit ribet karna bebeda membuat buat kontak form di template blog biasa. Agar blog tersebut tetap valid amp.
Solusi lain untuk membuat kontak form di blog AMP yaitu harus menghosting sendiri contact form ke GITHUB.
Cara yang paling mudah untuk membuat kontak form yaitu memanfatkan GOOGLE FORMULIR.

Kelebihannya google formulir ini benar benar gratis hehe dan gampang untuk membuatnya.

Nah kali ini saya akan membuat contact form di blog AMP dengan memanfatkan google formulir.

Demo

Seperti yang sudah saya singgung di atas untuk membuat contact form Amp harus menghosting file dulu makanya saya akan memodifikasi GOOGLE FORMULIR untuk contact form blog AMP.

Harap baca dengan seksama biar langkah langlah membuat contact form nya berhasil hehe saya akan jelaskan dengan detail

LANGKAH PERTAMA



  • Silahkan anda buat dulu google formulir nya kunjungi https://docs.google.com/forms/
  • Buat lah foms yang hanya berisi NAMA, EMAIL dan COMMENT pastikan semuanya harus REQUIRED seprti gambar di bawah ini 



  • kemudian klik RESPONSES  
  • Lalu klik icon CREATE SPREADSHEET
  • Pilih CREATE NEW SPREADSHEET ,pada RESPONSES pesan ini lah akan masuk otomatis ke FORM anda 
  • Selesai buat form klik icon gear ( setting ) pojok di pojok kanan atas hilangkan centang pada LIMIT TO 1 RESPONSE langsung SAVE.

LANGKAH KEDUA 


  • Buka kembali form yang sudah di buat tadi lalu kita VIEW PAGE SOURCE

untuk VIEW SOURCE dengan menggunakan Hp smartphone juga biasa gunakan browser CROME ketika VIEW-SOURCE:URL HALAMAN FORM GOOGLE DI SINI.

Setelah di PAGE VIEW SOURCE Silahkan anda cari kode kode berikut ini 



  • Cari kode aria-label="NAME" lalu Catat seperti kode ini name="entri .245682xxxx".
  • Cari kode aria-label="EMAIL" lalu Catat seperti kode ini email="entri. 356897xxxx".
  • Cari kode ini aria-label="COMMENTS"lalu catat seperti kode ini name="entri.785624xxxx".
  • Cari kode NAME="DRAFRESPONSE"lalu catat lagi seperti kode berikut ini value="[,,&quot2032524635189654xx"]".
  • Cari lagi yang tetakhir kode NAME="fbzx"lalu catat lagi seperti kode berikut value="20325246351895xxx".

LANGKAH KETIGA 


Setalah semua kode kode diatas sudah di catat.
Silahkan anda hosting file berikut ini.

<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="entri .245682xxxx" value="" id="entri .245682xxxx" 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="entri. 356897xxxx" value="" id="entri. 356897xxxx" 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="entri.785624xxxx" rows="8" cols="0" id="entri.785624xxxx" 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="[,,"2032524635189654xx&quot;]">
                    <input name="pageHistory" type="hidden" value="0">
                    <input name="fbzx" type="hidden" value="[,,"2032524635189654xx">
          <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>

KETERANGAN
silahkan ganti kode kode yang sudah saya highlight dengan warna kuning di atas.dengan kode kode yang sudah di catat tadi di LANGKAH KEDUA.
Dan untuk mendafatkan ID google form ada di atas address halaman google form

LANGKAH KE EMPAT 


Sekarang kita buat halaman contact form nya,anda juga bisa menambahkan email anda,kontak telephone,BBM Alamat lokasi dan lain lain tergantung kebutuhan hehe
Contoh nya anda bisa gunakan scrpit di bawah ini.

Untuk menghubungi admin BLOG MOBILE , 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 KETIGA" width="900"></amp-iframe>
</div>

Silahkan sesuikan kontak foms nya yang sudah di highlight di atas
Yang terpenting anda ganti URL CDN RAWGIT DARI FILE YANG SUDAH DI HOSTING SEPERTI DI LANGKAH KE TIGA. 

Catatan untuk memposting pastikan dalam mode HTML.

LANGLAH KE LIMA 


untuk tampilan lebih menarik gunakan CSS berikut 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%}
}

Simpan di bawah kode berikut 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 kode berikut ini juga.

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

Selesai.
Berikut ini tampilan ketika ada tanggapan masuk ke email anda anda akan mendafatkan nontivikasi seperti ini

Demikian toturial cara buat contact form di Amp dengan menggunakan google formulir.
Semoga bermanfaat.
Jika anda pertanyaan silahkan anda bisa hubungi di contact form saya

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×