Contact Form 7 でリッチなサンクス表示をさせる

標準のテキストメッセージだけでは味気ない。
HTMLでがっつり装飾したい、そんな時に。
サンクスページをわざわざ作ってわざわざ飛ばすよりラクだと思うよ。

考え方

単純です。大胆かつ柔軟。
- メールを送信したら、bodyにクラスを付与する。
- そのクラスでサンクス領域を表示する。
- ついでにフォームは隠してしまおう。

実装

メールを送信したら body に wpcf7-mail-sent クラスを付与する。

クラス名はなんでもいいんだけど。とりあえずわかりやすく。

functions.php

add_action( 'wp_footer', 'add_wpcf7_mail_sent_script' );
function add_wpcf7_mail_sent_script() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  document.body.classList.add( 'wpcf7-mail-sent' );
}, false );
</script>
EOD;
}

サンクス内容は投稿内に直接書いておく

WPのPost内

<section class="wpcf7-mail-sent_hide">
<!-- フォーム部分 -->
[contact-form-7 id="123" title="Form"]
</section>

<section class="wpcf7-mail-sent_show">
<!-- サンクス部分 -->
  <h1>Thanks!</h1>
  <img src="thanks.gif">
  <p>Thank you very much !!!</p>
  <a href="/">Back to Top</a>
</section>

フォームを隠さず出したまんまにする場合は、wpcf7-mail-sent_hide を外す。

切り替え用CSS

style.css とか読み込んでるやつに追加しよう。

SCSS

.wpcf7-mail-sent {
  &_show { /* 最初は隠しておく */
    display: none;
  }
  & &_show { /* クラス付いたら表示する */
    display: inherit;
  }
  & &_hide  { /* 今度はこっち隠す */
    display: none;
  }
}

CSS で普通に書くとこう。

CSS

.wpcf7-mail-sent_show {
  display: none;
}
.wpcf7-mail-sent .wpcf7-mail-sent_show {
  display: inherit;
}
.wpcf7-mail-sent .wpcf7-mail-sent_hide  {
  display: none;
}

装飾は、普段通りにどうぞ。
これだとフォームのページが何枚あっても同じパターンでいける。内容もそれぞれ変えられるしね。
飛び先のアドレスだのなんだのの管理もしなくていいし、運用考えてもページ飛ばすよりラクじゃないかな、と。