【WordPress】お問い合わせプラグイン「Contact Form7」でサンクスページ表示する

この記事は約 5 分で読めます。

WordPressの「Contact Form7」は、お問い合せフォームが簡単に設置できる便利なプラグインです。

お客さまがお問い合わせページで入力した後、表示されるのが「サンクスページ」です。「サンクスページ」で、ちょっとしたメッセージや画像を表示して、感謝の気持ちを伝えることができます。

また、Googleアナリティクスで計測するときに、「サンクスページ」があった方が便利です。

今回は、お客さまがお問い合わせ入力が終わった後に、「サンクスページ」を表示する設定をします。

「Contact Form7」の設定関係は、数回に分けて紹介していきます。

※phpを扱いますので、ファイル転送ができることが前提となります。

このページの目次

「Contact Form7」の設定
「サンクスページ」の設定
参考記事

1.「Contact Form7」の設定

既に「Contact Form7」を導入している場合は、次の項目【「サンクスページ」の設定】より進めます。

プラグイン「Contact Form7」を導入し、有効化しておきます。
管理画面「お問い合わせ」より、「新規追加」もしくは「編集」にて、「Contact Form7」の設定画面を出します。

ページのタイトルを入れます。
デフォルトでは「コンタクトフォーム 1」になっています。

「フォーム」を完成させる

画像①の部分が「フォーム」になっている状態で、その下になるフォーム部分②を完成させます。

お問い合わせフォームに必要な部品は、以下の14種類。

テキスト
メールアドレス
URL
電話番号
数値
日付
テキストエリア
ドロップダウンメニュー
チェックボックス
ラジオボタン
承諾確認
クイズ
フィイル
送信ボタン

何を選んで良いかわからない場合は、以下をコピーして使えます。

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>


<label> メッセージ本文 (必須)
    [textarea* your-message] </label>

[submit "送信"]

<label> お名前 (必須)

[text* your-name] </label>

<label> メールアドレス (必須)

[email* your-email] </label>

<label> メッセージ本文 (必須)

[textarea* your-message] </label>

[submit "送信"]

よく使われるのは・・・。

お名前に「テキスト」
「メールアドレス」
お問い合わせ内容に「テキストエリア」
最後に「送信ボタン」

必要に応じて、使う部品を選びましょう。

時々、お問い合わせいただいた時のメールアドレスが、お客さまの方で受信できないことがあります。

特に携帯のキャリアのメールアドレス、iCloud.com関連のメールアドレス（@icloud.com、@me.com、@mac.comなど）は、こういうケースが多いようです。

画像③のショートコードは、メモ帳か何かにコピーしておきましょう。後ほど、必要になります。

「メール」の設定

この設定は、お客さまが入力した項目を、WordPress管理者が受け取るメールに記載される内容となります。

最低限設定するのは、以下の4項目。

送信先(管理者の受信したいメールアドレス)
送信元(管理者の名称・名前)
題名(メールの件名、あなたが分かりやすいタイトルにします)
メッセージ本文(お客さまが入力される項目)

「メッセージ本文」は、「フォーム」の部分で選択したものを必ず入れます。

「お問い合わせページ」の設定

「固定ページ」を新規追加・または編集で「お問い合わせ」というページを作ります。
このときに、③のメモ帳にコピーしていたコードを貼り付けます。

「お問い合わせ」の固定ページを公開した後、さらに「固定ページ」を新たに作ります。
このページは「サンクスページ」として使用します。

▼　以下の画像は、「サンクスページ」の参考イメージです。

このページを公開し、URLをメモ帳などにコピーしておきます。以下の「サンクスページ」の設定で使用します。

2.「サンクスページ」の設定

「サンクスページ」用のphpを作ります。
この場合、既にある固定ページのphpをコピーした方がスムーズです。

この「サンクスページ」用phpに以下のコードを追加します。「http://example.com/」の部分に「サンクスページ」のURLを記述します。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

location = 'http://example.com/';

}, false );

</script>

固定ページのURLのネーミングは、以下を参考に。

page-{slug}.php – 固定ページのスラッグが recent-news ならば WordPress は page-recent-news.php を探す。

page-{id}.php – 固定ページIDが 6 ならば WordPress は page-6.php を探す

テンプレート階層｜WordPress Codex日本語版より一部引用

ここまでで、実際に入力のテストをしてみます。

お客さまになりきって入力・送信した後に、サンクスページを表示。

さらに、お問い合わせの内容がメールで受信できればOKです。