Perbaiki Contact Form Pada Blog AMP Yang Error

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

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

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

Nah untuk teman yang kebetulan mempunyai problem yang sama disini aku akan membuatkan bagaimana cara perbaiki contact form yang error pada Blog , berikut solusi dan pembahasannya.

Solusi pertama

Jika teman tidak mau ribet dan susah payah teman mampu link-kan ke halaman Contact form yang sudah aku 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>

Demo

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

Kata orang bau tanah kalau ingin membantu sekalian saja bantu hingga tuntas biar permasalahan orang lain dapat segera selesai, nah untuk itu aku juga menawarkan kodenya dibawah ini siapa tau ada teman yang ingin menggunakan sendiri di github link ke cdn.rawgit menyerupai diatas, berikut kodenya simpan dengan akhiran".html"

Silahkan simpan aba-aba 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 bekerjsama untuk membuat Form contact menyerupai diatas, namun untuk blog yang sudah menggunakan caranya agak sedikit berbeda, hingga sekarang pun aku masih terus berguru bagaimana cara penerapannya untuk di blog, tapi aku yakin dengan ada kemauan untuk berguru pasti bisa, dan pasti aku akan selalu updated perkembangan seputar Blog ini, untuk itu ikuti terus blog ini ya sobat.

 

Baiklah teman itu saja mungkin yang mampu aku bagikan dan share artikel ini, jikalau ada yang ingin di diskusikan dapat mengomentari di kolom komentar ini, terima kasih sudah berkunjung.