7ののメッセージをポップアップ表示する方法について解説していきます。7は、初心者の方でも充実したお問い合わせページを簡単に設置することができるWordPress用プラグインです。WordPressで作成したサイトにお問い合わせページを設置したいと考えても、WEBの専門的な知識のない初心者の方が充実したお問い合わせページを作るのは簡単ではありません。7を使用するとWordPress初心者の方でも簡単に充実したお問い合わせページの設置が可能になります。7のメールフォームでは、必要な項目(お名前・メールアドレス・電話番号・テキストなど)を設定し、入力フォーム(テキストボックスやテキストエリア)を作成することができます。他には、チェックボックスやラジオボタン、ドロップダウンメニューの設定など、便利な機能が沢山あります。送信完了時にサンクスページに移動させる、自動返信メールの送信、といったカスタマイズも可能になりますので、充実したお問い合わせページが作成できます。お問い合わせページだけではなく、アンケートや資料請求などの作成も可能です。目的によって様々な設定、カスタマイズをして幅広い用途で活用することができます。送信完了時にフォームの下に「あなたのメッセージは送信されました。ありがとうございました。」と表示されるだけで、メッセージに気付かずに送信されたのが分かりにくい、とクライアントから指摘されることもしばしばあります。そこで、メッセージをポップアップ表示して送信動作をわかりやすくします。7では、エラー検出や送信完了等のタイミングでイベントを発生させています。7で発生するイベントと、そのときに表示されているメッセージは以下のようになっています。入力内容に不備があります。確認してもう一度送信してください。メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。あなたのメッセージは送信されました。ありがとうございました。メッセージの送信に失敗しました。間をおいてもう一度お試しいただくか、別の手段で管理者にお問い合わせ下さい。(フォーム送信後)これらのイベントを検出して、ポップアップメッセージを表示します。UIのDialogを使うことにします。UIのテーマCSSを読み込むようにします。DialogのJavascriptは、WordPressに入っているものを使います。UIのバージョンにあわせたものをGoogleのCDNから読み込みます。サンプルではRedmondを選択しています。違うテーマを使う場合は、10行目のredmondの部分を変更します。7のイベントを検出するために、footer.phpに以下のコードを追加します。UIの読み込みとあわせて、お問い合わせフォームのあるページにだけあれば良いですが、サンプルという事でどのページでも使えるようにfooter.phpに追加します。$("#dialog-message").html("あなたのメッセージは送信されました。ありがとうございました。"お問い合わせありがとうございます。$("#dialog-message").html("確認して再度お試しください。"入力内容に問題があります。{$("#dialog-message").html("あなたのメッセージは送信されました。ありがとうございました。"お問い合わせありがとうございます。{$("#dialog-message").html("確認して再度お試しください。"入力内容に問題があります。"});});})(jQuery);</script>このサンプルでは、エラー検出時と送信完了時に元々表示されているメッセージをそのままポップアップで表示しています。6行目、10行目はポップアップダイアログのタイトルバーに表示されるタイトルになります。7が表示しているメッセージもそのまま表示されています。style.cssに以下のコードを追加して、このメッセージを表示しないようにします。!important;}送信ボタンを押したときのローディング画像も不要な場合は、style.cssに以下のコードも追加します。7のメッセージをポップアップ表示する事が出来るようになりました。送信完了時にサンクスページに移動させるSPAM判定されたときにアクセス元IPアドレスを記録するといったカスタマイズも可能になります。カスタマイズ方法WordPressの不具合調査のことならWordPressの不具合調査は弊社におまかせください。弊社が問題解決のお手伝いをします!WordPressの不具合、エラーの原因を調査して特定します。WordPressの不具合調査のご依頼、ご相談はこちらからどうぞ。その他、ご不明点などがありましたらお気軽にお問い合わせ下さい。お問い合わせ内容の確認後、3営業日以内に担当者よりご連絡させていただきます。