Solusi Contact Form Blog Amp Yang Error Dan Tidak Berfungsi

Sebelumnya contact form blog AMP dengan memakai Fromspree ini tidak error di amp-form dan sanggup dipakai menyerupai biasanya. Kemudian kemarin contact form ini menjadi error dan tidak sanggup digunakan. Namun hingga dikala ini aku belum mendapat solusi untuk error amp-form untuk contact form ini.

Kemudian aku mencoba dengan menciptakan halaman HTML untuk contact form dengan tetap memakai Formspree sebab ini merupakan salah satu cara yang paling gampang tanpa harus memakai aba-aba php dan hosting.

Saya menciptakan sebuah halaman contact form yang aku simpan di Github. Anda tinggal me-link ke halaman tersebut dengan pembiasaan email dan blog Anda pada link tersebut. Dan sudah aku test berjalan normal, sanggup mengirimkan pesan ke email kita.

Saya sudah mencoba dengan amp-iframe biar sanggup di-embed di blog kita, namun ternyata form-nya tidak muncul.

Untuk itu solusi untuk contact form blog AMP yang error dan tidak berfungsi ini dengan me-link ke halaman contact form yang aku buat.

Silahkan gunakan URL di bawah ini

 <a href="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/contactform-amp3.html?email=anda@email.com&amp;url=url_halaman_thanks&amp;blog=url_blog&amp;title=title_blog" target="_blank" rel="nofollow" title="Solusi Contact Form Blog AMP Yang Error Dan Tidak Berfungsi">Contact</a>

Demo

Silahkan ganti anda@email.com dengan email Anda, ganti url_halaman_thanks dengan url halaman thanks blog Anda, untuk menciptakan halaman thanks ini silahkan simak DI SINI. Kemudian silahkan ganti url_blog dengan url blog Anda, dan title_blog ganti dengan title blog Anda. Jika title blog Anda mempunyai spasi, silahkan ganti spasi dengan aba-aba %20 menyerupai teladan ini Kompi%20Ajaib.

Jika Anda ingin menyimpan sendiri contact form ini di Github Anda, silahkan gunakan aba-aba ini dan simpan dengan file *.html

 <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="Solusi Contact Form Blog AMP Yang Error Dan Tidak Berfungsi">Homepage</a></h3>');
   </script>
 </div>

Sumber https://www.kompiajaib.com/

Share this post