# 送信時の遅延または二重送信
> Formspree Docs · トラブルシューティング · 2024年4月11日
HTMLフォームで「送信」ボタンをクリックすると、「ありがとう」ページにリダイレクトされるまでの短い間、不安を感じた経験があるかと思います。その時間はほんの数秒ですが、「フォームが機能していないのでは？」「クリックは正常に受け付けられたのか？」「インターネット接続が切れた？」といった疑問が生じることがあります。パニックになったユーザーが送信ボタンを再度クリックしてしまい、重複送信が発生することもあります。
この遅延はユーザー体験を損なうだけでなく、2回目のクリックによってFormspreeフォームへのリクエストが重複し（使用量クォータにカウントされます）、送信リストにも重複レコードが作成されてしまいます（後で削除が必要になります）。本ガイドでは、この問題が発生する理由と、短いJSスニペットを使って解決する方法を説明します。
## **なぜこのような問題が起きるのか？**
Formspreeフォームで「送信」ボタンをクリックした後に発生する遅延は、Formspree自体の問題ではなく、Webフォームの仕組みによるものです。処理の流れを簡単に説明すると：ユーザーが「送信」ボタンをクリックすると、ブラウザはフォームデータをバックエンドにHTTPリクエストとして送信します。このリクエストはインターネットを通じてバックエンドに到達しますが、その途中でネットワーク接続の遅延が発生することがあります。
リクエストがサーバーに到達すると、処理が行われます。これには情報の検証、データベースへの保存、確認メールの送信などが含まれます。この処理にも時間がかかりますが、通常はネットワーク転送よりも短い時間です。処理が完了すると、バックエンドは確認レスポンスを返し、ユーザーを「ありがとう」ページにリダイレクトします。
リクエストがサーバーとの間を往復する時間が、ユーザー側での「送信」ボタンクリック後の遅延を引き起こします。さらに、モバイルデータネットワークのような低速な接続では、リクエストの遅延がさらに大きくなります。
遅延の様子は以下のとおりです：
## **どのように解決できるか？**
HTTPリクエストの処理時間そのものを短縮することはできませんが、ユーザーの待機体験を改善することは可能です。React（またはNext/Gatsby）ベースのプロジェクトを開発している場合は、[Formspree Reactライブラリ](/articles/working-with-react/the-formspree-react-library/)の`useForm`フックが返す`state`オブジェクトを使用して、フォームが送信中かどうかを確認し、送信ボタンを無効化できます。ただし、バニラJSの場合は、このチェックを自分で実装する必要があります。
そのためには、Webページでフォームが送信されるたびに発火する[フォーム送信イベント](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)を監視する必要があります。このイベントを受け取ったら、送信ボタンを無効化したり、フォームデータがバックグラウンドで処理中であることをユーザーに伝えるUI要素（スピナーなど）を表示したりします。
> 注意：「送信」ボタンの[クリックイベント](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)を使って同様のロジックを実装することもできますが、フォームの`submit`イベントの方が、送信ボタンのクリック、フィールド編集中の`Enter`キー押下、`form.requestSubmit()`メソッドによるプログラムからの送信など、あらゆる送信方法をより確実に捕捉できます。
### **送信時にボタンを無効化する**
バックグラウンド処理をユーザーに伝える最もシンプルな方法は、送信ボタンを無効化し、オプションでボタンにホバーした際に待機カーソルを表示することです。見た目は以下のようになります：
これを実装するには、CSSでボタンの無効状態に対してグレーアウトした背景と`wait`カーソルを設定します。次に、HTMLフォームの`submit`イベントを監視し、`submit`イベントが発生したときに送信ボタンの`disabled`属性を`true`に設定します。
HTMLファイルの例は以下のとおりです：
```html
```
この方法はシンプルで、プラットフォームネイティブのカーソルローダーを利用できます。たとえば、Windowsユーザーには以下のように表示されます：
モバイルデバイスではカーソルは表示されませんが、送信ボタンはグレーアウトされるため、ユーザーはタップが受け付けられたことを確認でき、再度タップすることを防げます：
### **送信時にボタンを別のUI要素に置き換える**
別の方法として、フォーム送信時に送信ボタンを完全に非表示にして、スピナーなどのUI要素を代わりに表示することもできます：
このフォームのコードも同様にシンプルです：
```html
```
送信ボタンの直下に2つの``（入れ子構造）を追加し、ローダーをコンテナ内に中央配置するCSSと、ローダーのアニメーション用キーフレームを設定します。最後に、フォーム送信イベントを監視して送信ボタンを非表示にしつつローダーを表示するJSスクリプトを追加します。
この方法では、ローダー要素のUIデザインをより柔軟に制御できます。また、プラットフォームを問わず一貫したデザインのローダーを表示することが可能です。
> フォーム送信イベントリスナーを追加するスクリプトは、イベントリスナーを設定するためにHTMLのDOMにアクセスする必要があります。そのため、DOMの読み込みが完了した後にのみコードが実行されるよう注意してください。インラインスクリプトを使用する場合は、上記の例のように`
`タグの直前に追加してください。外部スクリプトを使用する場合は、`