如何在AMP中创建电子邮件

时间:2018-01-14 16:36:09

标签: email-validation amp-html

我是一名新开发人员,致力于构建" mywebsite.com"有AMP代码的网站。我想创建一个页面,其中包含用户名,电子邮件地址和消息的输入字段。我希望用户能够输入这三个字段,并发送一封电子邮件,其中包含用户名,电子邮件地址和发送至" myemail@gmail.com"

的消息

以下是该页面的HTML:



<!doctype html>
<html AMP lang="en">
<head>
    <meta charset="utf-8">
    <title>mywebsite</title>
    <link rel="canonical" href="https://www.mywebsite.com/index.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">

	<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>
    <script async  src="https://cdn.ampproject.org/v0.js"></script>
    
	<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>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
  margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
  color: green;
}
form.amp-form-submit-error [submit-error] {
  color: red;
}
form.amp-form-submit-success.hide-inputs > input {
  display: none;
}
</style>

</head>

<body>

<form method="post"
  class="p2"
  action-xhr="MAILER.php"
  target="_top">
  
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Name..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      placeholder="Email..."
      required>
      <input type="text"
      class="block border-none p0 m0"
      name="message"
      placeholder="Message..."
      required>
  </div>
  <input type="submit"
    value="Send"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for your message.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

</body>
</html>
&#13;
&#13;
&#13;

这是我的php文件:

&#13;
&#13;
<?php

	$source_origin = trim($_REQUEST['__amp_source_origin']);//Security
	if($source_origin != "https://mywebsite.com"){
	echo "Not allowed origin";
	return;
	}
	header('AMP-Access-Control-Allow-Source-Origin: https://mywebsite.com');
	header('Content-Type: application/json; charset=UTF-8;'); 

    // variables start
	$name = "";
	$email = "";
	$message = "";
	
	$name =  trim($_REQUEST['name']);
	$email =  trim($_REQUEST['email']);
	$message =  trim($_REQUEST['message']);
	// variables end
	
	// email address starts
	$emailAddress = 'admin@mywebsite.com';
	// email address ends
	
	$subject = "Message From: $name";	
	$message = "<strong>From:</strong> $name <br/><br/> <strong>Message:</strong> $message";
	
	$headers = '';
	$headers .= 'From: '. $name . '<' . $email . '>' . "\r\n";
	$headers .= 'Reply-To: ' . $email . "\r\n";
	
	$headers .= 'MIME-Version: 1.0' . "\r\n";
	$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
	
	//send email function starts
	$result = mail($emailAddress, $subject, $message, $headers);

	if($result === true && !empty($emailAddress)){
		echo json_encode(array("name"=>$name,"email"=>$email));
	}else{
		header('Status: 400', TRUE, 400);
		echo json_encode(array('message'=>'This is error message'));
	}
	//send email function ends
?>
&#13;
&#13;
&#13;

在实际代码中,我的网站网址和电子邮件代替mywebsite.com和admin@mywebsite.com。

我已经反映了这个论坛上几个人的意见,不幸的是,这根本不起作用。没有消息表明邮件已成功发送,也没有错误消息。最后,没有电子邮件发送到admin@mywebsite.com。

我做错了什么?如何以AMP有效格式创建这个简单的网页?

提前谢谢大家!

1 个答案:

答案 0 :(得分:0)

MAILER.php:

<?php
if(!empty($_POST)){
$name=$_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: $name \n Message: $message";
$recipient = "admin@mywebsite.com";
$subject = "Message From: $name";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

       $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
        header("Content-type: application/json");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://mywebsite.com') .".cdn.ampproject.org");
        header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
        header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
        header("AMP-Redirect-To: https://mywebsite.com/index.html");
        header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin"); 
        echo json_encode(array('name' => $name));
        exit;
}
?>
  

https://mywebsite.com/替换为您的域名网址