AMP Контактная форма

Сложность

AMP 80%
HTML 70%
CSS 60%
JavaScript 20%
PHP 30%

Пример формы AMP для файла PHP

Первым делом, напишем пример простой AMP формы для PHP файла. Убедимся, что нет ошибок в консоли. К этому моменту, вы должны уже знать кое-что о AMP и понимать базовый AMP шаблон страницы.

Создадим пустую папку с нашим проектом. В данной папке, создадим два файла:

  1. index.html
  2. amp-mail.php

В данных файлах, напишем следующий код:

<!doctype html>
<html amp lang="ru">

<head>
  <title>Тестовая форма AMP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключаем для форм нужные скрипты -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <!-- end Подключаем для форм нужные скрипты --><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head>

<body>
  <h1>Пример формы AMP для файла PHP</h1>
  <p>Текст отправляется формой AMP в файл PHP, который возвращает ответ в формате JSON.</p>
  <form method="post" action-xhr="amp-mail.php" target="_top" class="amp-form-php">
    <div class="amp-form-php__item">
      <label>Введите текст:
        <input type="text" name="name" value="" required> </label>
    </div>
    <div class="amp-form-php__item">
      <input type="submit" value="Envoyer"> </div>
    <div submit-success>
      <template type="amp-mustache">Текст, возвращаемый PHP: {{name}}</template>
    </div>
    <div submit-error>
      <template type="amp-mustache">Ошибка!</template>
    </div>
  </form>
</body>

</html>
<?php
// Мы определяем заголовки HTTP
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']);
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']);

// Мы можем обрабатывать данные $ _POST
$data = array();
$data['name'] = $_POST['name'];

// Наконец, результат возвращается в формате JSON
echo json_encode($data);
?>

Атрибут формы action-xhr.

Указывает конечную точку сервера для обработки ввода формы. Значение должно быть URL-адресом https и не должно быть ссылкой на CDN.

В данном примере,  можно записать так:

<form method="post" action-xhr="https://erweb.ru/learn/amp/amp-form-1/amp-mail.php" target="_top" class="amp-form-php">.

Если посмотреть в консоль, там мы не увидим ошибок:

AMP форма

Если неверно написать CORS запросы. Можно увидеть в консоли, данную распространенную ошибку:

amp-form

Контактная форма

Отлично! Теперь мы готовы реализовать рабочую контактную форму, на AMP странице. Здесь я не буду вдаваться в подробности PHP кода, потому что, все, что касалось AMP части, было разобрано в предыдущем разделе. Здесь только реализация.

Вновь, создадим пустую папку с нашим проектом. В данной папке, создадим два файла:

  1. index.html
  2. amp-mail.php

В данных файлах, напишем следующий код:

<!doctype html>
<html amp lang="ru">

<head>
  <title>Тестовая форма AMP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключаем для форм нужные скрипты -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <!-- end Подключаем для форм нужные скрипты --><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head>

<body>
  <h1>Контактная форма</h1>
  <p>Пример рабочей контактной формы, на AMP странице.</p>
  <form method="post" action-xhr="amp-mail.php" target="_top" class="amp-form-contact">
    <div class="amp-form-contact__item">
      <label class="label-user" for="amp-form-contact__name">Ваше имя:</label>
      <input type="text" name="contact-name" id="amp-form-contact__name" placeholder="Имя*" required> </div>
    <div class="amp-form-contact__item">
      <label class="label-phone" for="amp-form-contact__tel">Ваш телефон:</label>
      <input type="tel" name="contact-phone" id="amp-form-contact__tel" placeholder="Телефон*" required> </div>
    <div class="amp-form-contact__item">
      <label class="label-email" for="amp-form-contact__">Ваш email:</label>
      <input type="email" name="contact-email" id="amp-form-contact__email" placeholder="Email"> </div>
    <div class="amp-form-contact__item">
      <textarea name="contact-message" placeholder="Ваше сообщение"></textarea>
    </div>
    <button type="submit">Отправить</button>
    <div submit-success>
      <template type="amp-mustache">{{name}}, мы успешно получили ваше сообщение и скоро свяжемся с вами!</template>
    </div>
    <div submit-error>
      <template type="amp-mustache">К сожалению! Что-то пошло не так, и мы не смогли отправить ваше сообщение.</template>
    </div>
  </form>
</body>

</html>
<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  header('Content-Type: application/json');
  header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']);
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
  header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']);

  $name = strip_tags(trim($_POST["contact-name"]));
  $name = str_replace(array("\r", "\n"), array(" ", " "), $name);
  $tel = trim($_POST["contact-phone"]);
  $email = trim($_POST["contact-email"]);
  $message = trim($_POST["contact-message"]);

  if (empty($name) OR empty($tel)) {
    exit;
  }

  $recipient = "alexandr.kazakov1@gmail.com"; // Замените на свой email
  $subject = "Письмо с сайта erweb.ru, AMP обучение, от посетителя: $name"; // Замените на адрес своего сайта

  $email_content = "От кого: $name\n\n";
  $email_content .= "Телефон отправителя: $tel\n\n";
  $email_content .= "Email отправителя: $email\n\n";
  $email_content .= "Сообщение отправителя:\n$message\n";

  $email_headers = "From: $name <$email>";

  if (mail($recipient, $subject, $email_content, $email_headers)) {
    $data = array();
    $data['name'] = $_POST['contact-name'];
    echo json_encode($data);

  } else {
    exit;
  }

} else {
  exit;
}

?>

Данная форма рабочая, с нее будут приходить письма на мой email. Если решите протестировать.

Контактная форма - Стилизованная

Теперь создадим стилизованную контактную форму, с красивым выводом сообщений, об ошибке, или успехе, при попытке отправки письма. Сделаем свою валидацию. Добавим иконки в input.

<!doctype html>
<html amp lang="ru">

<head>
  <title>Тестовая форма AMP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключим Шрифт -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic-ext">
  <!-- end Подключим Шрифт -->
  <!-- begin Подключаем Иконки  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- end Подключаем Иконки  -->
  <!-- begin Подключаем для форм нужные скрипты -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <!-- end Подключаем для форм нужные скрипты --><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom>
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
html {
  font-size: 16px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  background-color: #efefef;
  text-align: center;
}
.amp-form-contact {
  max-width: 350px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 5px 15px #848484;
}
.amp-form-contact__header {
  background-color: #083250;
  border-bottom: 1px solid #000;
  padding: 15px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  margin-bottom: 15px;
}
.amp-form-contact__title {
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
}
.amp-form-contact__descr {
  margin-bottom: 15px;
  text-align: center;
}
.amp-form-contact__body {
  background-color: #fff;
  padding: 15px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.amp-form-contact__item {
  margin-bottom: 10px;
}

.amp-form-contact__label {
  position: relative;
  float: left;
}
.amp-form-contact__label:before {
  position: absolute;
  font-family: fontawesome;
  font-size: 17px;
  color: #083250;
  opacity: 0.5;
  top: 13px;
  left: 10px;
  border-right: 1px solid #083250;
  padding: 3px 10px 0 5px;
  max-width: 30px;
}
.amp-form-contact__label_user:before {
  content: "\f007";
}
.amp-form-contact__label_phone:before {
  content: "\f095";
}

.amp-form-contact__label_email:before {
  content: "\f0e0";
}
.amp-form-contact__input {
  display: block;
  height: 50px;
  line-height: 47px;
  font-size: 14px;
  padding: 0 50px;
  border: 1px solid #083250;
  border-radius: 2px;
  width: 100%;
}
.amp-form-contact__input::placeholder {
  color: #a5a5a5;
  font-family: "Roboto", sans-serif;
}
.amp-form-contact__textarea {
  display: block;
  line-height: 1.5rem;
  font-size: 14px;
  padding: 10px 50px 0 10px;
  border: 1px solid #083250;
  border-radius: 2px;
  width: 100%;
  min-height: 100px;
  max-width: 100%;
}
.amp-form-contact__textarea::placeholder {
  color: #a5a5a5;
  font-family: "Roboto", sans-serif;
}
.amp-form-contact__submit {
  background-color: #083250;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  width: 100%;
  padding: 15px 0;
  transition: all 0.3s;
}

.amp-form-contact__submit:hover {
  background-color: #737272;
  color: #fff;
}
.amp-form-contact__submit-msg {
  line-height: 1.4;
  padding: 15px;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.amp-form-contact__submit-msg-close{
  background-color: transparent;
  border: none;
  color: #000;
  font-size: 21px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: -2px;
  top: 0px;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  opacity: .2;
}
.amp-form-contact__submit-msg-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.amp-form-contact__submit-msg-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.amp-form-contact-style {
  margin-top: 30px;
  margin-bottom: 30px;
}

input.user-invalid {
  background-color: #fdeaea;
}
input.user-valid {
  background-color: #e3f7eb;
}
.amp-form-contact__valid-message {
  font-size: 14px;
}

/*   Change Autocomplete styles in Chrome */
@-webkit-keyframes autofill {
  to {
    color: #000000;
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

  </style> </head>

<body>
  <div class="amp-form-contact-style">
    <h1>Контактная форма — Стилизованная</h1>
    <p>Пример рабочей стилизованной контактной формы, на AMP странице.</p>
  </div>
  <div class="amp-form-contact">
    <div class="amp-form-contact__header">
      <h4 class="amp-form-contact__title">Заказать обратный звонок</h4></div>
    <div class="amp-form-contact__body">
      <p class="amp-form-contact__descr">Наши менеджеры перезвонят вам в ближайшее время</p>
      <form method="post" action-xhr="amp-mail.php" custom-validation-reporting="show-all-on-submit" target="_top" id="amp-form-contact__form" class="amp-form-contact__form">
        <div class="amp-form-contact__item clearfix">
          <label class="amp-form-contact__label amp-form-contact__label_user" for="amp-form-contact__name"></label>
          <input type="text" name="contact-name" id="amp-form-contact__name" class="amp-form-contact__input" placeholder="Имя*" required> <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__name" class="amp-form-contact__valid-message">
        </div>
        <div class="amp-form-contact__item clearfix">
          <label class="amp-form-contact__label amp-form-contact__label_phone" for="amp-form-contact__tel"></label>
          <input type="tel" name="contact-phone" id="amp-form-contact__tel" class="amp-form-contact__input" placeholder="Телефон*" pattern="\d*" required>
            <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__tel" class="amp-form-contact__valid-message"></span> <span visible-when-invalid="patternMismatch" validation-for="amp-form-contact__tel" class="amp-form-contact__valid-message">Поле должно содержать только цифры. Например: 79190002211</span> </div>
        <div class="amp-form-contact__item">
          <label class="amp-form-contact__label amp-form-contact__label_email" for="amp-form-contact__email"></label>
          <input type="email" name="contact-email" id="amp-form-contact__email" class="amp-form-contact__input" placeholder="Email" required> <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__email" class="amp-form-contact__valid-message"></span> <span visible-when-invalid="typeMismatch" validation-for="amp-form-contact__email" class="amp-form-contact__valid-message"></span> </div>
        <div class="amp-form-contact__item">
          <textarea name="contact-message" class="amp-form-contact__textarea" placeholder="Ваше сообщение"></textarea>
        </div>
        <div class="amp-form-contact__item">
          <button type="submit" class="amp-form-contact__submit">Отправить</button>
        </div>
        <div submit-success id="amp-form-contact__submit-msg-success" class="amp-form-contact__submit-msg amp-form-contact__submit-msg-success">
          <button type="button" on="tap:amp-form-contact__submit-msg-success.hide" class="amp-form-contact__submit-msg-close">×</button>
          <template type="amp-mustache">{{name}}, мы успешно получили ваше сообщение и скоро свяжемся с вами!</template>
        </div>
        <div submit-error id="amp-form-contact__submit-msg-error" class="amp-form-contact__submit-msg amp-form-contact__submit-msg-error">
          <button type="button" on="tap:amp-form-contact__submit-msg-error.hide" class="amp-form-contact__submit-msg-close">×</button>
          <template type="amp-mustache">К сожалению! Что-то пошло не так, и мы не смогли отправить ваше сообщение.</template>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  header('Content-Type: application/json');
  header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']);
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
  header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']);

  $name = strip_tags(trim($_POST["contact-name"]));
  $name = str_replace(array("\r", "\n"), array(" ", " "), $name);
  $tel = trim($_POST["contact-phone"]);
  $email = trim($_POST["contact-email"]);
  $message = trim($_POST["contact-message"]);

  if (empty($name) OR empty($tel)) {
    exit;
  }

  $recipient = "alexandr.kazakov1@gmail.com"; // Замените на свой email
  $subject = "Письмо с сайта erweb.ru, AMP обучение, от посетителя: $name"; // Замените на адрес своего сайта

  $email_content = "От кого: $name\n\n";
  $email_content .= "Телефон отправителя: $tel\n\n";
  $email_content .= "Email отправителя: $email\n\n";
  $email_content .= "Сообщение отправителя:\n$message\n";

  $email_headers = "From: $name <$email>";

  if (mail($recipient, $subject, $email_content, $email_headers)) {
    $data = array();
    $data['name'] = $_POST['contact-name'];
    echo json_encode($data);

  } else {
    exit;
  }

} else {
  exit;
}

?>

В данном примере CSS код не сжат, ради демонстрации. Его рекомендуется сжимать. На AMP страницах не допускается использование внешнего CSS, он должен быть встроен в один тег <style amp-custom> на странице, и не может быть более 50 Kb.

Контактная форма - Модальное окно

<!doctype html>
<html amp lang="ru">

<head>
  <title>Тестовая форма AMP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="/index.html">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- begin Подключим Шрифт -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic-ext">
  <!-- end Подключим Шрифт -->
  <!-- begin Подключаем Иконки  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- end Подключаем Иконки  -->
  <!-- begin Подключаем для форм нужные скрипты -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <!-- end Подключаем для форм нужные скрипты -->
  <!-- begin Подключаем для Lightbox нужный скрипт -->
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <!-- end Подключаем для Lightbox нужный скрипт --><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom>
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
html {
  font-size: 16px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  background-color: #efefef;
  text-align: center;
}
.amp-form-contact {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.amp-form-contact__header {
  background-color: #083250;
  border-bottom: 1px solid #000;
  padding: 15px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  margin-bottom: 15px;
}
.amp-form-contact__title {
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
}
.amp-form-contact__descr {
  margin-bottom: 15px;
  text-align: center;
}
.amp-form-contact__body {
  background-color: #fff;
  padding: 15px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.amp-form-contact__item {
  margin-bottom: 10px;
}

.amp-form-contact__label {
  position: relative;
  float: left;
}
.amp-form-contact__label:before {
  position: absolute;
  font-family: fontawesome;
  font-size: 17px;
  color: #083250;
  opacity: 0.5;
  top: 13px;
  left: 10px;
  border-right: 1px solid #083250;
  padding: 3px 10px 0 5px;
  max-width: 30px;
}
.amp-form-contact__label_user:before {
  content: "\f007";
}
.amp-form-contact__label_phone:before {
  content: "\f095";
}

.amp-form-contact__label_email:before {
  content: "\f0e0";
}
.amp-form-contact__input {
  display: block;
  height: 50px;
  line-height: 47px;
  font-size: 14px;
  padding: 0 50px;
  border: 1px solid #083250;
  border-radius: 2px;
  width: 100%;
}
.amp-form-contact__input::placeholder {
  color: #a5a5a5;
  font-family: "Roboto", sans-serif;
}
.amp-form-contact__textarea {
  display: block;
  line-height: 1.5rem;
  font-size: 14px;
  padding: 10px 50px 0 10px;
  border: 1px solid #083250;
  border-radius: 2px;
  width: 100%;
  min-height: 100px;
  max-width: 100%;
}
.amp-form-contact__textarea::placeholder {
  color: #a5a5a5;
  font-family: "Roboto", sans-serif;
}
.amp-form-contact__submit {
  background-color: #083250;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  width: 100%;
  padding: 15px 0;
  transition: all 0.3s;
}

.amp-form-contact__submit:hover {
  background-color: #737272;
  color: #fff;
}
.amp-form-contact__submit-msg {
  line-height: 1.4;
  padding: 15px;
  position: relative;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.amp-form-contact__submit-msg-close{
  background-color: transparent;
  border: none;
  color: #000;
  font-size: 21px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: -2px;
  top: 0px;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  opacity: .2;
}
.amp-form-contact__submit-msg-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.amp-form-contact__submit-msg-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.amp-form-contact-style {
  margin-top: 30px;
  margin-bottom: 30px;
}

input.user-invalid {
  background-color: #fdeaea;
}
input.user-valid {
  background-color: #e3f7eb;
}
.amp-form-contact__valid-message {
  font-size: 14px;
}

/*   Change Autocomplete styles in Chrome */
@-webkit-keyframes autofill {
  to {
    color: #000000;
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

/* Lightbox */
.amp-lightbox{
  background: rgba(0,0,0,0.8);
}
.amp-lightbox__content{
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left:  50%;
  max-width: 500px;
  width: 90%;
}
.amp-lightbox__close{
  border: none;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 30px;
  position: absolute;
  right: -20px;
  top: -30px;
  transition: color .3s;
}
.amp-lightbox__close:hover{
  color: #fff;
}

.amp-lightbox__header-title{
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
}
.amp-lightbox__content-body{
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

  </style> </head>

<body>
  <div class="amp-form-contact-style">
    <h1>Контактная форма — Модальное окно</h1>
    <p>Пример рабочей контактной формы, в модальном окне, на AMP странице.</p>
  </div>
  <button on="tap:amp-lightbox">Смотреть всплывающее окно</button>
  <amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
    <div class="amp-lightbox__content">
      <div class="amp-lightbox__content-body">
        <button type="button" on="tap:amp-lightbox.close" class="amp-lightbox__close">×</button>
        <div class="amp-form-contact">
          <div class="amp-form-contact__header">
            <h4 class="amp-form-contact__title">Заказать обратный звонок</h4></div>
          <div class="amp-form-contact__body">
            <p class="amp-form-contact__descr">Наши менеджеры перезвонят вам в ближайшее время</p>
            <form method="post" action-xhr="amp-mail.php" custom-validation-reporting="show-all-on-submit" target="_top" id="amp-form-contact__form" class="amp-form-contact__form">
              <div class="amp-form-contact__item clearfix">
                <label class="amp-form-contact__label amp-form-contact__label_user" for="amp-form-contact__name"></label>
                <input type="text" name="contact-name" id="amp-form-contact__name" class="amp-form-contact__input" placeholder="Имя*" required> <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__name" class="amp-form-contact__valid-message">
        </div>
        <div class="amp-form-contact__item clearfix">
          <label class="amp-form-contact__label amp-form-contact__label_phone" for="amp-form-contact__tel"></label>
          <input type="tel" name="contact-phone" id="amp-form-contact__tel" class="amp-form-contact__input" placeholder="Телефон*" pattern="\d*" required>
            <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__tel" class="amp-form-contact__valid-message"></span> <span visible-when-invalid="patternMismatch" validation-for="amp-form-contact__tel" class="amp-form-contact__valid-message">Поле должно содержать только цифры. Например: 79190002211</span> </div>
              <div class="amp-form-contact__item">
                <label class="amp-form-contact__label amp-form-contact__label_email" for="amp-form-contact__email"></label>
                <input type="email" name="contact-email" id="amp-form-contact__email" class="amp-form-contact__input" placeholder="Email" required> <span visible-when-invalid="valueMissing" validation-for="amp-form-contact__email" class="amp-form-contact__valid-message"></span> <span visible-when-invalid="typeMismatch" validation-for="amp-form-contact__email" class="amp-form-contact__valid-message"></span> </div>
              <div class="amp-form-contact__item">
                <textarea name="contact-message" class="amp-form-contact__textarea" placeholder="Ваше сообщение"></textarea>
              </div>
              <div class="amp-form-contact__item">
                <button type="submit" class="amp-form-contact__submit">Отправить</button>
              </div>
              <div submit-success id="amp-form-contact__submit-msg-success" class="amp-form-contact__submit-msg amp-form-contact__submit-msg-success">
                <button type="button" on="tap:amp-form-contact__submit-msg-success.hide" class="amp-form-contact__submit-msg-close">×</button>
                <template type="amp-mustache">{{name}}, мы успешно получили ваше сообщение и скоро свяжемся с вами!</template>
              </div>
              <div submit-error id="amp-form-contact__submit-msg-error" class="amp-form-contact__submit-msg amp-form-contact__submit-msg-error">
                <button type="button" on="tap:amp-form-contact__submit-msg-error.hide" class="amp-form-contact__submit-msg-close">×</button>
                <template type="amp-mustache">К сожалению! Что-то пошло не так, и мы не смогли отправить ваше сообщение.</template>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </amp-lightbox>
</body>

</html>
<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  header('Content-Type: application/json');
  header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']);
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
  header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']);

  $name = strip_tags(trim($_POST["contact-name"]));
  $name = str_replace(array("\r", "\n"), array(" ", " "), $name);
  $tel = trim($_POST["contact-phone"]);
  $email = trim($_POST["contact-email"]);
  $message = trim($_POST["contact-message"]);

  if (empty($name) OR empty($tel)) {
    exit;
  }

  $recipient = "alexandr.kazakov1@gmail.com"; // Замените на свой email
  $subject = "Письмо с сайта erweb.ru, AMP обучение, от посетителя: $name"; // Замените на адрес своего сайта

  $email_content = "От кого: $name\n\n";
  $email_content .= "Телефон отправителя: $tel\n\n";
  $email_content .= "Email отправителя: $email\n\n";
  $email_content .= "Сообщение отправителя:\n$message\n";

  $email_headers = "From: $name <$email>";

  if (mail($recipient, $subject, $email_content, $email_headers)) {
    $data = array();
    $data['name'] = $_POST['contact-name'];
    echo json_encode($data);

  } else {
    exit;
  }

} else {
  exit;
}

?>

Получился отличный вариант, рабочей контактной формы, в модальном окне, на валидной AMP странице.