AMP FormでPOST送信する方法
AMP-FormでのPOST送信はGET送信とは違い通常のHTML記述では動かず、AMP Formコンポーネントを使った機能が多くあります
AMP Formコンポーネントを読み込む
AMPページでフォームを利用する時は、AMP Formコンポーネント(amp-form.js)を読み込む必要があります
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
これを読み込まなかった場合、通常のHTMLフォームでのPOST送信記述が機能する様になりますがAMPテストツールでは「属性「action」はタグ「FORM [method=POST]」で使用できません。 」としてエラーとなりGoogle Search ConsoleでもエラーとなりAMPページとして有効になりませんので注意です
動作サンプル①は必要最低限の記述になります
POST送信のサンプルコード
AMPページでのPOST送信ではactionは許可されておらず代わりにaction-xhrを使います動作サンプルページの①になります
送信元AMPページ
<form method="POST" action-xhr="post-test.php" target="_top"> <input type="text" name="postText" value="AMPメモ"> <input type="submit" value="送信"> </form>
送信先URL（post-test.php）
//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');
//json出力
echo '[]';action-xhrとは
action-xhrを記述したフォーム送信は、ブラウザは新しいページに移動せずXHRリクエスト（AJAXリクエスト）をバックグラウンドで行います
内部的にはFetch API（古いブラウザの場合はXMLHttpRequest API）を使用しているとの事
リクエスト先URLでCORS securityを設定する
action-xhrからのリクエストはリクエスト先でCORS security in AMPが設定されている必要がある
なければコンソールにて「Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header」、「Response must contain the AMP-Access-Control-Allow-Source-Origin header」などのエラーが確認できると思います
一番単純な解決方法は「AMP-Access-Control-Allow-Source-Origin」にて許可するURLを設定します
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');リクエスト先URLでjsonを出力する
AMP-FormでのPOST送信は送信リクエストの返り値をjsonで受け取って動的に処理する事ができる様になっています
仮に、送信するだけで返り値が必要ない場合の処理でもjsonが出力されていないと「Failed to parse response JSON: SyntaxError: Unexpected end of JSON input」というコンソールエラーが発生していまいますので空のjsonを出力しておけばとりあえずOKです
//json出力
echo '[]';POSTが成功したかどうか確認表示するサンプルコード
AMP-Formでは送信リクエストが成功したか失敗したかで判定する処理（表示）をする事が可能です
submit-successでは成功時にのみ表示する内容を記述できsubmit-errorでは失敗時に表示する内容を記述できます
送信元AMPページ
<form method="POST" action-xhr="post-test.php" target="_top"> <input type="text" name="postText" value="AMPメモ"> <input type="submit" value="送信"> <div submit-success> <p>成功！</p> </div><div submit-error> <p>失敗！</p> </div> </form>
送信先URL（post-test.php）
//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');
//json出力
echo '[]';返り値のjsonを表示する
送信リクエストの返り値をjsonで受け取ってその内容を動的に処理（表示）する事が可能です
この処理にはamp-formコンポーネントとは別にamp-mustacheコンポーネントの読み込みが必要となります
<scriptasynccustom-template="amp-mustache"src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>送信元AMPページ
<form method="POST" action-xhr="post-test.php" target="_top"> <input type="text" name="post_text" value="AMPメモ"> <input type="submit" value="送信"> <div submit-success> <template type="amp-mustache"> <p>post_text:{{post_text}}</p> </template> </div> <div submit-error> <template type="amp-mustache"> <p>失敗！</p> </template> </div> </form>
送信先URL（post-test.php）
//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');
//送信データの受け取り
$post_text = htmlspecialchars($_POST['post_text'], ENT_QUOTES, 'UTF-8');
//配列に入れる
$return[post_text] = $post_text;
//jsonに変換
$return = json_encode($return,JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES);
//json出力
echo $return;