Home / Blogging / Tutorial / Solusi Jitu Membuat Formulir Di Acclimated Mobile Page

Solusi Jitu Membuat Formulir Di Acclimated Mobile Page

Date - Mei 22, 2017 Blogging Tutorial

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQzdMo6J9r_VJyic5PKRjsxNUPPRvVlzR1A19DnfSVNjFIATGbX36TS5yzNx419kIK5DUZcC9UwZhFIg9Vtba0I8NKcqDU89FpZT7jYpKpV_bpsOQXWk_w03xyadV9bp69W4v-GV4fguD/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

0 komentar

Posting Komentar

Berkomentarlah dengan sopan :)

Tutorial Sederhana Blog

Solusi Jitu Membuat Formulir Di Acclimated Mobile Page

LANGKAH PERTAMA

LANGKAH KEDUA

LANGKAH KETIGA

LANGKAH KE EMPAT

LANGLAH KE LIMA

Share this

Related Articles :

0 komentar

Posting Komentar

Paling Dilihat

Label