contactform7で二重送信を抑制する方法

WordPressのcontactform7で二重送信を抑制する方法を調べてもなかなか出てこなかったのでメモとして残しておきます。

contactform7はWordPressでお問い合わせや申込みフォームなどを作るときにとても便利なプラグインですが、送信ボタン連打抑制の機能が標準では実装されていません。
全く同じ内容のメールが複数届くことが多い場合、送信者がボタンを連打している可能性があります。

contactform7で送信ボタンの連打（二重送信）を抑制する方法

正解から言うとJavaScriptにこんな感じの記述をします。

$(function () {
//二重送信抑制
	let submitBtn = $("input[type='submit'].wpcf7-submit");
	submitBtn.click(function () {
		$(this).css('pointer-events', 'none');
		$(this).css('opacity', '0.5');
	})
	// 入力項目にエラーがあったらボタン復活
	document.addEventListener('wpcf7invalid', function () {
		submitBtn.css('pointer-events', 'auto');
		submitBtn.css('opacity', '1');
	}, false);

});

解説します。

解説

クリックイベントでボタン機能を抑制

CSSのプロパティ「pointer-events」は、要素のクリックイベントをキャンセルする時に便利です。

coliss.com

submitBtn.click(function ()

のところで送信ボタンがクリックされた時に、cssが

pointer-events:none ;

となるように設定します。
ついでにボタンが半透明になるなど、クリックされたことが視覚的にわかるようにしておきました。

opacity:0.5 ;

入力項目にエラーがあった時の処理

上記のボタンの機能抑制だけ入れて、正しくない入力があったためにメール送信できなかったときの処理を入れないと、入力項目を直しても一生送信できないフォームになってしまいます。

Contact Form 7 が提供するDOM イベントはこちら。

contactform7.com

• wpcf7invalid — Ajax のフォーム送信が完了したが、正しくない入力があったためにメール送信は行われなかった場合に発生する。
• wpcf7spam — Ajax のフォーム送信が完了したが、スパム行為の疑いがあったためにメール送信は行われなかった場合に発生する。
• wpcf7mailsent — Ajax のフォーム送信が完了し、またメールの送信も行われた場合に発生する。
• wpcf7mailfailed — Ajax のフォーム送信が完了したが、メールの送信には失敗した場合に発生する。
• wpcf7submit — 他の条件に関係なく、Ajax のフォーム送信が完了した場合に発生する。

イベントリスナーで「wpcf7invalid」を受け取った時の処理を記述します。
クリックイベントでボタン機能を抑制したときと反対のことをするわけですね。

pointer-events:auto ;
opacity:1 ;

ボタンを半透明にするのではなく、抑制時に別のcssを割り当ててグレーアウト表現によるdisable感を出すとか、丁寧にやってみるのも良いと思います。

おまけ：サンクスページへの推移

送信完了してサンクスページに推移しないと戸惑う方も多そうなので、とりあえずサンクスページへの推移も付けときます。
上記DOMイベントの「wpcf7mailsent」を使用します。

$(function () {
    document.addEventListener( 'wpcf7mailsent', function() {
        location = 'https://example.com/thanks/';/ /サンクスページのURL
    }, false );
});

サンクスページには
「返信が欲しくばこのドメインの受信をブロックするなよ！」
といった内容を書いておくと良いです。

まとめ

contactform7で送信ボタン連打を抑制する時は、入力エラーがあった時の処理も忘れずに。

サマータイムレンダ 1 (ジャンプコミックスDIGITAL)

それではまた…さよならいち・∀・)ノ