Jan 9, 2017

Perbaiki Contact Form Pada Blog AMP Yang Error

Contact Form Blog

Mungkin sobat pernah mengalami Error pada Contact Form di Blognya, hal ini pernah saya alami beberapa wktu yang lalu, saya pernah menggunakan contact form di blog AMP dengan Formspree, pada saat awal dibuat tidak mengalami error pada amp-formnya dan masih bisa di gunakan untuk contact form bagi pembaca setia, namun alangkah kagetnya setelah saya mendapatkan email dari pengunjung setia bahwa Form Contact saya error dan tidak berfungsi, setelah saya cek ternyata memang benar form contact di blog AMP saya tidak berfungsi. Sebenarnya ini pertama kalinya saya mengalami hal ini, saya coba tanya-tanya di group dan forum kemudian tanya Google dan akhirnya ketemu juga solusinya Perbaiki Contact Form Pada Blog AMP Yang Error.

Sebelumnya saya penasaran kenapa bisa error dan tidak berfungsi amp-form ini, saya coba buat ulang kembali contact form amp pada blog saya dengan menggunakan Formspree, kenapa saya menggunakan contact form dari Formspree karena menurut saya dengan keterbatasan pengetahuan yang saya punya cara ini lebih mudah karena tanpa harus menggunakan hosting apalagi pakai kode php yang bisa bikin pusing. 

Kembali lagi ke topik pembahasan, untuk memperbaiki Contact Form Pada Blog AMP Yang Error sebelumnya saya buat kembali dihalaman baru menggunakan amp-iframe, namun masih saja tetap tidak berfungsi contact form di blog saya.

Nah untuk sobat yang kebetulan mempunyai masalah yang sama disini saya akan berbagi bagaimana cara perbaiki contact form yang error pada Blog AMP, berikut solusi dan pembahasannya.


Solusi pertama
Jika sobat tidak mau ribet dan susah payah sobat bisa link-kan ke halaman Contact form yang sudah saya buat dibawah ini
<a href="https://cdn.rawgit.com/dbalikcom/ampblog/b9a3df1f/contact%20from%20blog%20amp.html?email=anda@email.com&amp;url=url_halaman_thanks&amp;blog=url_blog&amp;title=title_blog" target="_blank" rel="nofollow" title="Contact">Contact</a>


Jika ingin menerapkannya diatas silahkan sobat ganti anda@email.com menggunakan alamat email sobat kemudian sobat ganti url_halaman_thanks menggunakan url halaman yang ada di blog amp sobat. Lanjut kemudian sobat ganti url_blog dengan url blog sobat, kemudian title_blog rubah dengan title blog amp nya sobat punya. Perlu diperhatikan kalau title blog sobat menggunakan spasi sobat harus ganti "spasi" dengan kode %20 diatas "contact%20from...".

Kata orang tua kalau ingin membantu sekalian saja bantu sampai tuntas agar permasalahan orang lain dapat segera selesai, nah untuk itu saya juga memberikan kodenya dibawah ini siapa tau ada sobat yang ingin menggunakan sendiri di github link ke cdn.rawgit seperti diatas, berikut kodenya simpan dengan akhiran".html"

Silahkan simpan kode dibawah ini
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900%7CMaterial+Icons' rel='stylesheet' type='text/css'/>
<style>
body {
  background-color:white;
  margin:0;
  padding:0 30px;
  color:#212121;
  font-family:'Roboto',sans-serif;
}
.contact-box{
  overflow:hidden;
}
h1,h2,h3{
  text-align:center;
}
#contactForm input:focus~label,#contactForm input:valid~label,#contactForm textarea:focus~label,#contactForm textarea:valid~label{font-size:.75em;color:red;top:-2.25rem;-webkit-transition:all 125ms ease;transition:all 125ms ease}
#contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 0;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm .styled-input-in{position:relative}
#contactForm{margin-right:-10px}
#contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all .25s ease;transition:all .25s ease;pointer-events:none;line-height:1}
#contactForm .styled-input.wide{width:100%}
#contactForm input,#contactForm textarea{font-family:'Roboto',sans-serif;padding: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}
#contactForm input~.span1,#contactForm textarea~.span1{display:block;width:0;height:3px;background:red;position:absolute;left:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}
#contactForm input~.span2,#contactForm textarea~.span2{display:block;width:0;height:3px;background:red;position:absolute;right:50%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}
#contactForm input~span{bottom:0}
#contactForm textarea~span{bottom:0}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus~.span1,#contactForm input:focus~.span2,#contactForm textarea:focus~.span1,#contactForm textarea:focus~.span2{width:50%}
#contactForm textarea{width:100%;min-height:15em}
#contactForm .btn{font-family:Helvetica,Arial,sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;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:20px 0 0;background-image:none}
#contactForm .btn-default:focus,#contactForm .btn-default:hover{background-color:red;border:1px solid #c40303;color:#fff}
#contactForm .gotcha{border:none;background:0 0;display:none}
@media screen and (max-width:800px){#contactForm .styled-input {width:100%;}
}
</style>

<script>
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}
var emailform = getQueryVariable("email");
var urlthanks = getQueryVariable("url");
var urlblog = getQueryVariable("blog");
var titleblog = getQueryVariable('title').replace(/%20/g, " ");
</script>
<div class="contact-box">
<h1>Contact Form</h1>
<script>
document.write('<h2>'+titleblog+'</h2>\
<form action="https://formspree.io/'+ emailform +'" method="POST" target="_blank" name="sentMessage" id="contactForm">\
<input type="hidden" name="_next" value="'+ urlthanks +'" />\
    <div class="styled-input">\
      <div class="styled-input-in">\
      <input type="text" name="name" 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" name="_replyto" required />\
      <label>Email</label>\
      <span class="span1"></span><span class="span2"></span> </div></div>\
    <div class="styled-input">\
      <div class="styled-input-in">\
      <input type="text" name="_subject" required />\
      <label>Subject</label>\
      <span class="span1"></span><span class="span2"></span> </div></div>\
    <div class="styled-input wide">\
      <div class="styled-input-in">\
      <textarea name="message" required></textarea>\
      <label>Message</label>\
      <span class="span1"></span><span class="span2"></span> </div></div>\
    <button type="submit" class="btn btn-default">Send</button>\
    <input type="text" name="_gotcha" class="gotcha" />\
  </form>\
  <h3>Back to <a href="'+ urlblog +'" title="Homepage">Homepage</a></h3>');
  </script>
</div>


Ada banyak cara sebenarnya untuk membuat Form contact seperti diatas, namun untuk blog yang sudah menggunakan AMP caranya agak sedikit berbeda, sampai sekarang pun saya masih terus belajar bagaimana cara penerapannya untuk di blog, tapi saya yakin dengan ada kemauan untuk belajar pasti bisa, dan pasti saya akan selalu updated perkembangan seputar AMP Blog ini, untuk itu ikuti terus blog ini ya sobat.
 
Baiklah sobat itu saja mungkin yang bisa saya bagikan dan share artikel ini, jika ada yang ingin di diskusikan dapat mengomentari di kolom komentar ini, terima kasih sudah berkunjung.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.