2019年版 wordpress(ワードプレス)のプラグインContact Form 7 のメッセージ（警告・送信完了をポップアップで表示

2019/1/13 wordpress, これ便利

Contact Form 7とは？

Contact Form 7は、初心者の方でも充実したお問い合わせページを簡単に設置することができるWordPress用プラグインです。

WEBの専門的な知識がなくても、WordPressの初心者の方でも、お問い合わせフォームやアンケートフォーム、採用応募フォームなど簡単に作れるようになあります。

https://ja.wordpress.org/plugins/contact-form-7/
WORDPRESS.ORG　日本語

Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。

メッセージの位置

Contact Form 7ではデフォルトで、フォームから送信を行うと、フォームの下部に「あなたのメッセージは送信されました。ありがとうございました。」とメッセージが表示されます。

送信完了ページに移動のご依頼が多い

Google検索すると未だに「送信完了は、送信完了ページに移動」するように設定しましょう。と記載がありますが、いまや古い情報です。
プラグインの作者も「使用を推奨しない」といっています。

もっと簡単に「送信完了」を告知したい。

やはり、一目で送信失敗・送信完了が分かるようにしたい！と言うことですごく簡単な方法を記載します。

footer.phpに下記を記載するだけ！

(function($){
  $('.wpcf7').on('wpcf7:mailsent', function(detail) { 
   alert("送信が完了しました。\nお問い合わせありがとうございました。");
  }); 
  $('.wpcf7').on('wpcf7:invalid', function(detail) { 
   alert("入力内容に問題があります。\n確認して再度お試しください。");   
  }); 
 })(jQuery);

javascriptでメール送信が完了したときにアラートでポップアップを表示、送信失敗した際にアラートでポップアップ表示しているだけの簡単な仕組みです。

※注意としては、wordpress独自の関数（wp_footer();）が記載された後に記入する事です。
でないと、「 Contact Form 7 」が動かないのです。

コンタクトフォームのみに対応するように下記のように記述。

<?php
wp_footer();
if (is_page(array('contact'))) {
?>
<script>
(function($){
  $('.wpcf7').on('wpcf7:mailsent', function(detail) {
    alert("送信が完了しました。\nお問い合わせありがとうございました。");
  });
  $('.wpcf7').on('wpcf7:invalid', function(detail) {
    alert("入力内容に問題があります。\n確認して再度お試しください。");
  });
})(jQuery);
</script>
<?php } ?>

footer.phpに上記を記入したら、コンタクトフォームが記載されているページにのみ適応される。