知っている人も多いかと思いますが、当初AMPは問い合わせフォームなどのフォームは、ダメでしたが、2019年2月現在では、html5と同じようにフォームを作ることができます。
しかし、ちょっと特殊なので、調べないと・・・
とひたすら調べてテストした結果をまとめておきますね。
amp-formタグを使う
html5なら、<form>タグを使いますけど、ちょっと違います。
タグの使い方は下記のサイトに書いてあるけど・・・
正直、わからん・・・
そうだろう!
まあまあ落ち着いて・・・
method は同じ
method=“post”とするか、method=“get”にするかは、html5と同じ。
method=”get”は、urlの後ろにフォームの内容を追加するので、長くなると(問い合わせの内容が長いときなど)NGになってしまいます。短いものであればいいのですが・・・問い合わせフォームとしては、method=“post”としておいた方が良いと思います。
action が正直わからん!
散々、探したのですが、正解がわからんのです。
html5で使えるメールフォーム用のphpをとりあえず、次のように入れておいたら、動作はします。ampのチェックツールを使ってもエラーなし・・・
<form method="post" action-xhr="ampmail.php" target="_top" custom-validation-reporting="show-all-on-submit">
でも、正しいか不明なのです。
というのも・・・
https://github.com/ampproject/amp-by-example/blob/master/backend/amp-form.go を見てみると、
どうも、method=”get” のときは、
<form method="get" id="xhr-get" action="/form/search-html/get" action-xhr="/form/search-json/get" target="_blank">
のように、action と、 action-xhr を2つ使えるみたい・・・(正確には不明)
で、調べても、調べても・・・わからんのです。
問い合わせフォーム用php
探しに探して・・・
見つけたココ。
ということで、問い合わせフォーム用のphpを作って、テストしてみたら、送信できた!
問い合わせフォームの場合、リダイレクトした方がいいかも
amp-mustacheとcssを使って、送信したらフォームを非表示にすることができるけど、
フォームの送信ボタンがスクロールしないと見れない場合、フォームの部分が非表示になることで、送信後のメッセージを確認するために上にスクロールする必要があるんです。
要するに、送信すると・・・
こんな風に、送信後のメッセージが切れてしまうんです。
なぜなら、フォームが非表示になってしまうから。
ということで・・・
えっつ・・・終わり?
これしか、わからなかったの
でも、使えるから、いいのでは?
ただし、インターネットエクスプローラーは送信できない・・・
まあ、仕方ないでしょ。
だって、amp自体サポートしてないし・・・
なんてことだ!IE11のシェアが、14%もあるだと・・・
信じられない!
けど、「ブラウザ利用率」とGoogle検索してヒットしたサイトを見てみたら、なんと、インターネットエクスプローラーのシェアが14%近い。
う〜〜ん。
とりあえず、AMPページの表示はされるから、AMPでない問い合わせへのリンクも書いておくしかないかも・・・
だったら、ampやめちゃえば? って論理に
納得いかん!
なんだか、納得できませんが、とりあえず、出来ているのでよしとしましょう。
実際にサイトに反映された結果がコレ!