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

Сложность

AMP 80%

HTML 70%

CSS 60%

JavaScript 20%

PHP 30%

Пример формы на AMP странице, используя PHP

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

Конечная точка XHR должна выполнять требования, указанные в запросах CORS в спецификации AMP.

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

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

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

index.html
amp-mail.php

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

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Пример формы на AMP странице, используя PHP</title>
  <link rel="canonical" href="https://erweb.ru/learn/amp/amp-form-1/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-mail.php, который возвращает ответ в формате JSON.</p>
  <form method="post" action-xhr="https://erweb.ru/learn/amp/amp-form-1/amp-mail.php" target="_top" class="amp-form-php">
    <div class="amp-form-php__item">
      <label>Введите текст:
        <input type="text" name="entered-text" required> </label>
    </div>
    <div class="amp-form-php__item">
      <button type="submit">Отправить</button>
    </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['entered-text'];

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

Демонстрацию работы, можно посмотреть здесь.

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

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

Google AMP Cache

На этом можно было бы и закончить. Раз ошибок в консоли нет — значит все работает. Но нет, ведь google кэширует amp страницы, и в будущем, в результатах поиска выдает их из своего кэша. Это позволяет таким amp страницам загружаться практически мгновенно, что важно для мобильных устройств.

Теперь, если посмотреть ту же самую страницу, но уже из google кэша, мы увидим ошибки в консоли, при попытке обрабоать запрос на PHP:

Демонстрацию работы из google кэша, и ошибки в консоли смотрим здесь здесь.

Доработаем наш код

Отдельная благодарность пользователю jamescridland.

Здесь сразу добавлена проверка. Я написал подробные комментарии, что нужно заменить в коде для работы на вашем сайте. Теперь все работает как в обычной версии, так и из google кэша:

HTML
PHP

HTML

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Пример формы на AMP странице, используя PHP - 2</title>
  <link rel="canonical" href="https://erweb.ru/learn/amp/amp-form-2/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 - 2</h1>
  <p>Введеный текст отправляется в amp-mail.php, который возвращает ответ в формате JSON.</p>
  <form method="post" action-xhr="https://erweb.ru/learn/amp/amp-form-2/amp-mail.php" target="_top" class="amp-form-php">
    <div class="amp-form-php__item">
      <label>Введите текст:
        <input type="text" name="entered-text" required> </label>
    </div>
    <div class="amp-form-php__item">
      <button type="submit">Отправить</button>
    </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

<?php

header('Cache-Control: private, no-cache');

$thisDomain = "https://erweb.ru"; // Заменить на https адрес вашего сайта.

$validOrigins = array('https://erweb-ru.cdn.ampproject.org', 'https://cdn.ampproject.org', 'https://amp.cloudflare.com', $thisDomain);

// ⇑ К блоку выше ⇑ Заменить https://⇒ erweb-ru ⇐.cdn.ampproject.org на адрес вашего сайта. Вместо точки, перед ru/com поставить дефис: «-». Например, получится так: youdomain-com.cdn.ampproject.org

if (!in_array($_SERVER['HTTP_ORIGIN'], $validOrigins)) {
	header('X-Debug: ' . $_SERVER['HTTP_ORIGIN'] . ' is an unrecognised origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

if ($_GET['__amp_source_origin'] != $thisDomain) {
	header('X-Debug: ' . $_GET['__amp_source_origin'] . ' is an unrecognised source origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

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

$data = array();
$data['name'] = $_POST['entered-text'];

echo json_encode($data);
?>

Демонстрацию работы обычной версии, можно посмотреть здесь.

Демонстрацию работы из google кэша, можно посмотреть здесь.

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

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

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

index.html
amp-mail.php

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

HTML
PHP

HTML

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Простая контактная форма AMP</title>
  <link rel="canonical" href="https://erweb.ru/learn/amp/amp-form-contact-1/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 странице, используя PHP.</p>
  <p>Форма имеет валидацию по стандарту HTML-5, а также выводит сообщение об успехе или неудаче отправки письма.</p>
  <form method="post" action-xhr="https://erweb.ru/learn/amp/amp-form-contact-1/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" required> </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

<?php

header('Cache-Control: private, no-cache');

$thisDomain = "https://erweb.ru"; // Заменить на https адрес вашего сайта.

$validOrigins = array('https://erweb-ru.cdn.ampproject.org', 'https://cdn.ampproject.org', 'https://amp.cloudflare.com', $thisDomain);

// ⇑ К блоку выше ⇑ Заменить https://⇒ erweb-ru ⇐.cdn.ampproject.org на адрес вашего сайта. Вместо точки, перед ru/com поставить дефис: «-». Например, получится так: youdomain-com.cdn.ampproject.org

if (!in_array($_SERVER['HTTP_ORIGIN'], $validOrigins)) {
	header('X-Debug: ' . $_SERVER['HTTP_ORIGIN'] . ' is an unrecognised origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

if ($_GET['__amp_source_origin'] != $thisDomain) {
	header('X-Debug: ' . $_GET['__amp_source_origin'] . ' is an unrecognised source origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

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

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

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

	if (empty($name) OR empty($email)) {
		http_response_code(400);
		exit;
	}

	$recipient = "alexandr.kazakov1@gmail.com"; // замените на ваш email адрес
	$subject = "Email с сайта $thisDomain, AMP обучение, от посетителя: $name";

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

	$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 {
		http_response_code(500);
		exit;
	}

} else {
	http_response_code(403);
	exit;
}

?>

Демонстрацию работы обычной версии, можно посмотреть здесь.

Демонстрацию работы из google кэша, можно посмотреть здесь.

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

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

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

HTML
PHP

HTML

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Контактная форма на AMP странице — Стилизованная </title>
  <link rel="canonical" href="https://erweb.ru/learn/amp/amp-form-contact-style-1/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 Подключаем для форм нужные скрипты -->
  <!-- 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 Подключаем Иконки  --><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;
}
h1{
  margin: 0 auto 20px;
}
.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>Контактная форма на AMP странице — Стилизованная</h1>
    <p>Пример рабочей стилизованной контактной формы, используя PHP</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="https://erweb.ru/learn/amp/amp-form-contact-style-1/amp-mail.php" custom-validation-reporting="show-all-on-submit" target="_top" id="amp-form-contact__form" class="amp-form-contact__form">
        <!-- begin Form Item -->
        <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>
        <!-- end Form Item -->
        <!-- begin Form Item -->
        <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>
        <!-- end Form Item -->
        <!-- begin Form Item -->
        <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>
        <!-- end Form Item -->
        <!-- begin Form Item -->
        <div class="amp-form-contact__item">
          <textarea name="contact-message" class="amp-form-contact__textarea" placeholder="Ваше сообщение"></textarea>
        </div>
        <!-- end Form Item -->
        <!-- begin Form Item -->
        <div class="amp-form-contact__item">
          <button type="submit" class="amp-form-contact__submit">Отправить</button>
        </div>
        <!-- end Form Item -->
        <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

<?php

header('Cache-Control: private, no-cache');

$thisDomain = "https://erweb.ru"; // Заменить на https адрес вашего сайта.

$validOrigins = array('https://erweb-ru.cdn.ampproject.org', 'https://cdn.ampproject.org', 'https://amp.cloudflare.com', $thisDomain);

// ⇑ К блоку выше ⇑ Заменить https://⇒ erweb-ru ⇐.cdn.ampproject.org на адрес вашего сайта. Вместо точки, перед ru/com поставить дефис: «-». Например, получится так: youdomain-com.cdn.ampproject.org

if (!in_array($_SERVER['HTTP_ORIGIN'], $validOrigins)) {
	header('X-Debug: ' . $_SERVER['HTTP_ORIGIN'] . ' is an unrecognised origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

if ($_GET['__amp_source_origin'] != $thisDomain) {
	header('X-Debug: ' . $_GET['__amp_source_origin'] . ' is an unrecognised source origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

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

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

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

	if (empty($name) OR empty($email)) {
		http_response_code(400);
		exit;
	}

	$recipient = "alexandr.kazakov1@gmail.com"; // замените на ваш email адрес
	$subject = "Email с сайта $thisDomain, AMP обучение, от посетителя: $name";

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

	$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 {
		http_response_code(500);
		exit;
	}

} else {
	http_response_code(403);
	exit;
}

?>

Демонстрацию работы обычной версии, можно посмотреть здесь.

Демонстрацию работы из google кэша, можно посмотреть здесь.

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

Стилизовали форму:

Добавили свою валидацию. Сообщения валидатора не выводятся в Internet Explorer, но мы добавили красивую подсветку(красным цветом) при ошибке. Можно считать что в IE-11 работает валидация. В IE-10 и ниже, не работает. Также, убрали желтую подсветку input, при автозаполнении в chrome.
Добавили иконки от Font Awesome.
Стилизовали сообщения, об успехе или ошибке, при отправки письма. Также создали для данных сообщений кнопки закрыть(X), для них зарегистрировали обработчики событий клика.
Добавили простой pattern(только цифры можно вводить), для input телефона, пока не вижу возможности добавить рабочую маску для ввода номера.

Поместим в модальное окно нашу стилизованную форму. Возьмем код всплывающего окна, из данной темы AMP — Lightbox — Базовый вариант. Немного модифицируем(уберем шапку у модального окна, уберем max-width у формы, и еще несколько штрихов). Получился следующий код:

HTML
PHP

HTML

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Контактная форма на AMP странице, в модальном окне, используя PHP</title>
  <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;
}
h1{
  margin-bottom: 20px;
}
.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>Контактная форма на AMP странице, в модальном окне</h1>
    <p>Пример рабочей контактной формы, в модальном окне, на AMP странице, используя PHP</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

<?php

header('Cache-Control: private, no-cache');

$thisDomain = "https://erweb.ru"; // Заменить на https адрес вашего сайта.

$validOrigins = array('https://erweb-ru.cdn.ampproject.org', 'https://cdn.ampproject.org', 'https://amp.cloudflare.com', $thisDomain);

// ⇑ К блоку выше ⇑ Заменить https://⇒ erweb-ru ⇐.cdn.ampproject.org на адрес вашего сайта. Вместо точки, перед ru/com поставить дефис: «-». Например, получится так: youdomain-com.cdn.ampproject.org

if (!in_array($_SERVER['HTTP_ORIGIN'], $validOrigins)) {
	header('X-Debug: ' . $_SERVER['HTTP_ORIGIN'] . ' is an unrecognised origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

if ($_GET['__amp_source_origin'] != $thisDomain) {
	header('X-Debug: ' . $_GET['__amp_source_origin'] . ' is an unrecognised source origin');
	header('HTTP/1.0 403 Forbidden');exit;
}

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

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

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

	if (empty($name) OR empty($email)) {
		http_response_code(400);
		exit;
	}

	$recipient = "alexandr.kazakov1@gmail.com"; // замените на ваш email адрес
	$subject = "Email с сайта $thisDomain, AMP обучение, от посетителя: $name";

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

	$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 {
		http_response_code(500);
		exit;
	}

} else {
	http_response_code(403);
	exit;
}

?>

Демонстрацию работы обычной версии, можно посмотреть здесь.

Демонстрацию работы из google кэша, можно посмотреть здесь.

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

11 комментариев

Join the discussion and tell us your opinion.

Halili says:
On 21.02.2018 at 13:47

Привет, господин Казаков, прежде всего, похвала за ваш сайт и информацию о AMP, пришлось перевести все на немецкий, но также отлично отработал.
Г-н Казаков, пожалуйста, сделайте мне предложение относительно моего шаблона для WordPress.
1. Этот шаблон нуждается в современной структуре меню, ссылки отображаются легко и не выглядят хорошо на мобильных устройствах.
2. У меня есть проблема, что я не могу добавить мета-описание для каждой страницы или сообщения в блоге. Заголовок отображается, но имеет одинаковое мета-описание для всех.
3. CSS также нужно будет отредактировать, чтобы увидеть ссылки.
Вот ссылка на сайт: https://www.pflegetester.de
Я могу отправить вам файлы для шаблона по электронной почте.
Пожалуйста, пришлите мне расходы и ваш адрес электронной почты.
Я надеюсь, что перевод Google переводит все, что хорошо понятно.
с дружественным приветом
Б. Халили

Александр Казаков says:
On 21.02.2018 at 23:00

Hey Halili,
Your message is clear to me. I write in English, I hope it’s okay. I looked at your site.
You need to understand that I’m doing only front-end development. Then, I’ll make an AMP page, but in the future you will need to connect them to the back-end. In your case, the back-end is written in PHP.
I can search in my contacts who will make you back-end, or you can take it upon yourself. Or maybe you do not need a back-end?
* If it’s ok, then here’s my e-mail: alexandr.kazakov1@gmail.com
* Write your ideas, and perhaps you have a design layout of what your future site will look like. Maybe PSD (photoshop layout).
* I can only write a minimum cost of work: $ 300. I will say more precisely after I understand the problem completely.
Regards. All the best!
Alexander Kazakov

Денис says:
On 05.03.2018 at 10:18

Благодарю за очень полезный материал по AMP. На русском языке его мало. На английском вроде всё понятно в справке Гугл, но нюансы только у Вас освоил.
И пример Ваш очень подробный для новичков, чего не скажешь про справку Гугл. С помощью Вашей статьи легко завёл у себя форму 🙂

Александр Казаков says:
On 05.03.2018 at 16:37

Здравствуйте Денис.
Пожалуйста, рад быть полезным. Остается вам и самому писать полезные статьи по возможности 🙂

Сергей says:
On 16.05.2018 at 20:39

Добрый день!
Полезная статья, спасибо.
Столкнулся с проблемой скрола модального окна, в вашем примера такая же проблема: http://take.ms/Q70p6
Как ее можно победить?

Александр Казаков says:
On 16.05.2018 at 21:41

Здравствуйте, Сергей.
Действительно, увы, скролла там нет. Как победить неизвестно, можно пробовать разное, начать с того, чтобы попробовать amp-lightbox в CSS задать overflow-y: scroll; После попробовать, самой форме задать например max-height: 100vh; overflow-y: scroll; или например задать ей обертку и так попробовать решить проблему.
Сам постараюсь посмотреть в будущем как можно сделать. Это у вас срочная задача?
P.S. вообще с AMP нужно быть очень аккуратным, что бы согласиться на такую верстку, некоторые вещи могут работать нестабильно, а замены компонентам может не найтись.

Олег says:
On 11.06.2018 at 11:04

Доброго времени суток.
Хочу предложить маленький апдейтий:
Если добавить эту строчку в форму (в тег form):
on=»submit-success:amp-form-contact__form.clear»
http://joxi.ru/EA4RYPjHww5Bwm
то после успешной отправки формы все её поля очистятся и форму можно будет использовать сразу же повторно.

Александр Казаков says:
On 17.06.2018 at 21:58

Здравствуйте, Олег.
Я помню, что когда я писал данную статью, искал способ как очищать форму после отправки, но увы не нашел. Предполагаю, что то, про что вы говорите, не так давно добавили.
Не знаю когда смогу этим заняться и обновить, в любом случае, ваш комментарий здесь 🙂 благодарю.
Всего вам хорошего.

Николай says:
On 16.06.2018 at 01:45

Здравствуйте, созданием сайта занимаюсь совсем не долго, поэтому подскажите куда нужно вставить html & php. Я использую плагин amp на wordpress. Хочу на amp страницу добавить обратную связь с номером телефона и именем.

Александр Казаков says:
On 17.06.2018 at 22:06

Здравствуйте, Николай.
Увы, ничего не подскажу с wordpress плагином, полагаю, что данный плагин автоматом генерирует AMP страницы, данное решение не про то. Если в самом плагине не реализован функционал вставки произвольного кода, полагаю, что это будет требовать времени и определенных навыков. Можно попробовать написать разработчикам плагина и поинтересоваться.
Всего вам хорошего.

Виктор says:
On 17.10.2018 at 16:08

Перезвоните пожалуйста по телефону 8 (495) 646-70-38 Виктор

Сложность

Пример формы на AMP странице, используя PHP

Google AMP Cache

Доработаем наш код

HTML

PHP

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

HTML

PHP

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

HTML

PHP

HTML

PHP

Поиск

Из блога

Рубрики

Свежие записи

Комментарии

Полезное

11 комментариев

Leave A Comment Отменить ответ

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

Сложность

Google AMP Cache

Доработаем наш код

Поиск

Из блога

Рубрики

Свежие записи

Комментарии

Метки

Полезное

11 комментариев

Leave A Comment Отменить ответ