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

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

Подвижник. Freelancer/front-end разработчик

On Posted on by Александр Казаков to AMP

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.

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

  1. index.html
  2. 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);
?>

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

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

AMP форма

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

amp-form

Google AMP Cache

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

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

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

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

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

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

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 странице.

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

  1. index.html
  2. amp-mail.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

<!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

<!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 странице.

Tags

Рубрики

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

Комментарии

Метки

amp amp-html Avocode css Facebook freelancing google-amp Hi-Tech html Javascript lightbox php royalslider vk youtube БЭМ Бог Вконтакте Возлюби ближнего своего Гаджеты Киров Любовь к ближним Мудрость Обзор О богатых и бедных О жизни О религии Подвижник Поиск истины Природа Проповедь Евангелие Христос Центрирование background-image Центрирование текста вера смартфоны фриланс

Полезное

flickr

Посмотреть фотопоток на flickr