AMP Form submission redirect or response
Good morning, I have a form on a test AMP page (is AMP validate) and the form works: I receive the email with result (I use a php to handle it). I don't know (I did some try but I think I still missing an example) the syntax for let the AMP page responce correctly (now I get "Subscription failed!" but I do get the email) or redirect after submission. Here my example:
AMP page with form (I receive form result after submission but I don't know how to redirect or get "Subscription successful!" message)
Non AMP page with form (I receive form result and it redirect correctly)
action-xhr file destination code: Code of the php here in txt format (the file that handle the form result)
Any example will be great for me also only about redirect. Thank you
Answer
You can redirect user after successful submission, however it can only be done if you are submitting values to a secure URL (like https://www.example.com).
HTML With AMP-Form
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</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>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<form target="_top" action-xhr="https://test.php" method="post" name="test">
<input type="text" name="name" value="ABRA KA DABRA!">
<input type="submit"/>
</form>
</body>
</html>
SUBMISSION REQUEST HANDLER CODE IN PHP
<?php
if(!empty($_POST))
{
$name = $_POST['name'];
/*/ this is the email we get from visitors*/
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
$redirect_url = 'https://example.com/thank-you';
/*//-->MUST BE 'https://';*/
header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: ".$domain_url);
/*/ For Sending Error Use this code /*/
if(!mail("[email protected]" , "Test submission" , "email: $name <br/> name: $name" , "From: $name\n ")){
header("HTTP/1.0 412 Precondition Failed", true, 412);
echo json_encode(array('errmsg'=>'There is some error while sending email!'));
die();
}
else
{
/*/--Assuming all validations are good here--*/
if( empty($redirect_url))
{
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
}
else
{
header("AMP-Redirect-To: ".$redirect_url);
header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin"); }
echo json_encode(array('successmsg'=>$_POST['name'].'My success message. [It will be displayed shortly(!) if with redirect]'));
die();
}
}?>