カスタマイズ方法

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

トリガー デフォルト メッセージ
‘wpcf7:invalid’ 入力内容に不備があります。確認してもう一度送信してください。
‘wpcf7:spam’ メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。
‘wpcf7:mailsent’ あなたのメッセージは送信されました。ありがとうございました。
‘wpcf7:mailfailed’ メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。
‘wpcf7:submit’ (フォーム送信後)

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

ポップアップ表示の準備

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

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に追加します。

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

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

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

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

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

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

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

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

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

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

WordPressの不具合調査のことなら

WordPressの不具合調査は弊社におまかせください。


弊社が問題解決のお手伝いをします!


WordPressの不具合、エラーの原因を調査して特定します。


WordPressの不具合調査のご依頼、ご相談はこちらからどうぞ。


その他、ご不明点などがありましたらお気軽にお問い合わせ下さい。


お問い合わせ内容の確認後、3営業日以内に担当者よりご連絡させていただきます。


お問い合わせをする