投稿日：2022年11月8日
Contact Form 7だけではありませんが、WordPressで作成したページは案外動作がモッサリしています。
問い合わせフォームや申し込みフォームを作成したとき、ユーザーの中には送信ボタンを複数回クリックするせっかちな人もいます。
▲下部のようにクルクル回るアイコンが表示されるとしばらく時間がかかります。
せっかちな人の中には送信ボタンを何回もクリックしてしまいます。
▲データベースに登録するプラグインを利用している場合、クリックした数だけ登録されてしまいます。
flamingoを利用してシリアルナンバーを取得している場合など、ID値が加算されてしまいます。
結果、1人のユーザーに複数個のID値が発行されてしまいます。
▲flamingoの受信メッセージ。
送信ボタンを複数回クリックした結果です。
予期せぬ内容が登録されてしまいます。
これを避けるには下記を記載したJavaScriptを読み込んで送信ボタンをクリックしたら、続けてクリックできないようにします。
let submitBtn = $("input[type='submit'].wpcf7-submit"); // 送信ボタン
submitBtn.click(function () { // 送信ボタンが押されてら
$(this).css({
pointerEvents: 'none', // ボタンを触れなくする
opacity: '0.5', // 半調にする
});
});
document.addEventListener('wpcf7invalid', function () {
// wpcf7invalid → 正しくない入力があったためにメール送信は行われなかった場合に発生する。
submitBtn.css({
pointerEvents: 'auto', // ボタン復活
opacity: '1', // 透明度を100%にする
});
}, false);
▲結果、送信ボタンが半調になり、クリックできなくなります。
flamingoのシリアルナンバーで番号管理していましたが、ある日突然、同じユーザーから複数の申し込みがあり、番号も複数個付与されてしまいました。
原因が分からず困惑していましたが、なんとなく自分も複数回クリックして気付いた次第です。
ボタンを複数回クリックできなくなるロジックも必要ですが、ユーザーを待たすことのないような仕組み作りもEFO（入力フォーム最適化）の要になってきます。
この辺も考慮しつつ、より良いサイト作成を心がけたいと思います。
なお、ソースコードはご自由に使っていただいても構いませんが、不備など起こっても責任は負いませんのでご了承ください。
最後まで読んでくださりありがとうございました。
