AMP form submitting with post

Asked 27/12, 2016 at 13:33 Answered 25/10, 2019 at 19:21

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>

Maurine answered 27/12, 2016 at 13:33 Comment(0)

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>

Exospore answered 27/12, 2016 at 13:39 Comment(11)

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. – Maurine 27/12, 2016 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. – Exospore 27/12, 2016 at 14:41

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. – Exospore 27/12, 2016 at 14:45

Then I have to learn myself something about json and change all the forms... Thanks for your help! – Maurine 27/12, 2016 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? – Maurine 27/12, 2016 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! – Maurine 27/12, 2016 at 15:55

Now the error is "Unexpected token < in JSON at position 0" – Maurine 27/12, 2016 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. – Maurine 27/12, 2016 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. – Exospore 27/12, 2016 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! ;) – Maurine 27/12, 2016 at 18:39

But I wanted to submit a form that is handled by a non amp page :( – Quentinquercetin 30/7, 2018 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.

Konopka answered 25/10, 2019 at 19:21 Comment(0)

Recommended topics

Hot tags