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

Сложность

AMP 80%

HTML 70%

CSS 60%

JavaScript 20%

PHP 30%

Используйте актуальные версии amp-компонентов, например уже есть amp-mustache-0.2.js. В примерах с кодом указаны версии актуальные на момент написания статьи.

Пример формы на 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 странице.

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

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 25.04.2019 at 17:37

Всё забываю написать. Для lightbox добавился атрибут scrollable, можно пробовать.

Олег 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 04.12.2018 at 23:42

Подскажите, пожалуйста. А как быть, если сайт в доменной зоне in.ua? При редактировании файла .php вы указали, что необходимо указать пробел перед доменной зоной. Я пробовала, у меня не выходит. Ставила пробел как перед in.ua так и перед in и перед ua
Пример, как делала:
-in.ua
-in-ua
У вас в примере, сайт erweb.ru и вы указали, что нужно сделать так: erweb-ru (вместо точки, поставить пробел).

Заранее, спасибо.

Александр Казаков says:

On 05.12.2018 at 22:51

Здравствуйте, Лада.

Вам стоит ссылку на ваш сайт прислать. Нужно смотреть какую ошибку выдаёт в консоли, может быть дело в другом.
Можете на мою почту скинуть: alexandr.kazakov1@gmail.com или здесь написать.

Лада says:

On 09.12.2018 at 01:50

Спасибо, Александр. Разобралась. Проблема была на стороне хостера. Они обновляли PHP версию и поэтому, скрипты работали с ошибкой.
Спасибо, за скрипты контактной формы для AMP.

gxllavk-sb says:

On 03.08.2019 at 23:25

я б поболел!!!

FerneKam says:

On 04.08.2020 at 21:24

Hello my friend.
Our employees wrote to you yesterday maybe…
Can I offer paid advertising on your site?

Александр Казаков says:

On 04.08.2020 at 21:31

Hi, where exactly did you write to? There are no ads on my site and will not be.

Евгений says:

On 05.12.2020 at 21:52

Доброго времени суток! Колега
…. я попытался прикрутить к вашей прекрасной форме
капчу на основе библиотеки amp-bind И казало бы, что всё прекрасно получилось…. НО!
письма перестали отправляться 🙁
PHP файл отправки Ваш!!! — оригинальный, подправлен только сайт и адрес почты …. без этой капчи отправляет нормально

может на досуге посмотрите…. плиз, а то я в вёрстке АМП новичок

ДА и в принципе сия доработка была бы прекрасным дополнением этой статьи 🙂
Гуглевская капча — медленная и касаемо V3 непонятная в своём алгоритме…. ЕЁ я в итоге и использую (см. рабочую стартовую страницу сайта covid23.ru )

исходник с РАБОЧЕЙ Bind-КАПЧЕЙ не отправляющей почту: https://covid23.ru/bind-recaptha-index.html
===============
Заранее благодарен

Павел says:

On 12.01.2021 at 01:36

Замечательный гайд до AMP. Напишите пожалуйста и о реализации установки формы пожертвований от ЮMoney (ранее Яндекс Деньги) на AMP страницах, а то такого до сих пор нет во всём Интернете.

Заранее спасибо.

Александр Казаков says:

On 12.01.2021 at 10:13

Пробуйте вставить через amp-iframe.

Walker Mcdaniel says:

On 31.01.2021 at 09:31

Happy New Year 2021!!! Are you working next week ?

Александр Казаков says:

On 12.02.2021 at 10:02

Thanks! Yes, I certainly continue to work.

Владимир says:

On 11.04.2021 at 18:41

у меня не работает форма.
два дня мучаюсь результат ноль.прошу взглянуть в чем проблема которую показывает консоль
https://cheapinsurancequotes.info/form.html

Александр Казаков says:

On 12.04.2021 at 00:04

Мой пример(на этой странице) у вас работает?

Владимир says:

On 12.04.2021 at 14:00

здравствуйте. загрузил на хостинг себе оба ваши файли без редактирования и также не работає

Александр Казаков says:

On 12.04.2021 at 00:16

Я посмотрел, попробовал отправить вашу форму и увидел в консоли ошибку 404, также порой 400. Ещё у вас невалидная AMP-страница, тестируйте только на валидной AMP-странице, проверьте валидность например добавив `#development=1` в адресную строку, а затем смотрите в консоли. Ещё обратите внимание на передаваемые параметры в url-запроса, AMP автоматически добавляет `form.php?__amp_source_origin=https%3A%2F%2Fcheapinsurancequotes.info` может быть ваш сервер из-за этого не может обработать запрос. Протестируйте POST-отправку через другой инструмент, например Postman.

Сложность

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

Google AMP Cache

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

HTML

PHP

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

HTML

PHP

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

HTML

PHP

HTML

PHP

Поиск

Рубрики

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

Комментарии

Полезное

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

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

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

Сложность

Google AMP Cache

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

Поиск

Рубрики

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

Комментарии

Метки

Полезное

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

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