「フォームを送信できません」エラー

「Unable to submit form」というタイトルのエラー画面が表示されましたか？表示例は以下のとおりです：

Screen_Shot_2020-07-12_at_10.38.00_AM.png

このような画面が表示された場合、本記事で問題の解決方法をご案内します。

何が起きたのか？

このエラー画面が表示されている場合、以下の2つのことが起きています：

リクエストに、フォームが送信されたウェブページのURLを含むHTTPの「referer」ヘッダーがありません。
フォームのaction属性に、メールアドレスを含むFormspree URLが設定されています。例：https://formspree.io/email@domain.com

フォームのaction URLの識別にメールアドレスのみが使われている場合、Formspreeはフォームを識別するために「referer」ヘッダーに含まれる追加情報が必要です。このメールベースのURLはFormspreeとの連携の初期の方法でした。現在はURLにフォームIDを使用しているため、「referer」ヘッダーに依存しなくなっています。

推奨される解決策

フォームのオーナーとして、https://formspree.io/email@domain.comのようなaction属性を使用している場合は、以下の手順をお勧めします：

https://formspree.io/registerで無料アカウントを作成してください。
新しいフォームを作成してください。一意のフォームIDを含むaction URLが発行されます。
以前のメールベースのURLの代わりに新しいURLを使用してください。

これにより、すべてのブラウザおよびウェブサイトのすべてのページでフォームが正常に動作するようになります。また、フォームのHTMLにメールアドレスを公開する必要がなくなり、セキュリティ上のリスクも解消されます。

既存の送信データを新しいフォームに移行したい場合は、サポートチームにリクエストを送信していただければ対応いたします。

レガシーな解決方法

フォームのオーナーとしてaction属性を変更できない場合は、以下のトラブルシューティング手順をお試しください。ただし、上記の推奨される解決策のようにURLを変更しない限り、一部のブラウザではフォームが動作しない可能性があります（後述参照）。

HTMLファイルをブラウザで直接開いてローカルでテストしている場合にこのエラーが発生することがあります。この場合、URLがhttp://やhttps://ではなくfile:///で始まります。ブラウザはこのようなページを通常のウェブリソースとして扱わないため、「referer」ヘッダーが送信されません。フォームページをホストするためにローカルウェブサーバーを起動してみてください。MacまたはLinuxをお使いの場合は、ターミナルアプリケーションで以下のコマンドを実行してください：
```
python -m SimpleHTTPServer 8000
```
その後、ブラウザでhttp://localhost:8000にアクセスしてください。

Windowsをお使いの場合は、以下のウェブサーバーのいずれかをインストールしてみてください：Web server for Chrome、thttpd、またはQuickshare。
フォームがhttp://プロトコルのURLに送信するように設定されているが、フォームがhttps://プロトコルでアクセスされるページにホストされている場合、「referer」ヘッダーが送信されません。action URLを更新する必要があります。この場合は上記の推奨される解決策をお勧めします。
Braveブラウザをお使いの場合、Braveが「referer」ヘッダーをブロックすることがあります。この問題はBraveチームに報告済みです。Braveチームへの注目を高めるために、ぜひアップボートにご協力ください。