標準のテキストメッセージだけでは味気ない。
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;
}
装飾は、普段通りにどうぞ。
これだとフォームのページが何枚あっても同じパターンでいける。内容もそれぞれ変えられるしね。
飛び先のアドレスだのなんだのの管理もしなくていいし、運用考えてもページ飛ばすよりラクじゃないかな、と。