7

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>
Community
  • 1
  • 1
Patrick de Graaf
  • 125
  • 1
  • 1
  • 6

2 Answers2

7

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>
yivi
  • 42,438
  • 18
  • 116
  • 138
  • Thanks for your reply. So if I'm right, XHR must be used for AMP forms? There's no other way to submit a form with post-method? I've read the example page, but there's no example of the JSON-code. – Patrick de Graaf Dec 27 '16 at 14:39
  • There is no example because the json is free-form. You can have any structure you want, you'll use the json values on your templates (which you'd need to write before hand). When using these amp enabled forms all is done via ajax. – yivi Dec 27 '16 at 14:41
  • 1
    The example is right there where it says: >> For example, if the server sends `{"foo": "bar"}`, you can use use `{{foo}}` in the template to render bar. – yivi Dec 27 '16 at 14:45
  • Then I have to learn myself something about json and change all the forms... Thanks for your help! – Patrick de Graaf Dec 27 '16 at 14:48
  • When I copy the whole example you gave me, it only returns 'null' without even show the form. Maybe this is because of the headers? – Patrick de Graaf Dec 27 '16 at 15:36
  • The if(isset($_POST['submitlogin'])) part is not working, so nothing is done after submitting. My problem is that I want to compare values and/or put them in a sql-database with php. Again, thank you very much for all your help! – Patrick de Graaf Dec 27 '16 at 15:55
  • Now the error is "Unexpected token < in JSON at position 0" – Patrick de Graaf Dec 27 '16 at 15:59
  • Now I receive back {{name}} in the amp-mustache. How do I get that value in a php value? Because I want to store it in the sql-database. – Patrick de Graaf Dec 27 '16 at 16:10
  • I don't understand. And I think you don't fully understand whats going on. You have access to the sent data inside the first `if`, you process it there, and you send a JSON back (with the original data or whatever else you want) which you use in one of your templates in the sending page. – yivi Dec 27 '16 at 16:13
  • Yes, I think i don't understand it fully. I thought it would be easy to make everything AMP valide. For now I'll wait for AMP to get better and don't go any further with it. Again, thank you very much for helping me! ;) – Patrick de Graaf Dec 27 '16 at 18:39
  • But I wanted to submit a form that is handled by a non amp page :( – Jakob Alexander Eichler Jul 30 '18 at 13:39
-1

FYI, if you want a quick solution to this then just remove the amp-form script. Forms will work normally. Only fall back is the page won't be amp-validated which isn't a big deal. You still get speed increases. Only thing that won't happen is that the form pages won't be added to google cdn for distribution across their content networks which really only effects mobile users. Then if you really want, go in and learn the the methods presented in this page.

Bradley W. Myers
  • 61
  • 1
  • 5