Cara Memasang Contact Form Di Blog AMP

Salah satu sarana agar dapat berkomunikasi antara pemilik dan pengunjung Blog selain melalui kolom komentar adalah melalui contact form. Jika biasanya kolom komentar digunakan untuk berinteraksi, pengunjung bertanya kepada penulis terkait bahasan dalam sebuah posting tersebut maka untuk contact form ini sifatnya lebih umum, misalnya untuk urusan bisnis, pemasangan iklan dan sebagainya, dan pesan yang dikirim melalui contact form akan masuk melalui email milik si pemilik blog.

Oleh karena itu contact form memiliki peran yang lumayan penting dalam sebuah blog. Baik blog AMP atau Blog Non AMP seharusnya menyediakan contact form tersebut, tetapi memang cara membuat contact form di Blog AMP terasa lebih sulit dibandingkan dengan blog Non AMP. Terasa sulit mingkin karena tidak banyak orang yang membagi ilmu cara membuat contact form untuk blog AMP.

Sayapun merasa kesulitan mencari caranya, dan akhirnya setelah lama muter muter saya menemukan satu sumber yang bisa dipercaya yaitu kompiajaib.com miliknya mas Adhy Suryadi.

Dan akhirnya setelah belajar dari sana, saya bisa memasang contact form di blog milik saya ini, contohnya bisa Agan lihat melalui tombol di bawah ini:

• CONTACT FORM

Lalu bagaimana cara membuat contact form di blog AMP? dibawah ini adalah penjelasannya

Cara Membuat Contact Form Untuk Blog AMP

Sebelum masuk ke caranya pastikan dulu template blog Agan sudah memiliki kode amp-iframe seperti dibawah ini:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

JIka belum memiliki kode amp-iframe tersebut, salin kode diatas lalu simpan di bawah kode </style> atau di atas kode &lt;/head&gt;&lt;!--<head/>--&gt; Kalau sudah yakin ada lanjut ke langkah selanjutnya.

Khusus Untuk Yang Memakai Template Infinite AMP

Nah buat teman-teman yang menggunakan template infinite AMP dari teh Arlina seperti yang saya pakai ini, ada beberapa langkah yang harus dilakukan yaitu:

• Buka Tema >> Edit HTML
• Cari kode berikut ini : <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
• Nah tepat diatas kode tersebut ada kode tag conditional seperti ini: <b:if cond='data:blog.pageType == &quot;item&quot;'>




• Hapuslah tag conditional tersebut beserta dengan tag penutupnya yaitu </b:if>
• Kemudian Save Template

Cara Membuat Contact Form Untuk Blog AMP Lanjutan

• Pertama-tama kita harus membuat Blog baru (di akun yang sama) khusus untuk contact form
• Aktifkan setelan https blog baru tersebut
• Kemudian masuk ke menu Template atau Theme lalu non aktifkan tampilan mobile theme-nya
• Kemudian masuk ke menu Template atau Theme Edit HTML lalu hapus semua kode HTML blog tersebut dan ganti dengan kode khusus (template khusus) contact form dari kompiajaib.com, silahkan donlot melalui link dibawah ini
• Template Contact Form
• Selanjutnya buatlah halaman statis untuk contact form dan simpan kode HTML dibawah ini pada halaman statis contact form

<amp-iframe title="Contact"
              src="https://contactforminfohp.blogspot.com"
              height="400"
              layout="fixed-height"
              frameborder="0"
              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgHKrLmCLPqHtJfi8C-HX_6kQTanwkQpLncxaEj9zbiyf8weQ6oOM6-59IS4-dkaIkB1a3LbsGeS68kOQ0OBbwvkHduwbNyojiTdpOsxkJV6QHoBVf_QV7wLKX7hsZyJj224N88KcnQzU/s1600/placeholder.png"
             layout="fixed-height"
             height="400"
             width="auto"
             placeholder>
    </amp-img>
  </amp-iframe>

• Jangan Lupa untuk mengganti https://contactforminfohp.blogspot.com dengan URL Bloc contact form yang tadi dibuat.
• Terakhir adalah publikasikan halaman tersebut dan buatlah menu untuk memanggil halaman contact form

Nah sekarang Blog AMP kita sudah mempunyai halaman contact form. saya harap semoga penjelasannya bisa dimengerti dan berhasil diterapkan.

Berbagi :