Creating a contact form using AMP-html with PHP

I have been trying to create a contact form using AMP-html with php. I just cannot get it to work. When I click the button, the error message shows from the amp-mustache template (but without the name field) - but I cannot see what the actual error is.

I have been looking at the amp documentation and this question, but cannot it get to work. AMP form submitting with post. I have used this as a basis for my code, and I cannot get it to work. I have moved the success template into the form and added the error template. Perhaps I should have commented on that question, but as it has an accepted answer, and I still have issues, I thought I should open a new question.

I was for a while trying with http, but now realise I need to use https so am trying on a domain with this, but no luck.

My code is exactly as follows except for the domain names.

<?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.example.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>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-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.example.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" />

    <div submit-success>
        <template type="amp-mustache">
            Success! Thanks for trying the
            <code>amp-form</code> demo! The name submitted was {{name}}
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            Error! Thanks {{name}} for trying
        </template>
    </div>
</form>
</body>
</html>

Once I know this simple form is working, I can actually complete the contact section and send the email.

Am I missing anything?

Thank you

Solution

I ran your code in a PHP sandbox and I found the following error in the Chrome devtools console

It looks like you just need to change action-xhr="#" to point to the actual path or full address of your PHP page e.g. action-xhr="//localhost:8080/contact.amp.html". AMP enforces special rules that make your page faster or, in this case, improve security practices on the web.

To see examples of valid amp-form markup, try looking at the form demos on AMP by Example.