WordPressでサイト構築を行なっている、もしくはクライアント様のサイトの修正を行なっている方は必見！
超有名なフォーム生成プラグイン「Contact Form 7」を使っている場合、
フォーム入力後に送信ボタンを押したけど反応がなくて何度もクリックしてしまう。
その結果、同じ内容の問い合わせが来てしまって困っている。
というような事があります。
その問題を解決していきます。
それではいってみましょう！
目次
ボタンを複数回押せないように制御する
let submitBtn = $("input[type='submit'].wpcf7-submit"); // 送信ボタンを定義
submitBtn.click(function () { // 送信ボタンをクリックしたら
$(this).css({
pointerEvents: 'none', // ポインターイベントを無くしてクリックできないようにする
background: '#a3a3a3', // ボタンの背景色をグレーにして視覚的にも分かるようにする
});
$(this).parent().css({
cursor: 'not-allowed', // 親要素に対してカーソル変更をする
});
});contact form 7で出力されている送信ボタンに対してcssで制御をかけています。
- 送信ボタンをクリックした時に、ボタン自体をpointerEventsでクリックできないようにする
- さらに、ボタン自体の色を変えることで視覚的にもクリックできないという事を認識させる
- ボタンの親要素に対してcursor:pointerから変更する事でカーソルにもクリックできない要素を表現する
という事をやっています。
背景色はクライアント様の仕様等に合わせて変更してください。
入力エラー時に元に戻す処理をする
document.addEventListener('wpcf7invalid', function () {
// wpcf7invalid → 正しくない入力があったためにメール送信は行われなかった場合に発生する。
submitBtn.css({
pointerEvents: 'auto',
background: '#3257B7',
});
submitBtn.parent().css({
cursor: 'auto',
});
}, false);前項のボタンを複数回押せないように制御するだけだとフォームに入力不備があった場合に送信ボタンをクリックできなくなってしまうので、入力不備等があった場合は送信ボタンを再度アクティブ化します。
背景色はクライアント様の仕様等に合わせて変更してください。
まとめ
上記二つをまとめるとこのようなコードになります。
<script>
let submitBtn = $("input[type='submit'].wpcf7-submit"); // 送信ボタンを定義
submitBtn.click(function () { // 送信ボタンをクリックしたら
$(this).css({
pointerEvents: 'none', // ポインターイベントを無くしてクリックできないようにする
background: '#a3a3a3', // ボタンの背景色をグレーにして視覚的にも分かるようにする
});
$(this).parent().css({
cursor: 'not-allowed', // 親要素に対してカーソル変更をする
});
});
document.addEventListener('wpcf7invalid', function () {
// wpcf7invalid → 正しくない入力があったためにメール送信は行われなかった場合に発生する。
submitBtn.css({
pointerEvents: 'auto',
background: '#3257B7',
});
submitBtn.parent().css({
cursor: 'auto',
});
}, false);
</script>フォーム構築しているとたまに遭遇する「何回も送信ボタンが押せて困っちゃうんだよね」というクライアント様の問題解決になれば幸いです。
Contact Form 7は超有名なフォーム生成プラグインなのできっと一度は遭遇した事があるかと思います。
もしContact Form 7をお使いのサイトで送信ボタンの複数回クリック問題があればぜひ参考にしてみてください。
ではまた！
当記事で紹介、及び記載している内容は個人的考えに基づいております。
責任は負いかねますので、お試しの際は必ずバックアップを取った上で自己責任のもと実行してください。
