Сложность
Пример формы на AMP странице, используя PHP
Первым делом напишем пример простой AMP формы, используя PHP. Убедимся, что нет ошибок в консоли. К этому моменту, вы должны уже знать кое-что о AMP и понимать базовый AMP шаблон страницы, а также помнить, что в AMP используется только https.
Создадим пустую папку с нашим проектом. В данной папке, создадим два файла:
- 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 кэша:
<!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
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);
?>
Контактная форма
Отлично! Теперь мы готовы реализовать рабочую контактную форму, на AMP странице.
Вновь, создадим пустую папку с нашим проектом. В данной папке, создадим два файла:
- 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</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
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;
}
?>
Контактная форма - Стилизованная
Теперь создадим стилизованную контактную форму, с красивым выводом сообщений, об ошибке или успехе, при попытке отправки письма. Сделаем свою валидацию. Добавим иконки в input.
<!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
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;
}
?>
Стилизовали форму:
- Добавили свою валидацию. Сообщения валидатора не выводятся в Internet Explorer, но мы добавили красивую подсветку(красным цветом) при ошибке. Можно считать что в IE-11 работает валидация. В IE-10 и ниже, не работает. Также, убрали желтую подсветку input, при автозаполнении в chrome.
- Добавили иконки от Font Awesome.
- Стилизовали сообщения, об успехе или ошибке, при отправки письма. Также создали для данных сообщений кнопки закрыть(X), для них зарегистрировали обработчики событий клика.
- Добавили простой pattern(только цифры можно вводить), для input телефона, пока не вижу возможности добавить рабочую маску для ввода номера.
Контактная форма - Модальное окно
Поместим в модальное окно нашу стилизованную форму. Возьмем код всплывающего окна, из данной темы AMP — Lightbox — Базовый вариант. Немного модифицируем(уберем шапку у модального окна, уберем max-width у формы, и еще несколько штрихов). Получился следующий код:
<!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
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;
}
?>
Получился отличный вариант рабочей контактной формы в модальном окне, на валидной по стандарту AMP странице.
Привет, господин Казаков, прежде всего, похвала за ваш сайт и информацию о AMP, пришлось перевести все на немецкий, но также отлично отработал.
Г-н Казаков, пожалуйста, сделайте мне предложение относительно моего шаблона для WordPress.
1. Этот шаблон нуждается в современной структуре меню, ссылки отображаются легко и не выглядят хорошо на мобильных устройствах.
2. У меня есть проблема, что я не могу добавить мета-описание для каждой страницы или сообщения в блоге. Заголовок отображается, но имеет одинаковое мета-описание для всех.
3. CSS также нужно будет отредактировать, чтобы увидеть ссылки.
Вот ссылка на сайт: https://www.pflegetester.de
Я могу отправить вам файлы для шаблона по электронной почте.
Пожалуйста, пришлите мне расходы и ваш адрес электронной почты.
Я надеюсь, что перевод Google переводит все, что хорошо понятно.
с дружественным приветом
Б. Халили
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
Благодарю за очень полезный материал по AMP. На русском языке его мало. На английском вроде всё понятно в справке Гугл, но нюансы только у Вас освоил.
И пример Ваш очень подробный для новичков, чего не скажешь про справку Гугл. С помощью Вашей статьи легко завёл у себя форму 🙂
Здравствуйте Денис.
Пожалуйста, рад быть полезным. Остается вам и самому писать полезные статьи по возможности 🙂
Добрый день!
Полезная статья, спасибо.
Столкнулся с проблемой скрола модального окна, в вашем примера такая же проблема: http://take.ms/Q70p6
Как ее можно победить?
Здравствуйте, Сергей.
Действительно, увы, скролла там нет. Как победить неизвестно, можно пробовать разное, начать с того, чтобы попробовать amp-lightbox в CSS задать overflow-y: scroll; После попробовать, самой форме задать например max-height: 100vh; overflow-y: scroll; или например задать ей обертку и так попробовать решить проблему.
Сам постараюсь посмотреть в будущем как можно сделать. Это у вас срочная задача?
P.S. вообще с AMP нужно быть очень аккуратным, что бы согласиться на такую верстку, некоторые вещи могут работать нестабильно, а замены компонентам может не найтись.
Всё забываю написать. Для lightbox добавился атрибут scrollable, можно пробовать.
Доброго времени суток.
Хочу предложить маленький апдейтий:
Если добавить эту строчку в форму (в тег form):
on=»submit-success:amp-form-contact__form.clear»
http://joxi.ru/EA4RYPjHww5Bwm
то после успешной отправки формы все её поля очистятся и форму можно будет использовать сразу же повторно.
Здравствуйте, Олег.
Я помню, что когда я писал данную статью, искал способ как очищать форму после отправки, но увы не нашел. Предполагаю, что то, про что вы говорите, не так давно добавили.
Не знаю когда смогу этим заняться и обновить, в любом случае, ваш комментарий здесь 🙂 благодарю.
Всего вам хорошего.
Здравствуйте, созданием сайта занимаюсь совсем не долго, поэтому подскажите куда нужно вставить html & php. Я использую плагин amp на wordpress. Хочу на amp страницу добавить обратную связь с номером телефона и именем.
Здравствуйте, Николай.
Увы, ничего не подскажу с wordpress плагином, полагаю, что данный плагин автоматом генерирует AMP страницы, данное решение не про то. Если в самом плагине не реализован функционал вставки произвольного кода, полагаю, что это будет требовать времени и определенных навыков. Можно попробовать написать разработчикам плагина и поинтересоваться.
Всего вам хорошего.
Подскажите, пожалуйста. А как быть, если сайт в доменной зоне in.ua? При редактировании файла .php вы указали, что необходимо указать пробел перед доменной зоной. Я пробовала, у меня не выходит. Ставила пробел как перед in.ua так и перед in и перед ua
Пример, как делала:
-in.ua
-in-ua
У вас в примере, сайт erweb.ru и вы указали, что нужно сделать так: erweb-ru (вместо точки, поставить пробел).
Заранее, спасибо.
Здравствуйте, Лада.
Вам стоит ссылку на ваш сайт прислать. Нужно смотреть какую ошибку выдаёт в консоли, может быть дело в другом.
Можете на мою почту скинуть: alexandr.kazakov1@gmail.com или здесь написать.
Спасибо, Александр. Разобралась. Проблема была на стороне хостера. Они обновляли PHP версию и поэтому, скрипты работали с ошибкой.
Спасибо, за скрипты контактной формы для AMP.
я б поболел!!!
Hello my friend.
Our employees wrote to you yesterday maybe…
Can I offer paid advertising on your site?
Hi, where exactly did you write to? There are no ads on my site and will not be.
Доброго времени суток! Колега
…. я попытался прикрутить к вашей прекрасной форме
капчу на основе библиотеки amp-bind И казало бы, что всё прекрасно получилось…. НО!
письма перестали отправляться 🙁
PHP файл отправки Ваш!!! — оригинальный, подправлен только сайт и адрес почты …. без этой капчи отправляет нормально
может на досуге посмотрите…. плиз, а то я в вёрстке АМП новичок
ДА и в принципе сия доработка была бы прекрасным дополнением этой статьи 🙂
Гуглевская капча — медленная и касаемо V3 непонятная в своём алгоритме…. ЕЁ я в итоге и использую (см. рабочую стартовую страницу сайта covid23.ru )
исходник с РАБОЧЕЙ Bind-КАПЧЕЙ не отправляющей почту: https://covid23.ru/bind-recaptha-index.html
===============
Заранее благодарен
Замечательный гайд до AMP. Напишите пожалуйста и о реализации установки формы пожертвований от ЮMoney (ранее Яндекс Деньги) на AMP страницах, а то такого до сих пор нет во всём Интернете.
Заранее спасибо.
Пробуйте вставить через amp-iframe.
Happy New Year 2021!!! Are you working next week ?
Thanks! Yes, I certainly continue to work.