MENU
  1. ホーム
  2. WordPress
  3. 超初心者向けContact Form 7の設定方法｜インストールから設置までやさしく解説

超初心者向けContact Form 7の設定方法｜インストールから設置までやさしく解説

広告
【当ブログは、WordPressテーマ「SWELL」、 レンタルサーバー「ロリポップ！ ハイスピードプラン」で運営しています。】

「お問い合わせフォームって、とりあえず Contact Form 7 を入れておけばいいんでしょ？」
そう思って入れてみたものの、こんなモヤモヤはありませんか？

「最低限は動いているけど、この設定で本当に合っているのか不安……」
「デザインが味気ないままだけど、CSSはいじりたくない」
「スパムが急に増えたけど、どこから対策したらいいの？」
「そもそも自動返信メールやサンクスページって、どう設定するのが正解？」

Contact Form 7 はシンプルで強力なプラグインですが、
初期状態のままだと「とりあえず送れるフォーム」にしかなりません。

本記事では、初めて Contact Form 7 を触る方から、
すでに運用しているけれど設定が自己流になっている方までを対象に、

  • 基本設定（インストール〜フォーム作成〜メール通知）
  • フォーム項目・デザインのカスタマイズ
  • reCAPTCHA や Akismet を使ったスパム・セキュリティ対策
  • よくあるトラブルの原因と、実務的な解決の手順

を、ひと通り「この1記事で流れがつかめる」ように体系立てて解説します。

単にフォームが送れるだけでなく、
ユーザーに安心して使ってもらえ、運営側も扱いやすい“信頼される問い合わせ窓口”を一緒に作っていきましょう。

フォーム作成から問い合わせ対応・顧客管理まで【formrun】
目次

Contact Form 7の概要と特徴

Contact Form 7で何ができるのか

Contact Form 7 は、WordPress で問い合わせフォームを自由に設置できるプラグインです。
1つのサイト内に複数フォームを作れるため、例えば以下のような用途に使えます。

  • 一般的なお問い合わせフォーム
  • 資料請求フォーム
  • 見積もり依頼フォーム
  • セミナー・イベント申込フォーム
  • 採用応募フォーム　など

主な特徴をざっくりまとめると、こんなイメージです。

スクロールできます
項目内容
フォーム作成管理画面からフォームを作成し、ショートコードを固定ページや投稿に貼り付けるだけ
入力項目名前・メール・電話・URL・日付・チェックボックス・ラジオボタン・ドロップダウン・ファイル添付など
バリデーションメール形式チェック・必須チェックなど基本的な入力チェックが標準機能で利用可能
通知管理者宛てメール、ユーザー宛て自動返信メールの設定が可能
拡張性スパム対策・確認画面・条件分岐・決済など、プラグイン連携で機能追加がしやすい

「HTML＋ショートコード」ベースでフォームを組み立てる仕組みなので、見た目や構造を細かくコントロールできるのも特色です。

導入するメリットと利点

Contact Form 7 を選ぶ大きな理由は、次のような点にあります。

  • 無料で商用利用できる
    ライセンスを気にせず、企業サイト・個人ブログ・アフィリエイトサイトなど、どのような用途でも使えます。
  • 利用者が多く、情報が豊富
    日本語・英語ともに解説記事やQ&Aが大量にあり、トラブル時も自己解決しやすい環境です。
  • ほぼどのテーマとも共存できる
    特定テーマ専用のフォーム機能と違い、テーマを乗り換えてもフォーム部分を流用しやすくなります。
  • 細かいカスタマイズに強い
    フィールド構造を HTML ベースで組めるため、
    • マークアップを整えて SEO に配慮したフォームを作る
    • CSS クラスを付けて、デザインをこだわって調整する
      といったニーズにも対応しやすいです。
  • 拡張プラグインとの連携で“成長”させられる
    まずはシンプルな問い合わせフォームとして導入し、
    「スパムが増えてきた」「確認画面が欲しくなった」「決済と組み合わせたい」
    などのタイミングで機能を追加していく、という運用がしやすいのもメリットです。

注意しておきたい制約・デメリット

メリットが多い一方で、「向き・不向き」が分かれやすいプラグインでもあります。
とくに初心者がハマりやすいポイントを、細かく分けて整理します。

データはメール通知のみで保存される点

標準状態の Contact Form 7 では、送信データは基本的に「メールで飛んでくるだけ」です。

  • 管理画面で問い合わせ履歴を一覧表示する機能は標準ではありません
  • メールが届かない設定になっていると、ユーザーが送っても「気づけない」リスクがあります
  • 誤ってメールを削除したり、メールボックス容量がいっぱいだった場合もデータが残りません

そのため、実運用では以下のような対策がほぼ必須です。

  • サーバーのメール設定をきちんと見直す
  • 管理用メールアドレスを複数用意しておく
  • 送信データを保存する専用プラグイン（例：DB保存系プラグイン）を併用する

「問い合わせが売上に直接つながる」ようなサイトでは、メールに頼り切らない仕組みを早めに準備しておくのが安全です。

一部機能は追加プラグインが前提になること

Contact Form 7 単体でも基本的なフォームは作れますが、次のような機能は標準では弱い／用意されていない領域です。

  • 入力内容の確認画面（確認ページ）
  • ステップ形式（ページ分割）のフォーム
  • 項目の表示・非表示を切り替える条件分岐
  • 決済（クレジットカード・PayPal など）との連携
  • 送信後の高度なトラッキング・計測

これらを実現したい場合は、

  • Contact Form 7 専用のアドオン
  • 決済サービスやマーケティングツール側のプラグイン

などを組み合わせていく必要があります。

「1つのプラグインだけで全部完結させたい」という人よりも、
「必要に応じてプラグインを組み合わせていける人」向きの設計だと考えるとイメージしやすいです。

プラグインの増えすぎによるサイト負荷の可能性

Contact Form 7 は比較的軽量な部類ですが、
フォーム関連だけで次々にプラグインを追加していくと、サイト全体のパフォーマンスに影響が出ることがあります。

  • フォーム本体
  • 確認画面用アドオン
  • 条件分岐プラグイン
  • スパム対策プラグイン
  • 解析ツール連携プラグイン　……など

フォーム周りだけで 5〜6 個のプラグインを入れてしまうケースも珍しくありません。

負荷やトラブルを減らすためには、

  • 「本当に必要な機能か？」を一度立ち止まって検討する
  • 同じ目的のプラグインを重複して入れない
  • サイト速度が極端に落ちていないか、定期的にチェックする

といった運用の工夫が欠かせません。

このセクションでは、Contact Form 7 の「できること」と「向き・不向き」をあえてハッキリさせました。
次のステップとして、「実際にどうインストールして、どんなフォームを作っていくか」を押さえていくと、導入判断がしやすくなります。

Contact Form 7の導入準備とインストール

Contact Form 7 は「入れて終わり」のプラグインではなく、
インストール → フォーム確認 → ページ作成 → メニューに表示
という一連の流れを押さえることで、はじめて実用レベルになります。

ここでは、その最初のセットアップを順番に整理します。

プラグインの追加と有効化手順

前提として、以下はすべてWordPress管理画面にログインした状態で行います。

  1. 管理画面左メニューから
    「プラグイン」→「新規追加」 をクリック
  2. 右上の検索ボックスに Contact Form 7 と入力
  3. 検索結果に表示される
    「Contact Form 7」（作者: Takayuki Miyoshi） を確認
  4. 「今すぐインストール」ボタンを押し、インストール完了後に
    「有効化」ボタンをクリック
  5. 左メニューに 「お問い合わせ」 という項目が追加されていれば成功

よくあるつまずきポイントをまとめておくと、こんな感じです。

スクロールできます
症状考えられる原因・確認ポイント
検索しても出てこないマルチサイト環境／公式ディレクトリにアクセスできないサーバー設定
有効化ボタンが押せないPHPやWordPressのバージョンが古い可能性
有効化後も「お問い合わせ」が出ないキャッシュ・管理画面の権限・ブラウザの再読み込みを確認

インストールに不安がある場合は、テーマやWordPress本体を更新する前に軽くバックアップを取っておくと安心です。

初期状態のフォームを確認する

有効化が終わると、Contact Form 7 は最初からサンプルフォームを1つ用意しています。
まずはこれを確認し、どんな構造になっているかをつかみましょう。

  1. 左メニューから 「お問い合わせ」→「コンタクトフォーム」 を開く
  2. 「コンタクトフォーム 1」などの名前でフォームが1件表示されている
  3. タイトルをクリックすると編集画面が開き、上部に「フォーム」「メール」「メッセージ」「その他の設定」などのタブが並んでいる

フォームタブ内のコードは、だいたい次のような構造です（イメージ）。

<label> お名前
    [text* your-name]
</label>

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

<label> 題名
    [text your-subject]
</label>

<label> メッセージ本文
    [textarea your-message]
</label>

[submit "送信"]

ここで覚えておきたいのは、

  • HTML（<label> など）＋フォームタグ（[text] など）の組み合わせでフォームを組む
  • 右上の「ショートコード」をコピーして、固定ページに貼り付けて使う

という基本ルールだけです。
この時点では、まだ中身を細かくいじらず、「こういう仕組みなのか」と把握する程度で十分です。

問い合わせページ用の固定ページを作成する

フォームがあっても、ページに設置しなければユーザーからは見えません。
そこで、問い合わせ専用の固定ページを用意します。

  1. 「お問い合わせ → コンタクトフォーム」で
    該当フォームの一覧画面を開く
  2. フォーム名の右側に表示されているショートコードをコピー
    例：[contact-form-7 id="123" title="コンタクトフォーム 1"]
  3. 左メニューから 「固定ページ」→「新規追加」 をクリック
  4. ページタイトルに「お問い合わせ」など、分かりやすいタイトルを入力
  5. 本文エリアに、先ほどコピーしたショートコードを貼り付ける

ブロックエディタの場合は、

  • 「ショートコード」ブロックを追加
  • その中にショートコードを貼り付け

という形にすると、崩れにくくなります。

最後に「公開」ボタンを押せば、問い合わせページ自体は完成です。

サイトのメニューやフッターに問い合わせリンクを表示する

問い合わせページを作っただけでは、ユーザーがそこへ辿り着けません。
ヘッダーメニューやフッターなど、目につきやすい場所にリンクを追加しましょう。

ヘッダーメニューに追加する例

  1. 左メニューから 「外観」→「メニュー」 を開く
  2. 既存のメニュー（グローバルナビ）を選択
  3. 左側の「固定ページ」一覧から「お問い合わせ」にチェック
  4. 「メニューに追加」をクリック
  5. 表示位置をドラッグで調整して、「メニューを保存」

これで、サイト上部のナビゲーションに「お問い合わせ」リンクが表示されるようになります。

フッターやサイドバーにリンクを置く例

  • 「外観 → ウィジェット」から、
    テキストウィジェット・カスタムメニューウィジェットをフッターエリアに配置
  • 「お問い合わせ」ページへのリンクだけのメニューを作って割り当てる

といった方法もよく使われます。

ポイントは、「フォームを作る」だけでなく「アクセスしやすい導線まで用意する」ことです。
ここまで終われば、最低限の問い合わせ窓口としては機能し始めます。
次のステップでは、フォーム項目の追加やメール内容の調整など、実運用向けの細かな設定を詰めていく段階に進めます。

基本的な問い合わせフォームの作成と公開

ここからは、実際に「問い合わせフォーム」を形にして、サイト上に公開するまでの流れをまとめます。
大きく分けると、次の 4 ステップです。

  1. 新しいフォームを作る
  2. フォームの中身を整える
  3. ページにフォームを埋め込む
  4. 実際に送信テストをする

順番に見ていきます。

新規フォームを作成する手順

まずは、問い合わせフォームの“器”を用意します。

  1. 管理画面の左メニューから
    「お問い合わせ」→「コンタクトフォーム」を開く
  2. 画面上部の「新規追加」をクリック
  3. 「コンタクトフォームの名前」に、わかりやすい名前を付ける
    • 例：お問い合わせフォーム、資料請求フォーム、採用応募フォーム など
  4. 最初は、デフォルトのフォームテンプレートが入った状態になっているので、
    日本語サイトの場合はラベルの文言だけ整えておく（「お名前」「メールアドレス」など）
  5. ひとまず「保存」ボタンを押し、フォームを登録する

最初から完璧に作ろうとすると手が止まります。
まずは「名前・メールアドレス・本文」程度のシンプルなフォームから始め、あとで項目を足していくくらいの感覚で大丈夫です。

既存フォームの編集と設定の流れ

一度作ったフォームは、あとから自由に編集できます。
編集画面は大きく 4 つのタブに分かれています。

スクロールできます
タブ役割のイメージ
フォーム入力項目やレイアウトを決める
メール管理者宛て・ユーザー宛てメールの内容を決める
メッセージ送信成功／エラー時に表示するメッセージを変更する
その他の設定条件分岐など高度な設定を書く（必要な場合のみ）

基本的な編集の流れは次の通りです。

  1. 「お問い合わせ → コンタクトフォーム」から、編集したいフォームをクリック
  2. タブ「フォーム」で、
    • 不要な項目を削除
    • 足りない項目を追加ボタンから挿入（テキスト、メール、チェックボックスなど）
  3. タブ「メール」で、
    • 送信先メールアドレス（管理者）を確認・変更
    • 件名や本文のテンプレートに、フォームタグ（[your-name] など）を差し込む
  4. 必要に応じてタブ「メッセージ」で、
    • 「ありがとうございます。メッセージは送信されました。」などの文言を、自サイトのトーンに合わせて調整
  5. 編集が終わったら、必ず「保存」ボタンを押す

初心者がつまずきやすいのは、フォームタブの名前（name="your-name" の部分）と、メールテンプレート内のショートコード名を一致させることです。
名前を変えたら、メール側の [_post_title] なども合わせて見直すクセをつけておくと、後々のトラブルを防ぎやすくなります。

ショートコードでページにフォームを埋め込む方法

フォームができたら、次はページに表示させる作業です。
Contact Form 7 では「ショートコード」という短いコードを貼るだけでフォームが呼び出せます。

  1. 「お問い合わせ → コンタクトフォーム」の一覧画面で、
    各フォームのタイトルの右側にあるショートコードをコピー
    • 例：
    [contact-form-7 id="123" title="お問い合わせフォーム"]
  2. 「固定ページ → 新規追加」から、問い合わせ用ページを作成
  3. ページタイトルに「お問い合わせ」などを入力
  4. 本文エリアに、先ほどのショートコードを貼り付ける

ブロックエディタの場合は、

  • 文章ブロックではなく「ショートコード」ブロックを追加して、その中にコードを貼る

という形にすると、編集時に余計な装飾が入らず安全です。

ポイント

  • 1つのページに複数のフォームを置くことも可能ですが、基本は「1ページ1フォーム」のほうが管理しやすくなります。
  • 固定ページを公開後、「外観 → メニュー」でナビゲーションに追加するのを忘れないようにしておくと、ユーザーが迷いません。

フォーム公開後の動作テストのやり方

公開したら終わりではなく、必ず送信テストを行うことが重要です。
とくにメール周りの設定ミスは気づきにくいため、最初にしっかり確認しておきましょう。

  1. 公開した問い合わせページを、ブラウザで開く
  2. 実際のユーザーになったつもりで、すべての入力欄にテスト用の値を入れる
    • 名前：テスト太郎
    • メールアドレス：自分が受信を確認できるアドレス
    • 本文：テスト送信です など
  3. 送信ボタンを押し、
    • 入力エラーがあれば、エラー表示がわかりやすいか
    • 問題なければ完了メッセージが表示されるか
      をチェック
  4. 管理者宛てメールが届いているかを確認
    • 迷惑メールフォルダも確認
    • 文字化けや改行崩れがないかもチェックしておく
  5. ユーザー宛て自動返信メールを設定している場合は、
    • 送信者名・件名・本文の内容が自然か
    • 差出人メールアドレスが怪しく見えないか
      も合わせて確認

可能であれば、PC とスマホの両方からテストしておくと安心です。
スマホ表示で入力しづらいフォームは、その時点で改善しておくと離脱を防ぎやすくなります。

ここまでが、Contact Form 7 を使って「フォームを作る → ページに設置する → 正しく動くか確かめる」までの基本ラインです。
この土台ができていれば、次の段階として「項目を増やす」「デザインを整える」「スパム対策を強化する」といった応用にもスムーズに進めます。

フォーム項目（フィールド）の追加と設定

Contact Form 7 のフォームは、
「フォームタブ」 → 右上のタグ生成ボタン（テキスト・メール・チェックボックス…）からフィールドを追加していきます。

共通して押さえておきたいポイントは次の3つです。

  • 「必須項目にするかどうか」（* 付きタグかどうか）
  • 「name（名前）」の値（メールテンプレート側で呼び出すキーになる）
  • 「class や id」の指定（デザイン調整・JS連携に使う）

この前提をおさえたうえで、フィールドごとに見ていきます。

文字入力系フィールドの設定

テキスト入力欄・メールアドレス・URL・電話番号

ユーザーに「1行の文字入力」をしてもらう場面で使います。
タグ生成ボタンから、テキスト・メール・URL・電話番号を選びます。

よくある設定例は以下の通りです。

<label> お名前（必須）
  [text* your-name placeholder "山田太郎"]
</label>

<label> メールアドレス（必須）
  [email* your-email placeholder "example@example.com"]
</label>

<label> WebサイトURL
  [url your-url placeholder "https://example.com"]
</label>

<label> 電話番号
  [tel your-tel placeholder "09012345678"]
</label>

ポイント

  • text* や email* のように * が付くと「必須項目」になります
  • placeholder オプションを使うと、薄いグレー文字で入力例を表示できる
  • 電話番号を必須にするかどうかは、問い合わせ内容によって慎重に決める（離脱要因になりやすい）

数値入力・日付入力・複数行テキストエリア

「数量」「希望日」「詳細な要望」など、もう少し特殊な入力が必要なときに使います。

<label> 希望数量
  [number your-quantity min:1 max:100]
</label>

<label> 希望日
  [date your-date min:2025-01-01]
</label>

<label> お問い合わせ内容
  [textarea* your-message placeholder "できるだけ具体的にご記入ください。"]
</label>
  • number タグでは min: max: を指定して入力範囲を制限可能
  • date はブラウザによって日付ピッカーが表示される
  • textarea は複数行テキストエリア。長文入力が想定される項目は、基本的にこれを使う

文字入力系は、「何を入力してほしいのかが一目で伝わるラベルとプレースホルダー」を意識すると、問い合わせの質が上がります。

選択肢系フィールドの設定

ラジオボタン

選択肢の中から1つだけ選ばせたいときに使います。

<label> お問い合わせ種別
  [radio* your-kind use_label_element default:1
    "資料請求"
    "サービスに関する質問"
    "お見積もり"
  ]
</label>
  • radio* なので必須選択
  • use_label_element を付けると、文字部分をクリックしても選択でき、スマホでもタップしやすい

チェックボックス

複数選択を許可したいとき、
あるいは「この条件に同意します」のようなON/OFFの表現として使います。

<label> 興味のある項目（複数選択可）
  [checkbox your-interest use_label_element
    "SEO対策"
    "Web制作"
    "広告運用"
  ]
</label>
  • 「複数選択可」であることをラベルに明記しておくと親切
  • 1つだけチェックさせたいなら、用途としてはラジオボタンの方が適しています

ドロップダウン（セレクトボックス）

選択肢が多い場合や、フォームをコンパクトに見せたい場合に有効です。

<label> ご利用中のプラン
  [select* your-plan
    "未契約"
    "ライトプラン"
    "スタンダードプラン"
    "プレミアムプラン"
  ]
</label>
  • select* で必須化
  • 「未選択」の状態を作りたい場合は、先頭に "選択してください" のようなダミーを入れ、
    バリデーションで弾く運用も可能

選択肢系の共通ポイントは、選択肢自体をできるだけ少なく・わかりやすくすることです。
迷うほど選択肢があると、送信率が下がります。

確認系・特殊フィールドの設定

必須項目の指定方法

Contact Form 7 では、タグ名に * を付けるだけで必須になります。

  • 例：[text* your-name] / [email* your-email] / [select* your-plan]

さらに、メッセージタブで「必須項目が入力されていません。」などの文言を整えておくと、ユーザーにとって親切です。

注意点

  • 必須項目が多すぎると、フォーム離脱につながる
  • 「本当に必須なのはどれか？」を一度洗い出してから設定する

利用規約への同意チェックボックス

プライバシーポリシーや利用規約への同意は、チェックボックス＋テキストリンクで表現します。

<label class="agree">
  [checkbox* your-agree use_label_element "プライバシーポリシーに同意する"]
</label>
<p>
  プライバシーポリシーの内容は
  <a href="/privacy-policy" target="_blank" rel="noopener">こちら</a>
  からご確認いただけます。
</p>
  • チェックボックス自体を必須（checkbox*）にする
  • 規約の内容は、別ページでしっかり用意しておく（E-E-A-T 的にも重要）

クイズ形式のスパム防止フィールド

reCAPTCHA などがどうしても使えない場合の「簡易的なスパム対策」として、クイズタグが利用できます。

<label> スパム対策の質問：3 + 2 = ?
  [quiz* anti-spam "3+2=?|5"]
</label>
  • "質問|正解" の形式で指定
  • ボットはこの質問に答えられないことを期待した仕組み
  • 本格的なスパム対策としては reCAPTCHA などと組み合わせて使うのが現実的

ファイル添付フィールド

履歴書の送付や画像のアップロードが必要なフォームで使います。

<label> 添付ファイル（PDFまたは画像）
  [file your-file limit:5mb filetypes:pdf|jpg|png]
</label>
  • limit: でファイルサイズ制限（サーバー側制限も別途影響）
  • filetypes: で許可拡張子を制御
  • 個人情報や機密情報を受け取る場合は、利用目的・保存期間・取り扱いを必ず明示する

送信ボタンのラベルと属性設定

送信ボタンは [submit] タグで定義します。
文言やクラスを指定することで、デザインと文言を調整できます。

<div class="form-submit">
  [submit class:btn class:btn-primary "送信する"]
</div>
  • "送信する" の部分でボタンのラベルを変更
    • 例：「内容を確認して送信」「問い合わせを送信」など
  • class:btn class:btn-primary のように複数クラスを付与して、テーマ側の CSS と連携

送信ボタンのラベルは、押したあとの動きをイメージできる文言にしておくと、心理的ハードルが下がります。

フォーム項目の設計は、単なる技術作業ではなく、
「ユーザーに無理なく必要な情報を出してもらうための設計」そのものです。

  • 文字入力は最低限に
  • 選択肢はシンプルに
  • 同意やスパム対策はわかりやすく

この3点を基準に調整していくと、Contact Form 7 でも十分「ストレスの少ない問い合わせフォーム」を構築できます。

メール通知・自動返信・完了画面の設定

問い合わせフォームは「送信ボタンが押されたあと」が本番です。
ここでは、管理者宛てメール・ユーザー宛て自動返信・完了画面（メッセージ／サンクスページ）を一気に整えます。

前提として、すべて フォーム編集画面の「メール」「メッセージ」「その他の設定」タブで行います。

管理者宛てメールの基本設定

送信先・送信元・件名・ヘッダーの調整

フォーム編集画面 → タブ「メール」を開くと、次のような項目があります。

スクロールできます
項目役割のイメージ
送信先管理者が受け取るメールアドレス
送信元メールの From（差出人）に表示するアドレス
題名管理者宛てメールの件名
追加ヘッダーReply-To などを指定する欄
メッセージ本文実際に届くメールの本文テンプレート

最低限おすすめの設定イメージはこんな感じです。

送信先: admin@example.com

送信元: WordPressサイト名 <no-reply@example.com>

題名: 【お問い合わせ】[your-subject]

追加ヘッダー:
Reply-To: [your-name] <[your-email]>

ポイントは以下のとおりです。

  • 送信先
    • 実際に確認するメールアドレス（運用担当者のアドレス）を指定
    • 複数人で見たい場合は、転送設定やメーリングリストを利用
  • 送信元
    • 多くのサーバーは「自ドメインのメールアドレス」からの送信を前提にしているため、
      no-reply@自分のドメイン のようなアドレスを使うほうが迷惑メール判定されにくいです。
  • 追加ヘッダー（Reply-To）
    • ここにユーザーのメールアドレスを入れておくと、管理者が「返信」するだけでユーザーに返事が届きます。

メッセージ本文テンプレートの作り方

本文には、フォームで入力された値をメールタグ（ショートコード）で差し込みます。

以下の内容でお問い合わせを受け付けました。

お名前： [your-name]
メールアドレス： [your-email]
件名： [your-subject]

お問い合わせ内容：
[your-message]

-------------------------
送信日時： [_date] [_time]
送信元IP： [_remote_ip]
ブラウザ情報： [_user_agent]
  • [your-name] などのタグ名は、フォームタブで設定した name と一致させる必要があります。
  • [_date] [_remote_ip] といった、Contact Form 7 が自動で用意してくれる「特別なメールタグ」も使えます。

実務的には、「誰が・いつ・どの内容で問い合わせたか」がひと目で分かるようにしておくと、後からメールを探すときに便利です。

ユーザー宛て自動返信メールの設定

問い合わせを送ったユーザーに「受け付けました」というメールを送ると、安心感が大きく変わります。

自動返信メール用テンプレート（メール(2)）の編集

  1. フォーム編集画面 → タブ「メール」を開く
  2. 下の方にある「メール (2) を使用」にチェックを入れる
  3. メール (2) の各項目を次のように設定
送信先: [your-email]

送信元: サイト名 <no-reply@example.com>

題名: 【自動返信】お問い合わせありがとうございます

メッセージ本文:
[your-name] 様

この度はお問い合わせいただきありがとうございます。
以下の内容で受け付けました。

────────────────────
お名前： [your-name]
メールアドレス： [your-email]
件名： [your-subject]

お問い合わせ内容：
[your-message]
────────────────────

内容を確認のうえ、通常○営業日以内にご連絡いたします。
もしお心当たりのない場合は、このメールは破棄してください。

サイト名
URL: https://example.com/
  • 送信先はユーザーが入力したメールアドレス [your-email] を指定
  • 差出人は管理者用メールと同様、自サイトのドメインのアドレスを推奨

フォームで入力された項目をメールに差し込む方法

フォームタブで設定した各項目には、
画面上部に 「メールタグ：[your-name]」 のように表示される部分があります。

そのタグをコピーして、メール本文や題名・ヘッダーの中に貼り付けるだけでOKです。

例：

  • 題名に [your-subject] を入れる → 一覧で問い合わせ内容がざっくり把握できる
  • 本文の最初に [your-name] 様 → 宛名入りのメールになる

「フォームで使った name 値が、そのままメールで使える」と覚えておくとシンプルです。

完了メッセージとエラーメッセージのカスタマイズ

送信後に表示される「緑のメッセージ」や「赤いエラーメッセージ」は、
タブ「メッセージ」から変更できます。

代表的な項目だけ、文言の例を挙げておきます。

スクロールできます
種類初期メッセージのイメージ設定例
メールの送信に成功したときメッセージは送信されました。送信ありがとうございます。通常◯営業日以内にご連絡いたします。
入力内容にエラーがあるとき不正な入力です。入力内容に不足／誤りがあります。赤枠の項目をご確認ください。
必須項目が未入力のとき必須項目が入力されていません。必須項目が未入力です。各項目をご入力のうえ、再度送信してください。
メール送信に失敗したときメッセージの送信に失敗しました。申し訳ありません。サーバーエラーにより送信できませんでした。お急ぎの場合は◯◯宛に直接ご連絡ください。

ここで、「ユーザーが次にどうすればいいか」まで書いておくと、離脱を防ぎつつ信頼感も高まります。

別ページ型サンクスページへリダイレクトする方法

完了メッセージをその場に表示するのではなく、
「送信完了専用ページ（サンクスページ）」に遷移させたい場合は、少し工夫が必要です。

やり方は大きく2通りあります。

  1. JavaScript で CF7 のイベントを拾ってリダイレクト
  2. 専用の拡張プラグインを使う

ここでは、標準的な JavaScript を使う方法の概要だけ紹介します。

1. サンクスページを用意する

まずは普通の固定ページとして、
「お問い合わせありがとうございました」といった内容のサンクスページを作成し、URL を控えておきます。

例：https://example.com/contact/thanks/

2. フォーム送信後にリダイレクトするスクリプトを追加

テーマのフッター（footer.php）や、テーマが用意している「フッター用カスタムスクリプト欄」などに、次のようなコードを追加します。

<script>
document.addEventListener('wpcf7mailsent', function(event) {
  // 特定フォームだけリダイレクトしたい場合は、IDチェックも可能
  // if (event.detail.contactFormId != 123) return;

  window.location.href = '/contact/thanks/';
}, false);
</script>
  • wpcf7mailsent イベントは、Contact Form 7 が「送信完了」のタイミングで発火します
  • contactFormId を使えば、特定のフォームだけサンクスページへ飛ばすことも可能

JavaScript が難しい場合は、

  • 「Contact Form 7 redirect」系のプラグイン
  • フォーム用 SaaS（formrun など）のリダイレクト機能

を併用するほうが、ノーコードで安全に実現できるケースも多いです。

メール通知と完了画面の設計は、ユーザー体験と運用効率の両方に直結する部分です。

  • 管理者メール → 抜け漏れなく、探しやすく
  • 自動返信 → ユーザーに安心感を与える
  • 完了画面 → 次の行動（返信を待つ・他ページを読む）を自然に案内する

この3点を意識して調整しておくと、「問い合わせが来てから対応が完了するまで」をスムーズに回せるフォームになります。

デザインとユーザビリティのカスタマイズ

Contact Form 7 は、初期状態のままでも使えますが、
見た目と使いやすさを少し整えるだけで「ちゃんとしたサイト感」がぐっと増します。

ここでは、コードが苦手な方でも取り組みやすい範囲に絞って、
デザインとユーザビリティを改善する方法を整理します。

CSSでフォーム全体の見た目を整える

テーマ側の追加CSSを利用した調整

多くのテーマには、管理画面から独自CSSを書き足せる機能があります。

  • 外観 → カスタマイズ → 追加CSS
  • または「テーマ設定」の中の「追加CSS」「カスタムCSS」など

ここに、フォーム用のスタイルをまとめておくと、
テーマをアップデートしても上書きされにくく、安全です。

例：フォーム全体を見やすく整える最低限のCSS

/* Contact Form 7 全体の幅と余白 */
.wpcf7 form {
  max-width: 600px;
  margin: 0 auto;
}

/* 各フィールド間の余白 */
.wpcf7 form p {
  margin-bottom: 1.2em;
}

/* テキスト系入力欄の共通デザイン */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 0.6em 0.8em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* エラー時の強調 */
.wpcf7-not-valid {
  border-color: #e74c3c;
  background: #fff5f5;
}

ポイント

  • 幅を制限しつつ中央寄せにすると、スマホでもPCでも読みやすくなります。
  • input/textarea/select をまとめて指定すると、デザインが揃って「プロっぽく」見えます。
  • .wpcf7-not-valid の指定で、入力エラーの箇所が一目でわかるようになります。

テーマ（Lightning など）別のカスタマイズ例

Lightning のような有名テーマは、
フォームに使えるボタン用クラスや配色のルールが用意されていることが多いです。

例：Lightning のボタンスタイルに揃える

Lightning には btn・btn-primary 等のクラスがあるので、
送信ボタンにそれを当ててあげると、サイト全体のトーンと揃います。

フォーム側のタグ（Contact Form 7 のフォームタブ）

<p class="submit-area">
  [submit class:btn class:btn-primary "送信する"]
</p>

追加CSS側で微調整する

/* 送信ボタンの表示位置調整 */
.wpcf7 .submit-area {
  text-align: center;
  margin-top: 1.5em;
}

/* Lightning のボタンに少しだけ余白を追加 */
.wpcf7 .submit-area .btn {
  padding: 0.7em 2.5em;
}
  • テーマに元々あるデザインを「流用」するのが一番効率的です。
  • まずはテーマのボタンを真似て、細かいところだけ追加CSSで整える、という順番だと失敗しにくくなります。

プレースホルダーやラベルで入力しやすくする工夫

デザイン以前に、「何を書けばいいか」が直感的に分かることが、ユーザビリティでは最優先です。

おすすめの基本ルールは次のとおりです。

  1. ラベル（項目名）は具体的に
  2. 必須・任意を明確に
  3. プレースホルダーは「例」を書く

例：フォームタグ

<p>
  <label> お名前（必須）
    [text* your-name placeholder "山田太郎"]
  </label>
</p>

<p>
  <label> メールアドレス（必須）
    [email* your-email placeholder "example@example.com"]
  </label>
</p>

<p>
  <label> ご相談内容（できるだけ具体的に）
    [textarea your-message placeholder "例：◯月◯日に◯◯について相談したい  など"]
  </label>
</p>

さらに、必須/任意を視覚的に示したいときは、CSSで色を付けるのも有効です。

<label> お名前 <span class="required">必須</span></label>
.wpcf7 .required {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  color: #fff;
  background: #e74c3c;
  border-radius: 3px;
}
  • ラベルに「電話番号」だけ書くより、「電話番号（連絡のつきやすい番号）」などとすると、どの番号を書くべきか迷われにくくなります。
  • プレースホルダーに注意書きまで詰め込みすぎると読まれないので、「短い例＋詳しい説明はラベル側」くらいの分担がおすすめです。

送信ボタンのデザインとクラス属性の変更

送信ボタンは、フォーム全体の印象を決める大事な要素です。
Contact Form 7 では、[submit] タグにクラスを付けておき、CSS で整えます。

フォーム側（フォームタブ）

<p class="submit-row">
  [submit class:contact-submit "送信する"]
</p>

CSS 側

/* 送信ボタンのレイアウト */
.wpcf7 .submit-row {
  text-align: center;
}

/* ボタンの見た目 */
.wpcf7 .contact-submit {
  display: inline-block;
  padding: 0.7em 3em;
  border-radius: 4px;
  border: none;
  background: #0073aa;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* ホバー時の変化 */
.wpcf7 .contact-submit:hover {
  background: #005f8d;
}

ポイント

  • テーマに「ボタン用クラス」がある場合は、それをそのまま指定してしまうのが最も簡単です。
  • ホバー時の色変化があると、ボタンが“押せる”ことが直感的に伝わります。
  • 入力中はボタンが見えず、スクロールしないと現れないケースも多いので、ボタン周りは余白を少し大きめに取ると気づかれやすくなります。

完了メッセージの表示位置やスタイルの調整

Contact Form 7 の完了メッセージ・エラーメッセージは、
<div class="wpcf7-response-output"> としてフォーム下部に表示されます。

CSS だけでも、かなり見やすくすることができます。

例：スタイルの調整

/* 共通スタイル */
.wpcf7-response-output {
  margin: 1.5em 0 0;
  padding: 0.8em 1em;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* 成功メッセージ */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2ecc71;
  background: #f5fff9;
  color: #2e7d32;
}

/* 入力エラー */
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #e74c3c;
  background: #fff5f5;
  color: #c0392b;
}

/* メール送信失敗など */
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #f39c12;
  background: #fffaf0;
  color: #d35400;
}

表示位置を少し上にしたい場合

フォームの一番下だと気づきにくい場合、
ラップ要素に余白をとって視線を集めるだけでも改善します。

.wpcf7 {
  position: relative;
  padding-top: 1em;
}

もっと本格的に、「フォームの上に出したい」「ページ最上部に帯を出したい」といった場合は、
JavaScript で .wpcf7-response-output を別の位置に移動させる方法もありますが、
初心者にとってはハードルが高いため、まずは 色と余白で「目に入りやすくする」ところから始めるのがおすすめです。

デザインとユーザビリティの調整は、小さな改善の積み重ねです。

  • CSSでレイアウトと統一感を整える
  • ラベルとプレースホルダーで迷いを減らす
  • ボタンとメッセージを目立たせて、次に何が起こるかを分かりやすくする

この3点を押さえておくだけでも、Contact Form 7 のフォームは「ただ動くだけ」から「きちんと使われるフォーム」に変わっていきます。

スパム対策とセキュリティ強化

問い合わせフォームは、外部に公開された「入口」です。
便利である一方、スパム送信・ボット攻撃・情報漏洩のリスクを抱えやすい場所でもあります。

ここでは、Contact Form 7 を使ううえで押さえておきたいセキュリティとスパム対策を、実務目線で整理します。

Contact Form 7のセキュリティリスクを理解する

Contact Form 7 自体は、長年メンテナンスされている信頼性の高いプラグインですが、
設定や運用次第で、次のようなリスクが生まれます。

  • フォームから大量のスパムメールが送られる
  • 迷惑メール配信の踏み台にされ、サーバーの評価が下がる
  • 不正なファイルをアップロードされる
  • 通信経路が暗号化されておらず、入力内容を盗み見られる可能性がある
  • バージョンが古く、既知の脆弱性を突かれる

とくに重要なのは、

  1. フォームは常にボットに狙われている前提で考えること
  2. WordPress／プラグイン／サーバーをこまめに更新すること

です。
「うちは小さなブログだから狙われないだろう」は通用しません。ボットは規模に関係なく、自動でフォームを機械的に回ります。

reCAPTCHAを使ったボット対策

Google reCAPTCHA は、
「人間のアクセス」と「ボットのアクセス」を判別するための仕組みです。

Contact Form 7 は、reCAPTCHA と公式に連携できるため、まず最初に設定を検討したい対策です。

ざっくりした導入の流れは次のとおりです。

  1. Google reCAPTCHA のサイトで、ドメインを登録してサイトキーとシークレットキーを取得
  2. WordPress 管理画面 → 「お問い合わせ → インテグレーション」から reCAPTCHA の設定画面を開く
  3. 取得したキーを入力・保存
  4. Contact Form 7 側が自動的にフォームへ反映

※バージョン（v3／v2）によって見え方や評価方法が異なるため、公式ドキュメントを確認しながら選ぶと安心です。

reCAPTCHA を導入してもスパムが完全になくなるわけではありませんが、ボットによる機械的な送信は大きく減らせます。

あわせて読みたい
reCAPTCHA完全ガイド！導入方法や導入効果、注意すべきポイントなど徹底解説！ インターネット上でのセキュリティ対策は、サイト運営者にとって喫緊の課題となっています。 「reCAPTCHAの実装って難しくないの？」「ユーザーの操作性に影響を及ぼさ…

AkismetやCloudflare Turnstileによる迷惑メール対策

reCAPTCHA とあわせて、複数の防御レイヤーを持っておくと安心です。

Akismetによるスパム判定

Akismet は、もともとコメントスパム対策用のサービスですが、
Contact Form 7 からの送信にも応用できます。

  • 特定のフィールド（名前・メール・本文など）を Akismet に渡し、スパム判定してもらう
  • スパムと判断された送信を弾く、または別扱いにする

設定には多少の慣れが必要ですが、「人間によるスパム」も一定程度フィルタリングできるのが強みです。

あわせて読みたい
Akismet完全ガイド！なぜ導入すべきか？その必要性と留意点、導入方法など徹底解説！ インターネットでブログやウェブサイトを運営していると、スパムコメントや迷惑な自動投稿に頭を悩ませることはありませんか？ 「コメント欄が荒れていて管理が大変……」…

Cloudflare Turnstileによるチェック

Cloudflare Turnstile は、reCAPTCHA のような「人間判定」を行う無料サービスです。

  • Cloudflare アカウントを作成し、サイトを登録
  • Turnstile 用のサイトキー／シークレットキーを取得
  • 対応プラグインや Contact Form 7 用アドオンでキーを設定

画像選択や「私はロボットではありません」チェックよりも、ユーザーのストレスが少ないのがメリットです。

どれか一つで万能、というものはないため、
reCAPTCHA + Turnstile + 簡易クイズ など、段階的に組み合わせて運用しているサイトも多くあります。

通信の暗号化（SSL）とアクセス制御のポイント

フォームの安全性は、プラグインの設定だけでは完結しません。
サイト全体のセキュリティ基盤も同時に整える必要があります。

SSL（HTTPS）の必須化

  • サイトURLが https:// で始まっているかを確認
  • レンタルサーバーの管理画面から無料SSL（Let’s Encrypt など）を有効化
  • WordPress一般設定・検索置換ツールで http → https へ統一

HTTPS で通信を行うことで、
フォームに入力された名前・メールアドレス・メッセージなどの盗聴リスクを大幅に下げられます。

問い合わせフォームを設置するサイトで常時SSL化していないのは、
現代では「かなり危険」かつ「ユーザーから見ても不安」な状態と考えてください。

あわせて読みたい
SSL化とは？基礎知識や導入方法、メリット・デメリットなどを初心者向けに徹底解説！ 「最近、ウェブサイトをSSL化しなければならないって聞いたけど、具体的にSSLって何？」「SSL化したほうがいいって言われたけど、実際にどんなメリットがあるんだろう？…

管理画面・フォームへのアクセス制御

  • WordPress 管理画面へのログインURLを知られやすいままにしない
  • ログイン試行回数制限や二段階認証を導入しておく
  • 海外からのアクセスを制限する／WAF（Webアプリケーションファイアウォール）を有効化する

これらはフォームそのものというより、サイト全体を守るための防御網です。
Contact Form 7 を守る＝WordPress 全体のセキュリティを底上げする、と考えるとイメージしやすくなります。

スパムメールが増えたときに確認すべきチェックリスト

急にスパム送信が増えたと感じたら、
次のような項目を一つずつチェックしてみてください。

  1. プラグイン・WordPress本体は最新か
    • Contact Form 7、WordPress、関連プラグインをアップデートしたか
  2. reCAPTCHAやTurnstileは正常に動いているか
    • キーの期限切れ・設定ミスがないか
    • 表示エラーやコンソールエラーが出ていないか
  3. フォーム項目が「ボットにやさしすぎないか」
    • 同じ文言のスパムが多い場合、クイズタグや簡易的な質問を1つ追加してみる
    • 短すぎるフォーム（名前＋メール＋本文のみ）だと、スクリプトが送りやすい
  4. 送信元のパターンを把握したか
    • 同じドメイン／同じIPからの送信が多ければ、サーバーやWAFでブロックできないか検討
  5. ファイル添付をむやみに開いていないか
    • 不審な添付ファイルは絶対にPCで直接開かず、まずウイルスチェック
  6. 問い合わせメールの扱い方を社内で共有しているか
    • 「怪しいメールはリンクを踏まない／添付を開かない」などの基本ルールをスタッフ全員で確認

スパム対策は「これをやったら終わり」ではなく、
状況を見ながら少しずつレベルを上げていく継続作業です。

フォームは、ユーザーとの最初の接点であり、
同時に攻撃者にとっても入り込みやすい入口です。

  • プラグイン側の設定（reCAPTCHA・Akismet・Turnstile）
  • サイト側の基盤（SSL・WAF・ログイン保護）
  • 日々の運用（更新・ログ確認・メールの取り扱い）

この3つをバランスよく整えておくことで、
Contact Form 7 を「安心して使える問い合わせ窓口」として長く運用できるようになります。

便利機能・高度なカスタマイズ

ここからは、Contact Form 7 を「ただの問い合わせフォーム」から一歩進めて、
実務で使いやすいレベルに引き上げるための拡張テクニックをまとめます。

ここに書いている内容は、いきなり全部やる必要はありません。
「必要になったタイミングで、1つずつ取り入れる」くらいの感覚で読んでください。

入力内容確認画面やステップフォームの実装

1ページで入力 → すぐ送信、という流れだと、

  • 入力ミスに気づきにくい
  • 項目が多いと離脱されやすい

といった問題が出やすくなります。
そこで使えるのが「確認画面」と「ステップフォーム（分割フォーム）」です。

Multi-Step Formsや確認画面用アドオンの活用

代表的なやり方は以下の2つです。

  • 確認画面用アドオンで「入力内容の確認ページ」を挟む
  • Multi-Step Forms などのプラグインでフォームを分割し、
    「ステップ1 → ステップ2 → 完了」と段階的に送信させる

これらのアドオンは、概ね次のような仕組みで動きます。

  • 入力内容を一旦ブラウザ側やセッションに保持
  • 確認画面用のテンプレートに、[your-name] などのタグとして再表示
  • ユーザーが「送信」ボタンを押した段階で、初めてメール送信

確認画面・ステップフォームを導入する目的は、入力への不安を減らして送信率を上げることです。
特に、金額の大きな見積もりや申込フォームでは、確認画面があるだけで信頼感が変わります。

開発終了済みアドオンを使う際の注意点

確認画面系のアドオンの中には、すでに開発・更新が止まっているものもあります。
そのようなプラグインを使う場合は、次の点を必ず意識してください。

  • 最新の WordPress・Contact Form 7 との互換性検証がされていない
  • 将来のアップデートで、いきなり動かなくなる可能性がある
  • セキュリティホールが見つかっても、修正されないリスクが高い

実務的な判断としては、

  • これから新規導入する場合 → 極力「現在もメンテナンスされているプラグイン」を選ぶ
  • すでに利用中の場合 → 段階的に代替プラグインや別の仕組みへの移行を検討しておく

というスタンスが安全です。

条件分岐フォームの作成（Conditional Fields）

「問い合わせ種別によって、表示する項目を変えたい」
「法人を選んだときだけ、会社名・部署名を出したい」

こうした条件付き表示は、
「Conditional Fields for Contact Form 7」のようなアドオンで実現できます。

イメージとしては：

  1. ラジオボタンやセレクトボックスで条件となる項目を作成
  2. 「この値のときは、このグループを表示」といったルールを設定

サンプルイメージ（考え方だけ）：

<!-- 種別選択 -->
[radio* your-kind use_label_element "個人" "法人"]

<!-- 条件付きグループ（法人向け項目） -->
[group法人]
  [text your-company "会社名"]
  [text your-department "部署名"]
[/group法人]

管理画面の UI 上で「your-kind が 法人 のときに group法人 を表示」のような条件を組みます。

ポイントは、「最初から全部見せず、必要なときだけ項目を見せる」ことで、ユーザーの負担を減らすことです。
ただし、条件が複雑になりすぎると逆に管理しづらくなるため、
「2〜3パターンに収まるかどうか」を目安に使うとよいです。

決済連携などの拡張（PayPal & Stripe Add-onなど）

Contact Form 7 は、

  • シンプルな購入フォーム
  • 予約時の前金、参加費の決済

のような用途でも使われます。
その際に活躍するのが、PayPal や Stripe と連携するアドオンです。

使い方のイメージ：

  1. フォーム内で「商品」「金額」「数量」などを入力させる
  2. 送信後、自動的に PayPal / Stripe の決済画面へ遷移
  3. 決済完了後に、ユーザーと管理者へ通知メール

ただし、ここで注意したい点があります。

  • Contact Form 7 は、本格的なネットショップカートではない
  • 在庫管理・領収書発行・会員管理などは、自前で設計する必要がある
  • 決済データの扱いには、法的・セキュリティ的な責任が伴う

少額決済や単発のイベント申込などには向きますが、
継続課金や本格的な EC サイトでは、専用のカートシステムや決済プラットフォームの利用を検討する方が現実的です。

Google Analyticsなどでコンバージョンを計測する方法

フォーム送信を「コンバージョン（成果）」として計測しておくと、

  • どのページからの流入が多いか
  • どの広告・キャンペーンから問い合わせが来ているか

といった分析が可能になります。

Contact Form 7 は、送信完了時に wpcf7mailsent というイベントを発火するため、
これをフックして GA4 や Google タグマネージャーにイベントを送るのが定番です。

例：GA4 に直接送るシンプルなコード（イメージ）

<script>
document.addEventListener('wpcf7mailsent', function(event) {
  // 特定フォームだけ計測したい場合は ID 条件を追加
  // if (event.detail.contactFormId != 123) return;

  if (typeof gtag === 'function') {
    gtag('event', 'contact_form_submit', {
      'event_category': 'contact',
      'event_label': 'CF7'
    });
  }
}, false);
</script>
  • このスクリプトをフッターなどに埋め込むと、送信完了ごとに GA にイベントが飛ぶようになります。
  • Google タグマネージャーを使う場合は、このイベントをトリガーにしてタグを発火させる構成にできます。

計測をきちんと入れておくと、
「フォーム自体を改善すべきか」「集客の流れを改善すべきか」の判断材料が得られるため、
中長期的なサイト運営では非常に重要です。

あわせて読みたい
【GA4】Googleアナリティクスとは　使い方やできることなど初心者向けに徹底解説！ 「Googleアナリティクスってどう使うの？」「GA4って何が違うの？ 従来のGoogleアナリティクスとは何が変わったんだろう？」「データ分析って難しそう、でもサイトのパ…

バリデーションルールを追加して入力チェックを強化する

標準でも、

  • メール形式チェック
  • 必須チェック
  • 数値・URL・日付の基本的なチェック

は備わっていますが、
運用上「ここはもう少し厳しくチェックしたい」というケースもあります。

代表的なやり方は2つです。

  1. HTML5属性で簡易チェックを追加する
[tel your-tel minlength:10 maxlength:11]
  • 電話番号の桁数制限など、簡単なルールはこれで対応可能
  1. PHPのフィルターフックで独自バリデーションを追加する

functions.php などに、以下のようなコードを追加して、
特定フィールドにだけ追加チェックをかけることもできます（概要イメージ）。

function my_cf7_validate_tel($result, $tag) {
  $name = $tag->name;

  if ($name === 'your-tel') {
    $value = isset($_POST[$name]) ? $_POST[$name] : '';

    // 数字とハイフン以外が含まれていたらエラー
    if ($value && !preg_match('/^[0-9\-]+$/', $value)) {
      $result->invalidate($tag, '電話番号は数字とハイフンのみで入力してください。');
    }
  }
  return $result;
}
add_filter('wpcf7_validate_tel*', 'my_cf7_validate_tel', 10, 2);
add_filter('wpcf7_validate_tel', 'my_cf7_validate_tel', 10, 2);
  • 技術的ハードルは少し上がりますが、
    「フォーム経由で受け取りたいデータの質」を担保するための強力な手段です。

フォームID・クラス属性を活用した細かな制御

Contact Form 7 のフォームは、

  • 各フォームごとに一意の ID
  • 任意のクラス属性

を付与できます。
これを活用すると、「このフォームだけ CSS を変える」「特定フォームだけ JS を効かせる」といった制御がしやすくなります。

フォームにクラスを付ける

ショートコードに html_class を付ける方法が代表的です。

[contact-form-7 id="123" title="お問い合わせ" html_class="cf7-contact-main"]

これでフォームのラップ要素に cf7-contact-main というクラスが付きます。

CSS 例：

/* 特定フォームだけ背景色を変える */
.cf7-contact-main {
  background: #fafafa;
  padding: 1.5em;
  border-radius: 6px;
}

JS 例（特定フォームの送信時だけ処理したい場合）：

<script>
document.addEventListener('wpcf7mailsent', function(event) {
  var form = event.target;

  if (form.classList.contains('cf7-contact-main')) {
    console.log('メインお問い合わせフォームが送信されました');
    // ここに追加処理を書く
  }
}, false);
</script>
  • 全フォームに同じ CSS をかけるのではなく、用途別フォームに専用クラスを付けておくと、後から編集しやすくなります。

高度なカスタマイズは、「やろうと思えばかなり何でもできてしまう」世界です。
その一方で、やりすぎるとコードが複雑になり、引き継ぎや保守が難しくなります。

  • 売上や業務効率に直結する部分から優先して
  • 本当に必要な機能だけを
  • テスト環境で検証しながら少しずつ導入する

この3つを意識しておくと、Contact Form 7 を無理なく「戦力化」していけます。

トラブルシューティングとよくある質問

問い合わせフォームは一見シンプルですが、
「表示されない」「メールが届かない」といったトラブルはよく起こります。
ここでは、初心者でも順番にチェックすれば原因にたどり着きやすいポイントを整理します。

フォームがページに表示されない場合

フォームがまったく表示されないときは、次の順番で確認してみてください。

  1. ショートコードが正しいか
    • [contact-form-7 id="◯◯" title="◯◯"] がそのまま貼れているか
    • ブロックエディタなら「ショートコード」ブロックを使っているか
    • 可視化エディタで変なタグが混ざっていないか
  2. フォーム自体が存在しているか
    • 管理画面「お問い合わせ → コンタクトフォーム」に、該当IDのフォームが残っているか
    • ゴミ箱に移動していないか
  3. プラグインの有効化状態
    • Contact Form 7 が「有効」になっているか
    • 似た名前のフォームプラグインと競合していないか
  4. キャッシュプラグイン・CDN
    • 表示が古いキャッシュのままになっていないか
    • キャッシュを一度クリアして再読み込みしてみる

とくに多いのは、ショートコードのコピペミスとキャッシュの影響です。
まずはこの2つを落ち着いて見直してみてください。

送信ボタンを押してもメールが届かない場合

フォーム上は「送信完了」と出るのに、メールだけ届かないトラブルもよくあります。

サーバー側メールアドレスと転送設定の確認

  1. 「メール」タブの「送信先」のアドレスは正しいか
    • スペルミス（@gmial.com など）がないか
    • 存在しないアドレスになっていないか
  2. サーバー側でそのアドレスが正しく受信できるか
    • レンタルサーバーのメール機能で、同じアドレスに別経路からテスト送信してみる
    • 転送設定をしている場合は、元のメールボックスにも残るような設定にしておく
  3. 送信元メールアドレスの見直し
    • 「送信元」にフリーメール（Gmail など）を使っていると、サーバー設定によってはブロックされることがあります。
    • 原則として、自分のドメインのメールアドレス（例：no-reply@example.com）を使うほうが安全です。

迷惑メールフォルダに振り分けられるときの対処

  • まず、Gmail・Outlook などで迷惑メールフォルダを必ず確認する
  • 迷惑メールに入っていた場合は、
    • 「迷惑メールでない」として学習させる
    • 差出人アドレスを連絡先に登録しておく

送信側でできる対策としては、

  • 差出人名・件名を不自然なものにしない（記号だらけ・英語だらけは避ける）
  • SPFレコード・DKIMなど、サーバー側のメール認証設定を整える（※サーバー管理側の領域）

が挙げられます。

送信できない・エラー表示が出るときの原因と解決策

画面上部に赤いメッセージが出て送信できない場合は、
エラーメッセージの種類をよく読むのが最短ルートです。

よくある原因の例：

  • 必須項目が空欄 → 対象項目が赤枠になっていないか確認
  • メールアドレスの形式が違う → 全角文字やスペースが混ざっていないか
  • reCAPTCHA・Akismet などのスパム判定に引っかかっている
  • サーバー側のメール送信制限（1時間あたりの送信数制限など）

チェックのコツ：

  1. いったんスパム対策系プラグインをオフにして、送信できるか試す
  2. テスト的に、最小限のフォーム（名前＋メール＋本文）だけにして送ってみる
  3. それでもダメな場合は、サーバーのエラーログやContact Form 7の公式ドキュメントを確認

「昨日まで送れていたのに、今日から突然ダメ」という場合は、
サーバー側の仕様変更や、他プラグインのアップデートの影響も疑ってみてください。

添付ファイルが送信できないときのチェックポイント

ファイルフィールドを使っている場合、
設定やサーバーの制限でエラーになることがよくあります。

確認すべきポイント：

  • ファイルサイズ制限を超えていないか
    • Contact Form 7 側の limit: だけでなく、PHP の upload_max_filesize post_max_size などサーバー設定も影響します。
  • 許可していない拡張子を送ろうとしていないか
    • タグに filetypes:pdf|jpg|png と書いている場合、docx は弾かれます。
  • メール設定で「ファイル添付」をちゃんと指定しているか
    • 「メール」タブの「ファイル添付」に [your-file] を入れているか

危険なファイル形式を安易に許可すると、マルウェア感染の入口になりかねません。
本当に必要な拡張子だけを許可し、怪しい添付ファイルは必ずウイルスチェックを挟む運用をおすすめします。

条件分岐や確認画面がうまく動作しない場合

条件分岐用プラグインや確認画面アドオンを入れている場合、
うまく動かない原因は次のようなものが多いです。

  • Contact Form 7 のバージョンとアドオンの対応状況が合っていない
  • 条件に使うフィールド名を変更したのに、条件式側が古いまま
  • JavaScriptエラー（他プラグインやテーマのスクリプトと干渉）

対処の手順としては：

  1. 公式の対応バージョンを確認し、最新版の組み合わせかどうかを見る
  2. 条件式やショートコードの name が一致しているかを確認
  3. ブラウザの開発者ツールでコンソールエラーが出ていないか確認
  4. 一時的に他プラグインを止め、テーマをデフォルト（Twenty系）にして再テスト

確認画面系アドオンは特に、開発終了後に CF7 本体の仕様変更で動かなくなるケースがあるため、
中長期運用ならメンテされているプラグインを選ぶのが安全です。

文字化けが発生するときの設定見直し

メール本文や管理画面で「日本語が文字化けする」場合は、
文字コードまわりの設定を疑います。

チェックポイント：

  • WordPress 本体の文字コードは通常 UTF-8（デフォルトのままならOK）
  • Contact Form 7 の「メール」タブ → 追加ヘッダーに、独自の Content-Type を書いていないか
  • サーバー側のメール送信設定で、文字コード変換が行われていないか

Contact Form 7 が自動で付けるヘッダーを、無理に上書きしてしまうと文字化けしやすくなります。
特別な理由がない限り、「追加ヘッダー」に Content-Type を書かないのが無難です。

送信者名が「WordPress」になってしまうときの修正方法

届いたメールの差出人名が「WordPress」のままだと、
社内でも埋もれがちですし、ユーザーから見ても分かりにくくなります。

修正方法：

  1. フォーム編集画面 → 「メール」タブを開く
  2. 「送信元」の欄を、次のような形式に変える
サイト名 お問い合わせ担当 <no-reply@example.com>
  • サイト名 の部分が差出人名として表示されます
  • アドレス部分は、自サイトのドメインのメールアドレスを推奨

複数フォームがある場合は、それぞれのフォームで送信元を変えて、
「採用フォーム」「資料請求フォーム」などと区別するのも有効です。

自動返信メールを使えるか・設定のコツ

自動返信メールは、ユーザーに安心感を与えるための必須パーツと考えてよいでしょう。

利用手順のポイント：

  • 「メール」タブで「メール (2) を使用」にチェックを入れる
  • 「送信先」にユーザーのメールタグ（例：[your-email]）を指定
  • 本文には、
    • あいさつ
    • 受付内容の写し
    • 今後の流れ（何日以内に返事するか等）
      を簡潔に書く

例文イメージ：

[your-name] 様

この度はお問い合わせいただきありがとうございます。
以下の内容で受け付けました。

────────────────
件名： [your-subject]
メールアドレス： [your-email]

お問い合わせ内容：
[your-message]
────────────────

通常◯営業日以内にご連絡いたしますので、
今しばらくお待ちください。

やりがちな失敗は、メール (1) とメール (2) の「送信先」を同じにしてしまい、
管理者に同じ内容が2通届くパターンです。
「(1)は管理者」「(2)はユーザー」と役割を分ける意識を持つと混乱しにくくなります。

サンクスページや完了画面は作成できるか

はい、可能です。
やり方は大きく分けて2通りあります。

  1. Contact Form 7 標準の「完了メッセージ」をカスタマイズする
    • 「メッセージ」タブで、送信成功時の文言を変更
    • 例：
      「お問い合わせありがとうございます。通常◯営業日以内にご連絡いたします。
      引き続き◯◯のページもご覧ください → ◯◯へのリンク」
  2. 別ページ型のサンクスページ（完了ページ）を作成する
    • 固定ページとして「送信完了」ページを作り、URL を用意
    • wpcf7mailsent イベントを使って、送信完了時にそのURLへリダイレクトする
    • あるいは専用のリダイレクト系アドオンを利用する

別ページ型にするメリットは、

  • Google Analytics などで「サンクスページ到達＝コンバージョン」として計測しやすい
  • サンクスページ内で、資料ダウンロードや関連記事など「次のアクション」を提案できる

といった点です。

トラブルシューティングで大事なのは、
「いきなり全部を疑わず、1つずつ切り分ける」ことです。

  • 表示の問題か、送信処理の問題か、メール配送の問題か
  • Contact Form 7 側の設定か、サーバー／テーマ／他プラグインの問題か

この視点で順番にチェックしていけば、
初心者でも少しずつ「どこまでが自分で直せる範囲か」が見えてきます。

Contact Form 7と他サービスの比較・使い分け

Contact Form 7 は「WordPress 内で完結するフォーム」、
formrun などの外部サービスは「クラウド上で運用するフォーム管理ツール」という立ち位置です。

どちらが優れているというより、サイト規模・運用体制・欲しい機能によって向き不向きが分かれます。

formrunなど外部フォームサービスを選ぶメリット

フォーム作成から問い合わせ対応・顧客管理まで【formrun】
あわせて読みたい
formrun完全ガイド！使い方、評判、無料・有料プラン機能など徹底解説！ 「formrunを使ってみたいけど、本当に簡単にフォームが作れるの？」「無料プランのままで十分運用できるか不安……」「問い合わせ対応の履歴管理や自動返信はどう設定すれ…

デザインテンプレートから素早くフォームを作る

formrun のような外部フォームサービスは、最初から多数のテンプレートが用意されています。

  • 「お問い合わせ」「資料請求」「採用応募」「イベント申込」など用途別にテンプレートがある
  • 色・フォント・パーツ配置がある程度できあがっているため、デザインに自信がなくてもそれらしいフォームになる

Contact Form 7 だと、フォームの見た目はテーマ＋CSS次第です。
「とりあえず見た目も整ったフォームをすぐ出したい」という場合、テンプレートがある外部サービスは強みがあります。

クリック操作中心で項目やレイアウトを調整できる

多くの外部サービスは「ドラッグ＆ドロップ型」のUIを採用しています。

  • テキストボックス・セレクトボックス・チェックボックスなどをクリックだけで追加
  • 横並び・段組なども、グリッドを動かす感覚で調整できる

Contact Form 7 では、

  • HTML＋短いタグ（[text your-name] など）を自分で配置
  • レイアウト調整は CSS での指定が必須

となるため、コードアレルギーが強い人には少しハードルが高めです。
「ノーコード寄りで作業したい」のであれば、外部サービスのほうがストレスは少なくなります。

入力しやすく離脱しにくいUIを用意しやすい

formrun などは、最初からフォーム最適化を意識した UI が組まれています。

  • スマホ表示前提のレイアウト
  • 入力ステップの表示（ステップバーなど）
  • エラー表示や入力補助が分かりやすい

これらは、Contact Form 7 でも作り込めば実現可能ですが、

  • JavaScript のカスタマイズ
  • CSS の細かい調整
    が必要になり、制作コストがかかります。

「CV（コンバージョン）をしっかり追いたいフォーム」「広告からの流入をがっつり受けたいランディングページ用フォーム」などは、
最初から UI に配慮された外部サービスを使った方が、時間対効果がよいケースも多いです。

問い合わせ対応状況を可視化できるダッシュボード機能

外部フォームサービスの大きな特徴は、「問い合わせ管理」が前提になっていることです。

  • 受信した問い合わせが一覧化され、ステータス（未対応／対応中／完了）を付けられる
  • 担当者ごとにアサイン（割り当て）ができる
  • メモ・対応履歴を残して、社内で共有できる

Contact Form 7 は、あくまで「メール送信」が基本です。
問い合わせ管理はメールクライアント側の運用に任されるため、

  • メールが埋もれる
  • 対応漏れに気づきにくい
  • 担当が変わったときに引き継ぎしづらい

といった課題が出やすくなります。
人数が多いチームや、問い合わせ数が一定以上あるサイトでは、
ダッシュボード機能のある外部サービスが結果的に楽になることが多いです。

サイト規模・運用体制別のフォームツールの選び方

ざっくりとした目安として、以下のように考えると判断しやすくなります。

スクロールできます
状況・条件Contact Form 7 が向くケース外部サービスが向くケース
サイト規模個人ブログ、小規模コーポレート中〜大規模サイト、多数のLP
問い合わせ件数1日数件〜月数十件毎日多くの問い合わせがある
担当体制1人～少人数で対応チームで分担して対応
必要な機能シンプルな問い合わせ、基本的な通知ステータス管理、担当者アサイン、分析機能
カスタマイズ自分でコードを触る余裕があるノーコードで素早く改善したい

判断のポイントをもう少し整理すると、次のようになります。

  • WordPress だけで完結させたい／ランニングコストを抑えたい
    → Contact Form 7 が第一候補
  • フォームの数が増えてきて、誰が何を対応しているか分かりにくくなってきた
    → formrun などの外部サービスで「案件管理」まで含めて設計した方が楽
  • 広告を運用していて、LPごとに細かくCV計測・ABテストをしたい
    → 外部サービスのテンプレート＋分析機能＋タグ連携を活用する選択肢も検討
  • 法務・セキュリティ要件が厳しく、ログ管理やアクセス権限が重要
    → 自社のセキュリティポリシーと、利用予定のサービスの仕様を比較して、
    どちらがより要件に合うかを確認（どちらが絶対に安全という話ではなく、「どちらが自社の運用に合うか」の問題です）。

実務的には、

  • サイト全体の「お問い合わせ」は Contact Form 7（WordPress）で管理
  • 特定のキャンペーンや採用フォームなど、業務フローが重たい部分だけ外部サービスに切り出す

というハイブリッド運用もよくあります。

「すべてを 1 つのツールで解決しよう」と考えるより、
「どのフォームは WordPress 内で完結させるか」「どのフォームはクラウドサービスに任せるか」を整理しておくと、
運用がぐっと楽になり、トラブルも減らせます。

まとめ｜Contact Form 7を使いこなして信頼される問い合わせ窓口を作ろう

問い合わせフォームは、ただ「メールが飛べばいい」ものではありません。
サイトに来てくれた人と、最初にきちんと対話するための入口です。

ここまでの内容を、実際の運用の流れに沿って整理し直してみます。

最初の一歩：小さく始めて、あとから育てる

まずは、次のステップだけ押さえれば十分です。

  1. Contact Form 7 をインストール・有効化する
  2. サンプルフォームをベースに
    • 名前
    • メールアドレス
    • お問い合わせ内容
      の3項目だけのシンプルなフォームを作る
  3. 固定ページにショートコードを貼り、メニューに「お問い合わせ」リンクを追加する
  4. 自分で何回かテスト送信して、確実にメールが届くことを確認する

最初から高度なカスタマイズに手を出す必要はありません。
「確実に届く、シンプルで分かりやすいフォーム」を作ることが起点です。

ユーザー目線でフォームを整える

フォームは、「運営側の都合」だけで項目を増やすと、あっという間に使いづらくなります。

次のような観点で見直してみてください。

  • この情報は本当に必須なのか（電話番号や住所を安易に必須にしていないか）
  • ラベルやプレースホルダーを見ただけで、何を書けばいいか分かるか
  • 入力欄・ボタンのデザインが、スマホでもストレスなくタップしやすいか
  • 送信後のメッセージや自動返信メールで、「いつ頃返事が来るか」まで伝えられているか

ユーザーが迷うポイントを1つずつ減らしていくこと自体が、信頼を積み重ねる作業になります。

安全性と運用体制をセットで考える

問い合わせフォームは、個人情報や機密性のある内容が送られてくる場所でもあります。

運営側としては、少なくとも次の3点は意識しておきたいところです。

  • サイト全体を HTTPS（SSL）化しているか
  • reCAPTCHA や Cloudflare Turnstile などで、ボットからのスパム送信を抑えているか
  • Contact Form 7・WordPress・サーバーを、定期的にアップデートしているか

さらに、問い合わせの社内での扱い方も重要です。

  • 誰が、どのメールボックスで問い合わせを確認するのか
  • 自動返信メールの内容は、会社としてのスタンスに合っているか
  • 対応履歴をどう残すか（メールだけ／外部サービスと併用するか）

フォームの品質＝技術設定だけでなく、「問い合わせをどう扱うか」という運用の設計でも決まります。

必要に応じて、外部サービスやアドオンも活用する

Contact Form 7 だけでも多くのことができますが、

  • 確認画面やステップフォーム
  • 条件分岐
  • 決済連携
  • 問い合わせのステータス管理

といったところまで踏み込むと、どうしてもアドオンや外部サービスが必要になります。

そのとき大事なのは、

  • 「とりあえず入れる」のではなく、メンテされているプラグインかどうかを確認する
  • 1つのフォームに機能を詰め込みすぎず、「CF7 でやる部分」と「外部サービスに任せる部分」を切り分ける

という視点です。
長く運用したいフォームほど、「派手さ」よりも「シンプルで保守しやすい構成」が効いてきます。

最後に：問い合わせフォームは“信頼の窓口”

Contact Form 7 をきちんと設計すると、次のような状態を目指せます。

  • ユーザーが迷わず入力できる
  • 送信エラーやメール不達が少ない
  • セキュリティリスクが抑えられている
  • 運営側が対応漏れなく、迅速に返事できる

これはそのまま、「信頼して連絡してもらえるサイトかどうか」につながります。

少しずつでも構いません。

  1. フォームを設置する
  2. 自分で何度も触って改善点を見つける
  3. 問い合わせの内容や数を見ながら、項目やデザインを微調整する

このサイクルを回していくことで、Contact Form 7 は「単なる無料プラグイン」ではなく、
あなたのサイトを支える大事なコミュニケーションツールになっていきます。

フォーム作成から問い合わせ対応・顧客管理まで【formrun】

【WordPressブログを始めるには、レンタルサーバー、WordPressテーマが必要です↓】

レンタルサーバーおすすめ比較｜コスパ・表示速度・安定性から見た本当に使えるサーバーを紹介

WordPressテーマ徹底解説｜基礎知識・選び方・おすすめ（無料・有料）

WordPressの始め方 完全ロードマップ【超初心者でも10分で開設OK！】

WordPress プラグイン 始め方

関連記事

目次