お問い合わせフォームの設置

wordpress設定イメージ画像 アプリ

ここではお問い合わせフォーム(Contact Form7)の設置手順を記載します。

インストール

WordPress管理画面の[プラグイン] – [新規追加]より、Contact Form7を検索し、今すぐインストールを選択します。インストールが終わりましたら、「有効化」します。

Contact Form の設定

WordPress管理画面の[お問い合わせ]より、新規追加を選択します。

タイトルを入力します。このタイトルはあくまでも管理用ですので、一般には公開されません。

次に「フォーム」タブより、お問い合わせのフォームの内容を設定します。項目の設定が済んだら保存を押下します。

次に、「メール」タブの設定をします。受け付けたメール(メール1)とお問い合わせしてもらった方への返信メール(メール2)を設定します。

固定ページへの設定

設定を保存すると、コンタクトフォームの一覧画面に「ショートコード」が表示されますので、こちらをコピペします。WordPress管理画面の[固定ページ] – [新規追加]を開き、上部のプラスボタンからショートコードを選択します。こちらにコピペしたコードを張り付けします。タイトルなどを適切に設定し、保存して、プレビューでフォームが正常に表示されているか確認します。問題がなければ公開します。

こちらのページに更新日付は表示したくなかったので、ページ下部にある「カスタムCSS」に下記を追記しておきます。

.date-tags {
display: none;
}

サンクスページの作成

お問い合わせフォームの後に表示させるサンクスページを準備します。

まず固定ページにて、サンクスページを作成します。
サンクスページは、検索には載って欲しくないので、noindexに設定します。

カスタムHTMLで、以下のコードを、「お問い合わせページ」に追加します。
(locationの部分は、環境に合わせて適切なものを指定してください)

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://ドメイン名/thanks/';
}, false );
</script>

reCAPTCHAの設定

GoogleのreCAPTCHAサービスページにアクセスし連携用のキーを取得します。
https://www.google.com/recaptcha/admin/create にアクセスして、右上のAdmin Consoleより必要事項を入力します。登録後に出てくる、サイトキーとシークレットキーを控えておきます。

WordPressの管理画面より、[お問い合わせ] – [インテグレーション]を選択します。
reCAPTCHAの「インテグレーションのセットアップ」を押下し、先に控えたサイトキーとシークレットキーをコピペし、設定を保存します。

reCAPTCHAの確認

サイトを開いた際に、画面右下の方にreCAPTCHAの保護マークが表示されていればOKです。

お問い合わせページのリンク作成

WordPressの管理画面より、[外観] – [メニュー]を選択します。
画面左側の固定ページから「お問い合わせ」が追加されているので、チェックを入れて「メニューに追加」ボタンを押下します。保存をして、トップページからお問い合わせのリンクができていることを確認します。

reCAPTHAのアイコンをお問い合わせページ以外から消す

reCAPTHAを設定すると、全てのページにアイコンが表示されます。

google推奨の、アイコンを消して使用している旨の提示を出す方法もありますが、ここではお問い合わせページのみアイコンを表示させる方法を紹介します。

SSHでサーバに接続(※)して、
/ホームディレクトリ/public_html/ドメイン/wp-content/themes/cocoon-child-master/functions.php を開きます。(ディレクトリはご利用の環境に読み換えてください)
以下を入力します。お問い合わせページ以外で、Contact Form 7関連のコードを削除する処理も併せて実施します。

// お問い合わせページ以外でContact Form 7関連のコードを削除
add_action( 'wp_enqueue_scripts', function() {
        if( !is_page('contact') ){
          wp_dequeue_style( 'contact-form-7' );
        }
});
add_action( 'wp_footer', function() {
        if( !is_page('contact') ){
          wp_deregister_script( 'contact-form-7' );
          wp_deregister_script( 'google-recaptcha' );
        }
});

ファイルを保存して、表示が変わっているか確認します。

※WordPressのphpファイルを直接編集する際は、必ずSSHで接続して、元ファイルをバックアップの上、viコマンドでファイルを編集します。管理画面から編集することも可能ですが、もしミスって管理画面が表示されなくなっても、編集前のファイルにすぐ戻すことができるからです。
逆に言うと、もしミスって管理画面が見えなくなった場合は、SSHで接続してファイルを書き換えれば良いのです。ただし、管理画面からどのファイルを書き換えたのかをしっかり把握している必要はありますが。

お問い合わせページの動作確認

最後に今回設定したお問い合わせから、実際に問い合わせして、動作確認をしておきます。
お問い合わせする人(今回の場合、自分自身)は、gmailのメールを入力して、お問い合わせします。
gmailをあえて使用する理由は、それなりにセキュリティが厳しいからです。もしSPFが設定されていなかったり、レンタルサーバのIPアドレスがブラックリストに載っていると届きません。
お問い合わせした人(gmail)と管理者宛てにメールが届いているか、メール本文の内容が事足りているかをこのタイミングでしっかり確認しておきます。

今回は、ここまでとなります。最後までご覧いただきましてありがとうございました。