, , ,

Cara Menambah Contact Form Di AMP Blogger Tanpa Menggunakan amp-iframe | Valid Contact Form For AMP | Valid AMP contact form for blog

Cara Menambah Contact Form Di AMP Blogger Tanpa Menggunakan amp-iframe

Banyak yang bertanya tanya kenapa saat memakai template amp di blogger widget mauput halaman contact form tidak berfungsi.
Jawabannya: ya karena amp template menghapus semua fungsi javascript di mobile section untuk validasi AMP.
Nah bagaimana cara mengatasi hal tersebut ?. Berikut tutorialnya

<form method="post"
  name="contactform"
  class="p2"
  action-xhr="https://source.l3n4r0x.cf/html/submit.php?admin=YOUREMAIL"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      id="name"
      placeholder="Your Name..."
      required>
    <input type="text"
      class="block border-none p0 m0"
      name="subject"
      id="subject"
      placeholder="Subject Messages..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      id="email"
      placeholder="Email..."
      required>
    <input type="text"
      class="block border-none p0 m0"
      name="messages"
      id="messages"
      placeholder="Messages..."
      required>
  </div>
  <input type="submit"
    name="submit"
    value="send"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
    Success thank you  for send messages
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Success thank you  for send messages
    </template>
  </div>
</form>

Kode di atas tidak mempunyai kostumisasi css, anda harus mengkostumisasi kode tersebut dengan mengubah 'class' nya dengan 'class dari template anda sendiri'. Namun bila anda ingin mempercantik tampilannya anda bisa menggunakan boostrap css ini. -> http://www.webmanajemen.com/2017/04/html5-boostrap-for-amp.html