WPで問い合わせフォームを作る時に非常によく使われるプラグインのContactForm7ですが、こちらのプラグインには仕様として送信後のサンキューページはありません。
公式サイトのQAを見ると作者がサンキューページを不要のものと考えてるのがよくわかるし、僕自身も別に要らないと思っていますが、世の中にはそういうページが欲しいと言われる案件が多いのもまた事実です。
今回はそんな出来るだけ避けたいサンキューページを実装する羽目になった際の手順についてメモしておこうと思います。
Contact Form7のカスタムDOMイベントを使う
メールを送信されたタイミングに発火するイベントが用意されているので、そのイベントに対して処理を追加すれば送信後にサンキューページを表示させるという挙動を実現することができます。
ものすごく渋々な感じで公式サイトに載っているやり方は下記のようなものです。非常にわかりやすいですね。
<script>
document.addEventListener('wpcf7mailsent', function(e) {
location = 'http://atakaze.ready.jp/‘; //任意のURL
},false);
</script>
ただ僕が使ったときはなぜかこちらで上手く動かず原因もよくわからなかったので、こちらを参考にjQueryでのイベント指定のやり方に変更しました。
Contact Form 7 not redirecting upon email sent
<script>
jQuery(document).ajaxComplete(function() {
if (jQuery('.wpcf7-mail-sent-ok').length) {
location = 'http://atakaze.ready.jp/';
}
});
</script>
構造は単純でjQueryのajax通信が完了した時に発生するイベントの後に、「.wpcf7-mail-sent-ok」という要素がページ内に存在すればページを飛ばすというものです。
こちらはContactForm7の公式という訳では無く、デフォルトの挙動を利用したものになります。
公式にも書いてある通り別にサンキューページは要らないんじゃないかなぁと思うんですが、まあそれでもどうしても欲しいと言われれば作ることが多いのが受託の宿命なのでやり方を覚えておくと調べる時間がかからなくて良いんじゃないかと思います。
