Membuat Form Mail Berbasis Ampmail PHP

Sunday 17 March 2019

Membuat Form Mail Berbasis Ampmail PHP

The Accelerated Mobile Page (AMP) adalah project Google yang diklaim sebagai tampilan halaman mobile yang cepat dan responsif, atau halaman Seluler yang dipercepat, yakni AMP. Semua situs bail berbasis html maupun php, mau tidak mau sekarang harus berbasis AMP.

Kenapa demikian?

Karena menurut keterangan pihak google, mesin penelusuran google hanya akan meng-index situs yang berbasis AMP.

Sebelumnya, di sini telah dibahas berbagai contoh dan cara membuat atau mengkonversi situs html ke amp. Hari ini tentang membuat pesan kontak email atau form send mail berbasis AMP.

Untuk contoh sederhana pada form mail surat pembaca, yang terdiri dari nama, email dan no hp. Bentuk contohnya seperti di bawah ini;

Surat Keluhan

Dalam Form mail biasa, kita hanya memasukkan type ke dalam koneksi php. Perbedaannya ada penambahan kode ampstart pada input type, selebihnya adalah sama. Kemudian pada koneksi php ampform php, seperti contoh dibawah ini;

<form method="post" action-xhr="ampmail.php" target="_top">
          <div class="ampstart-input inline-block relative mb3">
    <input type="text"
      name="name"
      placeholder="Nama Lengkap:..."
      required>
  </div>
   <div class="ampstart-input inline-block relative mb3">
    <input type="email"
      name="email"
      placeholder="Email:...">
  </div>
  <div class="ampstart-input inline-block relative mb3">
    <input type="text-area"
      name="Keluhan"
      placeholder="Butuh bantuan?">
  </div>
  <div class="ampstart-input inline-block relative mb3">
    <input type="tel"
      name="no_hp"
      placeholder="No hp:...">
  </div>
  <input type="submit"
    value="hub saya"
    class="ampstart-btn caps">
      <div submit-success> 
    <template type="amp-mustache">
      Success! Thanks {{name}}. Our design specialists will contact you shortly.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
        </form>

Pada ampform mail php, ada penambah cdn ampproject. Dan selengkapnya bisa dipihat di bawah ini.

?php
if(!empty($_POST)){
$name=$_POST['name'];
$email = $_POST['email'];
$phone = $_POST['no_hp'];
$enquiry = $_POST['keluhan'];
$formcontent=" From: $name n Phone: $no_hp";
$recipient = "admin@example.com";
$subject = $keluhan;
$mailheader = "From: $email rn";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

       $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
        header("Content-type: application/json");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://example.com') .".cdn.ampproject.org");
        header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
        header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
        header("AMP-Redirect-To: https://example.com/index.html");
        header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin"); 
        echo json_encode(array('name' => $name));
        exit;
}
?>

Demikian cara membuat form send mail berbasis AMP.

Semoga bermanfaat.