お問い合わせフォーム

お問い合わせフォーム — Contact Form 7 完全設定ガイド

WordPressで作ったホームページに「お問い合わせフォーム」は必須です。問い合わせフォームがなければ、せっかくサイトを見てくれた見込み客が連絡手段を見つけられず機会を逃します。Contact Form 7（以下CF7）は有効インストール数500万以上、10年以上の実績を持つWordPressフォームプラグインの事実上の標準です。このレッスンでは、CF7のインストールから設定・reCAPTCHA v3によるスパム対策・通知メールのカスタマイズ・サンクスページの作成まで、すべての手順をステップごとに解説します。

Contact Form 7 — フォーム送信フロー

---

STEP 1: Contact Form 7のインストールと基本設定

インストール手順

1. ◆WordPress管理画面の「プラグイン → 新規追加」をクリック
2. ◆検索欄に「Contact Form 7」と入力
3. ◆「今すぐインストール」→「有効化」をクリック
4. ◆左メニューに「お問い合わせ」が追加されたことを確認

有効化すると、デフォルトのフォーム「コンタクトフォーム1」が自動生成されます。まずはこのフォームの設定を確認しながら仕組みを理解しましょう。

CF7の管理画面構成

「お問い合わせ → フォーム一覧」から各フォームの編集画面を開くと、4つのタブが表示されます。

---

STEP 2: フォーム項目の設計

お問い合わせフォームの基本項目

ビジネス用のお問い合わせフォームに必要な項目と、CF7のタグの対応を以下にまとめます。

タグの種類と使い分け

CF7には多様なタグが用意されています。「タグを生成」ボタンをクリックすることで、設定画面からタグを自動生成できます。

よく使うタグ一覧:

• ◆[text] — 1行テキスト入力（名前・件名など）
• ◆[email] — メールアドレス入力（形式バリデーションあり）
• ◆[tel] — 電話番号入力
• ◆[textarea] — 複数行テキスト入力（メッセージ本文）
• ◆[select] — ドロップダウン選択（お問い合わせ種別など）
• ◆[radio] — ラジオボタン
• ◆[checkbox] — チェックボックス（プライバシーポリシー同意など）
• ◆[file] — ファイル添付
• ◆[date] — 日付選択

💡 タグの末尾に *（アスタリスク）をつけると必須項目になります。[text* your-name] は必須のテキスト入力フィールドです。[text your-name] は任意入力です。

プライバシーポリシー同意チェックボックス

2022年以降、個人情報保護の観点からお問い合わせフォームへのプライバシーポリシー同意チェックボックスの設置が強く推奨されています（GDPRや個人情報保護法対応）。

CF7でのチェックボックス設置例:

[acceptance acceptance-660]
  <a href="/privacy/" target="_blank">プライバシーポリシー</a>に同意する
[/acceptance]

acceptance タグはチェックが入っていない状態では送信できないため、強制同意に使えます。

---

STEP 3: reCAPTCHA v3によるスパム対策

reCAPTCHAとは

reCAPTCHAはGoogleが提供するボット対策サービスです。v2では「私はロボットではありません」のチェックボックスや画像選択が必要でしたが、v3ではユーザーが何もしなくてもバックグラウンドでスコアを計算し、ボットかどうかを自動判定します。ユーザー体験を損なわずにスパム送信を大幅に削減できます。

reCAPTCHA v3 設定手順

Step A: Googleでキーを取得する

1. ◆https://www.google.com/recaptcha/admin/create にアクセス
2. ◆ラベルにサイト名を入力（例: 自社サイト）
3. ◆reCAPTCHAタイプで「reCAPTCHA v3」を選択
4. ◆ドメイン欄に自分のサイトのドメインを追加（例: example.com）
5. ◆「送信」をクリックして「サイトキー」と「シークレットキー」を取得

Step B: CF7に設定する

1. ◆管理画面「お問い合わせ → インテグレーション」を開く
2. ◆「reCAPTCHA」のセクションで「インテグレーションのセットアップ」をクリック
3. ◆取得したサイトキーとシークレットキーを貼り付けて保存
4. ◆フォームの右下にreCAPTCHAのバッジが表示されるようになります

⚠️ reCAPTCHA v3のスコアは0.0〜1.0で返されます（1.0に近いほど人間）。CF7のデフォルト閾値は0.5です。スパムが多い場合は閾値を0.7に上げることも検討しましょう。ただし閾値を上げすぎると正規ユーザーもブロックされる可能性があります。

---

STEP 4: 通知メールのカスタマイズ

メールタブの設定項目

「メール」タブでは、フォームが送信されたときに届く通知メールの内容を設定します。

件名のカスタマイズ例

管理者への通知メールの件名は以下のように設定するとわかりやすくなります。

【お問い合わせ】[your-subject]（[your-name]様より）

本文のカスタマイズ例

以下の内容でお問い合わせがありました。

■ お名前: [your-name]
■ メールアドレス: [your-email]
■ 電話番号: [your-tel]
■ 件名: [your-subject]
■ お問い合わせ内容:
[your-message]

------
送信日時: [_date] [_time]
送信元IPアドレス: [_remote_ip]

自動返信メール（メール2）の設定

「メール2を使う」にチェックを入れると、送信者への自動返信メールを設定できます。

自動返信メールの送信先設定:

• ◆送信先: [your-email]（送信者のメールアドレスを自動取得）
• ◆件名: 「お問い合わせありがとうございます」
• ◆本文: 受信確認と対応日数の目安を記載

💡 自動返信メールは送信者が「本当に送信できたか」を確認する手段になります。「3営業日以内にご回答いたします」などの対応目安を記載することで、ユーザーの不安を解消し問い合わせへの信頼感を高めます。

---

STEP 5: サンクスページの作成と設定

サンクスページとは

フォーム送信完了後にリダイレクトする専用の「ありがとうページ」です。以下の目的で必ず設置を推奨します。

WordPressでサンクスページを作る手順

1. ◆「固定ページ → 新規追加」でサンクスページを作成（URL例: /contact/thanks/）
2. ◆タイトルと本文を設定（「お問い合わせありがとうございます」など）
3. ◆SEO設定でnoindexを設定（Yoast SEOの「詳細」タブ→「ロボットへの指示」→「インデックスなし」）

CF7からサンクスページへのリダイレクト設定

送信完了時にCF7が発生させるDOMイベント wpcf7mailsent を使い、以下のJavaScriptをサイトに追加します（子テーマのfunctions.phpからwp_footerに出力する、フッターに追記するなど）。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://example.com/contact/thanks/';
}, false );

⚠️ 古い解説記事にある「その他の設定」タブへ on_sent_ok を書く方法は、現在のCF7では廃止されており動作しません。また、PHPの wpcf7_mail_sent フックはサーバー側でメール送信後に動く処理のため、ブラウザを別ページへ移動させる用途には使えません。フォームが複数ある場合は event.detail.contactFormId で対象フォームを判定してから転送してください。

GA4でコンバージョン計測する

サンクスページへのアクセスをGA4でコンバージョン（目標達成）として計測します。

1. ◆GA4管理画面の「設定 → イベント」を開く
2. ◆「イベントを作成」をクリックして contact_complete などの名前でイベントを作成
3. ◆条件として「page_location」に「/contact/thanks/」が含まれることを設定
4. ◆作成したイベントを「コンバージョンとしてマーク」に切り替える

---

フォームの動作確認チェックリスト

設定完了後、以下のすべての項目を実際に試して確認します。

• ◆フォームが正しく表示される（各入力項目・送信ボタンが見える）
• ◆必須項目を空欄のまま送信するとエラーが表示される
• ◆メールアドレスを不正な形式で入力するとエラーが表示される
• ◆正しく入力して送信すると成功メッセージが表示される（またはサンクスページに遷移する）
• ◆管理者に通知メールが届く
• ◆送信者に自動返信メールが届く（メール2を設定した場合）
• ◆通知メールのReply-Toが送信者のメールアドレスになっている（返信がすぐできる）

💡 WordPressの標準メール送信機能（wp_mail）はサーバーによっては迷惑メールに振り分けられやすいです。WP Mail SMTPプラグインを使ってGmail SMTPやSendGridなどの専用メール送信サービスと連携することで、到達率を大幅に改善できます。

---

🏋️実践ワーク

1. ◆Contact Form 7プラグインをインストール・有効化し、デフォルトのフォームを確認してください。
2. ◆フォームタブを編集し、「お名前（必須）・メールアドレス（必須）・電話番号（任意）・件名（必須）・お問い合わせ内容（必須）・プライバシーポリシー同意（必須）」の6項目を含むフォームを作成してください。
3. ◆Google reCAPTCHA v3のサイトキーとシークレットキーを取得し、CF7の統合設定に登録してください。
4. ◆メールタブで、件名に [your-subject] を差し込んだ管理者通知メールと、送信者への自動返信メール（メール2）を設定してください。
5. ◆固定ページでサンクスページを作成し、CF7からそのページへリダイレクトする設定を追加してください。

📝まとめ

Contact Form 7はインストールからサンクスページ設置まで5つのステップで完成します。フォーム項目はタグを使って必須/任意を制御し、reCAPTCHA v3でスパム対策を施します。通知メールは管理者向け（件名カスタマイズ・Reply-To設定）と送信者向け自動返信（メール2）の両方を設定します。サンクスページはGA4のコンバージョン計測に不可欠であり、ページのnoindex設定も忘れずに行います。次のレッスンではそのGA4とGoogle Search Consoleの導入・活用方法を詳しく解説します。