Contact Form 7 の導入方法について

目次

【SWELL対応】Contact Form 7の使い方完全ガイド
 -導入から初期設定まで初心者にもわかりやすく解説

WordPressでお問い合わせフォームを設置する際、最も利用されている定番プラグインが「Contact Form 7」です。

実際、ホームページ制作の依頼内容を見ても、「Contact Form 7で作ってほしい」と指定されるケースは多く、Web制作に携わる方であれば避けて通れないプラグインと言えるでしょう。

本記事では、SWELLテーマでの利用を前提にContact Form 7を「案件で問題なく使えるレベル」まで引き上げることを目的として、導入から初期理解までを丁寧に解説します。

Contact Form 7とは?|プラグイン導入前に知っておくべき基本

Contact Form 7の特徴

Contact Form 7は、WordPress公式ディレクトリで長年高い利用実績を誇る
お問い合わせフォーム専用プラグインです。

主な特徴は以下の通りです。

  • 無料で利用可能
  • フォーム作成とメール送信に特化
  • ほぼすべてのテーマと互換性が高い
  • 拡張プラグインが豊富
  • 制作会社・フリーランス案件での採用率が高い

特にSWELLテーマとの相性も良く、致命的なコンフリクトが起きにくい点は大きなメリットです。

Contact Form 7で標準で「出来ること」「出来ないこと」

導入前に、役割を正しく理解しておくことが重要です。

できること

  • 入力フォームの作成
  • フォーム送信内容のメール送信
  • 自動返信メールの送信
  • バリデーション(必須・形式チェック)

できないこと

  • デザインの細かい制御(CSS調整が必要)
  • メール到達率の保証(SMTP 設定が必要)
  • GA4計測の自動対応
  • サンクスページの自動生成

つまりContact Form 7は、「フォームの中身」を担当するプラグインであり、
到達率や計測、演出は「別の仕組みと組み合わせる」前提で設計されています。

この考え方を理解していないと、「設定したのに届かない」「計測できない」というトラブルにつながります。
※サンクスページの導入については、最後の方でご紹介しています。

それではここから実際の導入する流れを解説します。

プラグインのインストール方法

インストール手順

  1. WordPress管理画面にログイン
  2. 「プラグイン」→「新規追加」を選択
  3. 検索窓に Contact Form 7 と入力
  4. 「今すぐインストール」→「有効化」

インストール後、管理画面左メニューに 「お問い合わせ」 が追加されます。
デフォルトで【コンタクトフォーム1】が用意されいています。

次のセクションから実際に新規のフォームを作成します。

新規のお問い合わせフォームの作成

まずは新規フォームを追加します。

そうすると、コンタクトフォーム追加というページに切り替わります。

ここでは、

①フォームのタイトル:管理画面で確認するためのもので、ホームページには表示されません。

②フォームの内容:以下の内容のように必要な項目をセットしていきます
・氏名
・メールアドレス
・題名
・メッセージ本文(任意)
・送信ボタン

③保存:設定後は保存を忘れずに

以下に、フォームのそれぞれの項目を詳しく解説していきます

フォーム設定

以下のタブを参考に設定して下さい。※一部省略している項目もあります。

Contact Form 7 でフォームを作成する際、最も頻繁に使うのが 「テキスト入力項目」 です。お名前、会社名、電話番号など、1行で入力してもらう項目は、基本的にこの設定から作成します。

テキスト項目

入力された内容を、1行のテキストとして受け取る最も基本的な項目です。

実務での使用例

  • お名前
  • 会社名
  • 電話番号
  • 件名

複数行の入力(お問い合わせ内容など)は「テキストエリア」を使用するため、ここでは使い分けを意識しておきましょう。

必須入力の項目

このチェックを入れると、入力必須項目になります。

実務での考え方

  • お名前:必須
  • メールアドレス:必須
  • 電話番号:任意が多い

必須にすると、未入力時は送信できずエラーメッセージが表示されます。

項目名(name属性)

例:

text-880

この項目は非常に重要です。

項目名とは?

  • フォーム内部で使われる 識別名
  • メール設定で入力内容を呼び出すための「キー」

メール設定との関係

管理者宛メールや自動返信メールでは、以下のように使用します。

お名前:[text-880]

このように、フォーム項目名とメールタグは完全に連動しています。
ここで設定した項目名を使って、メールの返信文なども作ります。


ですので、上のように「text-880」という記載だと何を表しているかわかりにくいので、 項目名は氏名や会社名を入力するのであれば、「name」「your-name」「company」など意味が分かる名前に変更するのがおすすめです。

例:

your-name
お名前:[your-name]

「この入力項目には送信者の氏名が期待される」

このチェックを入れると、この項目が「送信者名」であることをContact Form 7に伝える設定になります。

実務での使いどころ

  • 「お名前」欄のみチェック
  • 他の項目では基本的に不要

メール送信時の処理に関わるため、お名前フィールドにのみチェックと覚えておけば問題ありません。

クラス属性

ここで指定したクラスは、生成される input タグに付与されます。

主な用途

  • CSSでデザイン調整をしたい場合
  • 特定の入力欄だけ見た目を変えたい場合

長さ(下限・上限)

入力できる文字数を制限できます。

  • 電話番号:下限10 / 上限11
  • 氏名:上限50程度

ただし、日本語入力や実務では過度な制限はトラブルの元になりやすいため、最初は設定しないケースも多いです。

デフォルト値

あらかじめ入力された状態で表示される文字です。

使用例

  • 件名に「お問い合わせ」
  • テスト用の仮文言

通常の問い合わせフォームでは空欄のままで問題ありません。

「このテキストをプレースホルダーとして使用する」

チェックを入れると、デフォルト値が薄い文字のガイド文(プレースホルダー)として表示されます。

実務での注意点

  • 入力例としては便利
  • ただし、アクセシビリティの観点ではプレースホルダーだけに頼るのは非推奨

ラベル(項目名)は必ず表示するようにしましょう。

フォームタグの生成

設定が完了すると、
以下のようなタグが生成されます。

[text your-name]

または、必須項目の場合は

[text* your-name]

これをフォーム本文に貼り付けることで入力欄が表示されます


メール設定

Contact Form 7 において、フォーム本体と同じくらい、あるいはそれ以上に重要なのが「メール設定」です。

この設定を誤ると、

  • フォームは送信できるのにメールが届かない
  • 迷惑メールに入る
  • 添付ファイルが受け取れない

といったトラブルが発生します。

ここでは、「メール」タブにある各項目の意味・正しい設定・実務での考え方を順番に解説します。

送信先(To)

役割:フォームからのメールを受け取るためのメールアドレス設定

フォーム送信時に、お問い合わせ内容を受け取るメールアドレスです。
通常はサイトの管理者や事業主様のアドレスを設定します。

推奨設定

  • 基本: [_site_admin_email] ※一般設定の管理者メールアドレスが反映される
  • 直接メールアドレスを指定 :info@example.com ※GmailでもOK

実務ポイント

  • WordPressの「管理者メールアドレス」が正しく設定されているか確認
  • 複数人で受け取りたい場合は、カンマ区切りで複数指定可能

送信元(From)

役割:フォームの送信元、つまり自社のメールアドレスを設定

メールの「差出人」として表示されるアドレスです。

フォーム設置されているサイトは送信元となるので、
[_site_title]により、一般設定の「サイトのタイトル」が反映します。

<wordpress@example.com>には、自社のアドレスを入力してください。
例:<info@example.com><test@ak2003.xsrv.jp>など

非推奨な状態

  • @example.com 以外のドメイン
  • Gmailなどの外部ドメインを直接指定

推奨設定(重要)

[_site_title] <info@あなたのドメイン>

例:

サイト名 <info@example.com>

実務ポイント(非常に重要)

  • サイトのドメインと同じメールアドレスを使う
  • これを守らないと、SPF・DMARCの影響で迷惑メールになりやすい

メール到達率を左右する最重要項目です。

題名(Subject)

役割:お問い合わせの件名

受信メールの件名です。

推奨構成

  • サイト名+問い合わせ内容

例:

[サイト名] お問い合わせがありました

または、

[_site_title]【お問い合わせ】[your-name] 様

実務ポイント

  • 件名が分かりやすいほど、見落としを防げる
  • 動的タグ([your-name]など)を入れると識別しやすい

追加ヘッダー(Additional Headers)=返信先(お客様のメールアドレス)

役割:返信先の設定

「返信先」を指定する項目です。
お客様のメールアドレスとなるので「your-mail」のまま変更不要です。

なぜ必要か

  • 送信元(From)はサイトのメールアドレス
  • しかし、返信は ユーザーのメールアドレスに返したい

メッセージ本文(Message Body)

お名前: [your-name]
メール: [your-email]

件名: [your-subject]

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

役割:お問い合わせの内容

実際にメール本文として送信される内容です。

実務での基本構成

  • 誰から
  • どのフォームから
  • 何についての問い合わせか

を明確にします。

推奨ポイント

  • 各項目を改行で区切る
  • フォームの入力項目と対応させる:
    ※フォームで設定した項目名([your-name]や[your-mail]など)を入れていく。
  • 必要に応じてURL・選択項目も追加

「含まれるすべてのメールタグの行を除外する」

✔ チェック推奨

役割

未入力項目があった場合、その行自体をメール本文から削除します。
基本的に チェックを入れて問題ありません。

「HTML形式のメールを使用する」

✔ ケースバイケース(基本はオフ)

オフ(推奨)

  • プレーンテキスト
  • 到達率が高く、トラブルが少ない

オンにする場合

  • レイアウトを整えたい
  • 見た目を重視したい

まずはオフで運用するのが無難です。


ファイル添付

例:

[file]

役割

ファイルアップロード項目で受け取ったファイルをメールに添付する設定です。

実務での注意点

  • ここにタグを入れないと、ファイルは届かない
  • 複数ある場合は改行で指定

メール(2)※自動返信メール

画面下部の「メール(2)を使用」にチェックを入れると、
ユーザー宛の自動返信メールを設定できます。

主な用途

  • 送信完了の通知
  • 問い合わせ受付の確認
  • 安心感の提供

実務では ほぼ必須の設定です。
以下に、設定を解説します。

自動返信メールの設定:メール(2)にチェック

Contact Form 7 の 「メール(2)」 は、フォーム送信後に ユーザー本人へ自動的に送られる確認メールです。

この自動返信メールは、

  • フォームが正しく送信されたことの通知
  • 問い合わせ受付の証明
  • ユーザーの不安解消・信頼感向上

という重要な役割を担います。

自動返信メールがないと不親切と判断されることも少なくないので、必ず設定しましょう。

送信先(To)

役割

フォームに入力されたユーザー自身のメールアドレス宛に送信する設定です。
アラートのチェックが付きますが問題ないです。

なぜこの設定でよいのか

  • フォーム入力時のメールアドレスをそのまま使用
  • 複雑な設定不要
  • 自動返信として正しい挙動

⚠ 表示されている警告について

安全でないメール設定が十分な検証なく使われている。

これは Contact Form 7 固有の警告で、送信元(From)がユーザーのメールアドレスになっていないか
をチェックしています。

今回の設定では、

  • 送信先:[your-email]
  • 送信元:サイトのメールアドレス

となっているため、問題ありません

送信元(From)

役割

自動返信メールの「差出人」です。
こちらは、メール設定で入力した内容と同じものでOKです。

題名(Subject)

役割

ユーザーが受け取るメールの件名です。
ですので、以下を参考にわかりやすい内容に変更しましょう。

推奨例(より親切な表現)

[_site_title] お問い合わせありがとうございます

または、

【[_site_title]】お問い合わせ受付完了のお知らせ

実務ポイント

  • 「自動返信」と分かる件名にする
  • 件名に個人情報を入れすぎない

追加ヘッダー(Additional Headers)

Reply-To: [_site_admin_email]

役割

ユーザーがそのまま返信した場合の返信先を指定します。
ここはGmailなどの設定でも問題ありません。
例:Reply-To: yourname@gmail.com

実務での考え方

  • 自動返信にユーザーが返信してくるケースは多い
  • 返信は管理者に届くべき

Reply-To は管理者アドレスで正解です。

メッセージ本文(Message Body)

この文章の役割

  • 問い合わせ内容の控えを送る
  • 誤送信時の注意書きを入れる
  • 公式感・安心感を出す

実務的なポイント

  • 管理者メールほど詳細でなくてよい
  • 丁寧・簡潔を意識する

「含まれるすべてのメールタグの空の行を出力から除外する」

✔ チェック推奨

  • 未入力項目があっても空行を削除
  • 見やすいメールになる

「HTML形式のメールを使用する」

✔ 基本は オフ推奨

ファイル添付

自動返信メールにファイルを添付する必要はありません
空欄のままでOKです。


以上がメールの基本設定となります。

ですが、フォームから実際にお問い合わせをしても、迷惑メールに振り分けられてしまうことが多々ありますので、SMTP設定で対策を行います。

SMTP設定:迷惑メールに振り分けられる問題の対策

Contact Form 7 でメール設定を正しく行っても、管理者メール・自動返信メールの両方が迷惑メールに振り分けられてしまうという現象は、非常によくあるトラブルです。※Gmailなどは特になりやすい

結論から言うと、メール設定そのものではなく「送信方法」に問題があります。

この問題は、SMTP設定を行うことで解決できる可能性があります。
以下の記事を参考に、プラグイン【WP Mail SMTP】で迷惑メール対策まで行う事を推奨します。

おまけ:サンクスページの追加

Googleアナリティクスで、CVを計測するためにサンクスページを利用するとイベントの計測がやりやすくなります。

ここでは、SWELLテーマでContact Form 7 の送信ボタンを押した時に、サンクスページへ飛ばす設定を簡単にご紹介します。

1.固定ページでサンクスページを用意します。(スラッグ:thanks などと設定)
2.外観→テーマファイルエディタ→functions.php
 そこに以下のコードを追記します。
 ※赤字の箇所はご自身のサンクスページのURLにします

// Contact Form 7 送信後にサンクスページへリダイレクト
add_action( 'wp_footer', 'redirect_to_thanks_page' );
function redirect_to_thanks_page() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location.href = 'https://◯◯◯◯/thanks/';
}, false );
</script>
<?php
}

以上となります。

まとめ

Contact Form 7 は、WordPress でお問い合わせフォームを設置する際に最も利用されている定番プラグインであり、
SWELL テーマとの相性も良く、案件対応においても採用される機会が非常に多いツールです。

また、reCAPTCHA の導入など、フォームを悪用されにくくする対策もあわせて行うことで、より安全で信頼性の高いサイト運用につながります。

Contact Form 7 を正しく理解し、周辺設定まで含めて整えることで、実務でも安心して使えるお問い合わせフォームを構築していきましょう。

目次