Contact Form 7で連続送信を防ぎたい場合、送信後に一定時間の制限を設けるのは効果的です。今回は、JavaScriptのlocalStorageを使って、送信後に送信ボタンを一時的に無効化する方法をご紹介します。
localStorageで送信制限時間を管理
// 送信完了時に制限時間を保存する
document.addEventListener('wpcf7mailsent', function(){
const now = new Date();
const expireAt = new Date(now.getTime() + 12 * 60 * 60 * 1000); // 12時間
localStorage.setItem('send_block_until', expireAt.toISOString());
}, false);
// 送信制限中かどうか判定
function isSendBlocked(){
const sendBlockUntil = localStorage.getItem('send_block_until');
if(!sendBlockUntil) return false;
const expireAt = new Date(sendBlockUntil);
const now = new Date();
if(now > expireAt){
localStorage.removeItem('send_block_until');
return false;
}
return expireAt;
}
// ページ読み込み時に送信制限をチェックする
document.addEventListener('DOMContentLoaded', function(){
const expireAt = isSendBlocked();
if(expireAt){
const button = document.querySelector('.wpcf7-submit');
if(button){
button.disabled = true;
// 送信可能な時刻を「HH:mm」形式で表示
const hours = expireAt.getHours().toString().padStart(2, '0');
const minutes = expireAt.getMinutes().toString().padStart(2, '0');
button.value = `${hours}:${minutes}以降に送信可能`;
}
}
});ただし、この方法はブラウザ単位での制御となるため、他の端末やブラウザでは再送信が可能です。あくまで操作ミスや意図しない連続送信の防止として利用してください。
