Contact Form 7のメッセージをポップアップ表示する

この記事では、Contact Form 7ののメッセージをポップアップ表示する方法について解説していきます。

Contact Form 7について

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

WordPressで作成したサイトにお問い合わせページを設置したいと考えても、WEBの専門的な知識のない初心者の方が充実したお問い合わせページを作るのは簡単ではありません。
そこで、Contact Form 7を使用するとWordPress初心者の方でも簡単に充実したお問い合わせページの設置が可能になります。

Contact Form 7のメールフォームでは、必要な項目（お名前・メールアドレス・電話番号・テキストなど）を設定し、入力フォーム（テキストボックスやテキストエリア）を作成することができます。他には、チェックボックスやラジオボタン、ドロップダウンメニューの設定など、便利な機能が沢山あります。
送信完了時にサンクスページに移動させる、自動返信メールの送信、といったカスタマイズも可能になりますので、充実したお問い合わせページが作成できます。

お問い合わせページだけではなく、アンケートや資料請求などの作成も可能です。目的によって様々な設定、カスタマイズをして幅広い用途で活用することができます。

送信完了時にフォームの下に
「あなたのメッセージは送信されました。ありがとうございました。」
と表示されるだけで、メッセージに気付かずに送信されたのが分かりにくい、とクライアントから指摘されることもしばしばあります。

そこで、メッセージをポップアップ表示して送信動作をわかりやすくします。

Contact Form 7のイベントトリガー

Contact Form 7では、エラー検出や送信完了等のタイミングでイベントを発生させています。

Contact Form 7で発生するイベントと、そのときに表示されているメッセージは以下のようになっています。

これらのイベントを検出して、ポップアップメッセージを表示します。

ポップアップ表示の準備

ポップアップ表示にはjQuery UIのDialogを使うことにします。
functions.phpでjQuery UI DialogのJavascriptとjQuery UIのテーマCSSを読み込むようにします。

/*  Contact Form 7 メッセージをjQuery UI Dialogで
 * ---------------------------------------------- */
function wp_enqueue_scripts_forcf7() {
    global $wp_scripts;
    $ui = $wp_scripts->query('jquery-ui-core');

    wp_enqueue_script( 'jquery-ui-dialog' );
    wp_enqueue_style(
        'jquery-ui-redmond',
        "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/redmond/jquery-ui.min.css",
        false,
        null
    );
}
add_action('wp_enqueue_scripts', 'wp_enqueue_scripts_forcf7');

jQuery UI DialogのJavascriptは、WordPressに入っているものを使います。

jQuery UIのテーマCSSは、https://jqueryui.com/themeroller/からサイトにあったデザインのものを選択し、WordPressに入っているjQuery UIのバージョンにあわせたものをGoogleのCDNから読み込みます。
サンプルではRedmondを選択しています。
違うテーマを使う場合は、10行目のredmondの部分を変更します。

イベントの検出とポップアップ表示

Contact Form 7のイベントを検出するために、footer.phpに以下のコードを追加します。

jQuery UIの読み込みとあわせて、お問い合わせフォームのあるページにだけあれば良いですが、サンプルという事でどのページでも使えるようにfooter.phpに追加します。

<script>
(function($){
  // CF7
  $('.wpcf7').on('wpcf7:mailsent', function(detail) {
    $("#dialog-message").html("あなたのメッセージは送信されました。ありがとうございました。");
    $("#dialog").dialog({title: "お問い合わせありがとうございます。"});
  });
  $('.wpcf7').on('wpcf7:invalid', function(detail) {
    $("#dialog-message").html("確認して再度お試しください。");
    $("#dialog").dialog({title: "入力内容に問題があります。"});
  });
})(jQuery);
</script>

このサンプルでは、エラー検出時と送信完了時に元々表示されているメッセージをそのままポップアップで表示しています。

6行目、10行目はポップアップダイアログのタイトルバーに表示されるタイトルになります。

Contact Form 7のメッセージを非表示にする

メッセージがポップアップ表示されるようになりましたが、Contact Form 7が表示しているメッセージもそのまま表示されています。

style.cssに以下のコードを追加して、このメッセージを表示しないようにします。

.wpcf7-response-output {
	display:none !important;
}

送信ボタンを押したときのローディング画像も不要な場合は、style.cssに以下のコードも追加します。

div.wpcf7 .ajax-loader {
	display: none !important;
}

以上で、Contact Form 7のメッセージをポップアップ表示する事が出来るようになりました。

Contact Form 7のイベントトリガーを使えば、

• 送信完了時にサンクスページに移動させる
• SPAM判定されたときにアクセス元IPアドレスを記録する

といったカスタマイズも可能になります。