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

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に上記を記入したら、コンタクトフォームが記載されているページにのみ適応される。

動作確認・デモサイト

島根県松江市の脱毛サロンDaiana(ダイアナ)

URL:https://daiana.jp/contact.html

広島本社の足場専門の西部フレキ販売株式会社がとび職人(正社員)の求人を大募集

URL:https://www.flex-seibu.work/

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA