こんにちは👋
手元環境で簡単に試してみました。以下の方法でどうでしょうか？
//Contact Form 7 で送信ボタンを連続クリックされることによる多重送信を防ぐカスタマイズ。 JavaScriptで送信時にボタンを無効化
document.addEventListener('wpcf7submit', function(event) {
var form = event.target;
var submitBtn = form.querySelector('input[type="submit"], button[type="submit"]');
if(submitBtn) {
submitBtn.disabled = false; // 完了時は有効化
}
}, false);
document.addEventListener('wpcf7beforesubmit', function(event) {
var form = event.target;
var submitBtn = form.querySelector('input[type="submit"], button[type="submit"]');
if(submitBtn) {
submitBtn.disabled = true; // 送信時に無効化
}
}, false);
ポイント
- お問い合わせフォームで、入力→送信ボタンクリック→送信が完了したら、送信ボタンが再度有効になります。
- ページをリロードするまで、送信ボタンを無効にしたい場合には、前半部分のコード（完了時は有効化）を削除してください。
上記のカスタマイズコードは、「Simple Custom CSS and JS」プラグイン等で実装するのが比較的簡単だと思います。
もっと良い方法が他の方から助言があるかもしれませんが、ご確認いただけると嬉しいです。
こちら Contact Form 7 の公式見解です。ご参考まで。
連続送信を阻止することが最悪なアイデアである理由
三好さんの公式見解を拝読して。
なるほど納得でした。
そうした問題 (送信できたのかどうか心配) を避ける方法として、私がクライアント様のサイトで実施している方法は以下。
- 固定ページで「サンキューページ」を用意しておく
(キャリアメール使用時の受信拒否や迷惑メールフォルダ落ちなどに関する内容も記載しています)
- 送信ボタン押下後、サンキューページへリダイレクトがかかるよう処理
参考になれば。
皆様
ありがとうございます。
Javascriptを駆使して制御をかける方法は早々に思いついていたものの、
そもそも公式的な機能として用意されていてもおかしくないな。と思い質問に至りました。
これについては、公式見解を読ませていただき納得いたしました。
ただ、反論するわけではありませんが、私の運営しているサイトの特性上、
かなり年配の、PCやスマホに不慣れなユーザーが多数おり、
ボタンとあらばダブルクリックしてしまうような方々もいるため、
強制的に制御を入れざるえません。
今回は、皆様のご意見を参考にJavaScriptを使った制御を行うことにしました。
大変ありがとうございました！
ご確認ありがとうございます。補足させてください。
三好さんの公式見解の説明にありますが、受け取り方や感じ方はそれぞれなので、JS で制御する実装を加える場合でも、お問い合わせページ（固定ページ）に説明書きを追加するなどご検討ください。
「自動返信メール をご確認ください」とか。
