Menu
I've a website for years with a few forms to login etc. Recently I made it all Google's AMP proof, but the forms stopped working. I'm searching for days now, but I can't find the right answer.
First I included all the necessary scripts and code, just like on this page. After that, the first error came up: "Form submission failed:: Response must contain the AMP-Access-Control-Allow-Source-Origin header".
Then I added headers to the page. After that, the first error is gone, but the second error appears: "Form submission failed:: Unexpected token < in JSON at position 0". I've read here about this, but it contains no real solution for me.
At this stage I'm stuck and I think I'm on the wrong path with such a simple form like this. I simply want to echo the input... Can you please help me?
Kind regards,
Patrick
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://www.domain.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
?>
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="canonical" href="https://www.domain.com/test.php"/>
<title>AMP form</title>
</head>
<body>
<?php
if(isset($_POST['submitlogin']))
{
$name = $_POST['name'];
echo $name;
} ?>
<form method="post" action-xhr="#" target="_top">
Name:<input type="text" name="name" />
<input type="submit" name="submitlogin" value="Submit" />
</form>
</body>
</html>
436
action-xhrSpecifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR). An XHR request (sometimes called an AJAX request) is where the browser would make the request without a full load of the page or opening a new page.
When the POST method is used, then things work a bit differently. In regular HTML forms, a form with a POST method will cause a full page navigation to the URL defined in the action. AMP does things differently with its amp-form component.
Step #1: Add the amp-form script to your <head>. amp-form is an extended AMP component, so you must include an additional script within the <head> your AMP HTML document in order to use forms. The following form returns results from WordPress’s internal search functionality.
An easy way to detect for amp-form doing the submission is to use wp_is_json_success (). Given an existing form processing logic that happens at template_redirect, where the method sets a $success variable based on whether or not the submission was accepted, you can incorporate the following example code using wp_send_json ():
Before creating a <form>, you must include the required script for the <amp-form> extension, otherwise your document will be invalid. If you're using input tags for purposes other than submitting their values (e.g., inputs not inside a <form> ), you do not need to load the amp-form extension.
To put it simply: you can't just echo the input.
From the docs:
Use the action-xhr attribute to submit the form via XMLHttpRequest (XHR). You can use amp-mustache templates to show custom success or error messages, using data sent by the server endpoint as JSON. For example, if the server sends {"foo": "bar"}, you can use use {{foo}} in the template to render bar.
So since you are using the action-xhr, you should be returning a JSON, and update the form template accordingly.
Check out this.
Full example, from your code:
<?php
if(isset($_POST['submitlogin']))
{
$name = isset($_POST['name']) ? $_POST['name'] : '' ;
$output = [
'name' => $name
];
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: https://www.domain.com");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
echo json_encode($output);
die();
}
?>
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="canonical" href="https://www.domain.com/test.php"/>
<title>AMP form</title>
</head>
<body>
<form method="post" action-xhr="#" target="_top">
Name:<input type="text" name="name" />
<input type="submit" name="submitlogin" value="Submit" />
</form>
<div submit-success>
<template type="amp-mustache">
Success! Thanks for trying the
<code>amp-form</code> demo! The name submited was {{name}}
</template>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
