広告

AMPで問い合わせフォーム

amp-form-img WEB
この記事は約4分で読めます。

知っている人も多いかと思いますが、当初AMPは問い合わせフォームなどのフォームは、ダメでしたが、2019年2月現在では、html5と同じようにフォームを作ることができます。

しかし、ちょっと特殊なので、調べないと・・・

とひたすら調べてテストした結果をまとめておきますね。

amp-formタグを使う

html5なら、<form>タグを使いますけど、ちょっと違います。

タグの使い方は下記のサイトに書いてあるけど・・・

Documentation:
Allows you to create forms to submit input fields in an AMP document.
女性の顔

正直、わからん・・・

そうだろう!

まあまあ落ち着いて・・・

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

探しに探して・・・

見つけたココ。

AMP Form to work with PhP
I am trying to setup a page with a contact form using AMP: The form has only 4 fields: Name Email: How can we help? Phon...

ということで、問い合わせフォーム用のphpを作って、テストしてみたら、送信できた!

問い合わせフォームの場合、リダイレクトした方がいいかも

amp-mustacheとcssを使って、送信したらフォームを非表示にすることができるけど、

フォームの送信ボタンがスクロールしないと見れない場合、フォームの部分が非表示になることで、送信後のメッセージを確認するために上にスクロールする必要があるんです。

要するに、送信すると・・・

こんな風に、送信後のメッセージが切れてしまうんです。

ampフォーム送信後

なぜなら、フォームが非表示になってしまうから。

フォームが非表示に

女子

ということで・・・

男子

えっつ・・・終わり?

 

これしか、わからなかったの
でも、使えるから、いいのでは?

ただし、インターネットエクスプローラーは送信できない・・・

まあ、仕方ないでしょ。

だって、amp自体サポートしてないし・・・

amp対応ブラウザ

なんてことだ!IE11のシェアが、14%もあるだと・・・

信じられない!

けど、「ブラウザ利用率」とGoogle検索してヒットしたサイトを見てみたら、なんと、インターネットエクスプローラーのシェアが14%近い。

う〜〜ん。

とりあえず、AMPページの表示はされるから、AMPでない問い合わせへのリンクも書いておくしかないかも・・・

だったら、ampやめちゃえば? って論理に

納得いかん!

なんだか、納得できませんが、とりあえず、出来ているのでよしとしましょう。

実際にサイトに反映された結果がコレ!

 

https://japanbrainfunctionstrainingcenter.xyz/contact/