Contact Form 7の設定方法|確認画面と自動返信まで

Contact Form 7の設定方法|確認画面と自動返信まで

この記事の要点

  • 設定の肝はフォーム項目・管理者通知・自動返信の3点。順番に埋めれば完成する
  • 自動返信は「メール(2)」を有効化し送信元を自社ドメインにするのが到達の鍵
  • 確認画面は承諾チェックとJSが現実解。プラグイン任せの落とし穴も本文で解説

WordPressでお問い合わせフォームを作ろうとして、Contact Form 7の設定画面を開いたものの「どこに何を入れれば送信通知と自動返信が届くのか分からない」で止まっていませんか。

この記事は、WordPressサイトを自社で運用している広報・総務・営業担当の方に向けて、Contact Form 7の設定方法を、フォーム作成から管理者への通知メール、問い合わせ主への自動返信メール、確認画面、送信後のサンクスページまで、順番に手を動かせる形で解説します。読み終わる頃には、コピペで使える設定値とチェックリストを手に、今日中にフォームを公開できる状態を目指します。

WordPress自体の初期設定がまだの方は、先にWordPress初期設定の完全ガイドを済ませておくと、この記事の手順がスムーズに進みます。

Contents / 目次
  1. Contact Form 7の設定で押さえるべきは3か所だけ
  2. 導入から自動返信メールまでの設定手順
  3. 確認画面とサンクスページの作り方
  4. 正しく設定できると取りこぼしがなくなる
  5. よくある失敗と回避法
  6. プラグイン運用の落とし穴と、任せどころの見極め

Contact Form 7の設定で押さえるべきは3か所だけ

Contact Form 7の設定方法|確認画面と自動返信まで

結論から言うと、Contact Form 7の設定でつまずく箇所は決まっています。「フォーム項目」「管理者への通知メール」「問い合わせ主への自動返信メール」の3か所を順番に埋めれば、フォームは完成します。

Contact Form 7とは、WordPressに問い合わせフォームを設置できる無料プラグインです。WordPressの問い合わせフォームでは定番のプラグインで、現在も更新が続いています。管理画面にタブが並ぶので複雑に見えますが、実際に触るのは主に「フォーム」タブと「メール」タブの2つだけです。

まず、全体像を先に押さえましょう。下の表が、公開までにやることの一覧です。

やること触る場所ゴール
1. プラグイン導入プラグイン → 新規追加「お問い合わせ」メニューが出る
2. フォーム項目の調整「フォーム」タブ名前・メール・本文など必要な欄を作る
3. 管理者への通知メール「メール」タブ問い合わせが自分に届く
4. 自動返信メール「メール」タブ内の「メール (2) を使用」セクション相手に受付完了メールが届く
5. 確認・完了の導線フォーム+その他の設定送信前確認とサンクスページ
6. スパム・到達性対策reCAPTCHA・SMTP迷惑メールと取りこぼしを防ぐ

ポイント。確認画面と自動返信は「後回しにされがちだけど一番効く」部分です。確認画面があると入力ミスの問い合わせが減り、自動返信があると「送れたのか不安」という取りこぼしがなくなります。この記事では、その2つを重点的に解説します。

なお、フォームの項目数そのもので悩んでいる方は、問い合わせフォームを5項目に減らすBtoBの設計も合わせて読むと、作る前の設計で迷わずに済みます。

導入から自動返信メールまでの設定手順

Contact Form 7の設定方法|確認画面と自動返信まで

ここが記事の主役です。プラグイン導入から自動返信メールの設定まで、ステップごとに何を・どこで・どう入力するかを具体的に見ていきましょう。画面のボタン名やタブ名はバージョンで変わることがあるため、細かな名称が違う場合は公式ドキュメントで確認してください。考え方と入れる値は共通です。

ステップ1. プラグインを入れて有効化する

最初にプラグイン本体を入れます。WordPress管理画面の「プラグイン」から「新規追加(新規プラグインを追加)」を開き、検索窓に「Contact Form 7」と入力します。作者が「Takayuki Miyoshi」のものが本物です。インストールして有効化すると、左メニューに「お問い合わせ」が追加されます。

ステップ2. フォームの項目を整える

「お問い合わせ」→対象フォームを開くと「フォーム」タブに初期コードが入っています。標準では名前・メールアドレス・題名・メッセージ本文・送信ボタンが並んでいます。コードはHTMLに近い記述で、`[text* your-name]`のような部分が入力欄です。アスタリスク(*)が付いた項目は入力必須という意味です。

BtoBサイトなら、会社名と電話番号を足しておくと後の営業対応が楽になります。フォームタブに次のような形で書き足します。

<label>会社名(必須)
    [text* company]</label>

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

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

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

<label>お問い合わせ内容(必須)
    [textarea* your-message]</label>

[acceptance acceptance-1] 入力内容を確認しました [/acceptance]

[submit "送信する"]

ここで足した`[text* company]`の「company」は、あとでメール本文に差し込むための名前(メールタグ)です。自分で決めた名前を覚えておいてください。項目を増やしすぎると離脱の原因になるので、増減の判断はフォーム最適化(EFO)で脱落を防ぐ5つのポイントを参考にすると迷いません。

ステップ3. 管理者への通知メールを設定する

次に「メール」タブを開きます。ここは問い合わせが来たときに自分(管理者)へ届くメールの設定です。特に重要なのは送信先と送信元の2つです。

項目入れる値ひとこと
送信先info@自社ドメイン問い合わせを受け取りたい自分のアドレス
送信元[_site_title] <info@自社ドメイン>自社ドメインのアドレスにするのが安全
追加ヘッダーReply-To: [your-email]返信ボタンで相手に返せるようになる
題名【お問い合わせ】[your-subject]ひと目で問い合わせと分かる件名に

送信元にGmailやYahoo!メールなど他社のフリーアドレスを入れるのはやめましょう。「自社ドメインを名乗っていないメール」と判定され、迷惑メール扱いや不達の大きな原因になります。送信元は必ずサイトと同じドメインのアドレスにします。

メッセージ本文(メールの中身)には、フォームで受け取った内容をメールタグで差し込みます。ステップ2で足した項目に合わせて、次のように書きます。

会社名: [company]
お名前: [your-name]
メール: [your-email]
電話番号: [your-tel]

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

--
このメールは [_site_title] のお問い合わせフォームから送信されました。

ステップ4. 自動返信メール(メール2)を設定する

自動返信メールは「メール(2)」で設定します。メールタブの下のほうにある「メール (2) を使用」(Mail(2))のチェックを入れると、入力欄が現れます。名称や配置はバージョンで変わることがあるので、詳しくはContact Form 7公式のメール設定ドキュメントで確認してください。これが、問い合わせをくれた相手に自動で届く「受付完了メール」です。

ここでの最大のコツは、送信先に相手のメールアドレスのメールタグ`[your-email]`を入れることです。管理者宛て(自分のアドレス)を入れると、自分に二重で届くだけで相手には届きません。ここを間違える人が本当に多いので注意してください。

項目入れる値
送信先[your-email](相手のアドレスのタグ)
送信元[_site_title] <info@自社ドメイン>
題名お問い合わせありがとうございます([_site_title])

本文は、届いたことの安心と、いつ返信するかの目安を伝える文面にします。そのまま使えるテンプレートを置いておきます。

[your-name] 様

この度はお問い合わせいただき、ありがとうございます。
以下の内容で受け付けいたしました。
2営業日以内に担当者よりご返信いたします。

──────────────
会社名: [company]
お名前: [your-name]
お問い合わせ内容:
[your-message]
──────────────

※このメールは自動送信です。行き違いで返信済みの場合はご容赦ください。

[_site_title]
電話: 000-000-0000

この文面のたたき台は、AIに作らせると早いです。ChatGPTやClaudeなどのAIツールに「BtoBサイトの問い合わせ自動返信メールの文面を、丁寧すぎず簡潔に。2営業日以内に返信する旨を入れて」と頼めば、下書きが数秒で出ます。ただし返信の日数や電話番号など、事実に関わる部分は必ず自分の目で直してから使ってください。ここは人がやるべき仕事です。

確認画面とサンクスページの作り方

Contact Form 7の設定方法|確認画面と自動返信まで

確認画面とサンクスページ(送信完了ページ)は、少し工夫が要ります。結論から言うと、確認画面は「承諾チェックボックス」で軽く実装するのが一番安全で、本格的な確認画面はJavaScriptで自作するのが2026年時点の現実的な選択です。

なぜ確認画面プラグインを安易に勧めないのか

確認画面を追加する専用プラグインは手軽ですが、サーバー側のキャッシュやキャッシュ系プラグインと相性が悪いと、意図しない表示崩れが起きることがあります。BtoBサイトでは、こうしたキャッシュ絡みの不具合が個人情報の表示事故につながらないよう、特に慎重に扱うべきです。

使う場合は、キャッシュ系プラグインやサーバーのキャッシュ設定で、フォームのあるページと確認ページをキャッシュ対象から必ず除外してください。この一手間を省くと事故が起きます。

まずは承諾チェックボックスで送信前確認をうながす

もっとも簡単で事故のない方法が、ステップ2でも入れた承諾チェックボックスです。`[acceptance acceptance-1] 入力内容を確認しました [/acceptance]`を送信ボタンの上に置くと、チェックを入れないと送信できなくなります。完全な確認画面ではありませんが、「勢いで送って内容が空」という取りこぼしを大きく減らせて、実装も1行で済みます。

本格的な確認画面をJavaScriptで作る

入力内容を画面に映してから送信させたいなら、フォームの下に確認用のエリアと「内容を確認する」ボタンを置き、JavaScriptで値を差し込みます。判断の目安はこうです。名前・メール・本文だけの一般的な問い合わせなら前述の承諾チェックボックスで十分、金額・申込内容・数量など間違えると困る情報を扱うならこの確認画面を用意します。

まず「フォーム」タブで、送信ボタンにIDを付けたうえで、その下に確認ボタンと確認エリアを追加します。

[submit id:cf7-submit "送信する"]

<button type="button" id="cf7-confirm-btn">内容を確認する</button>

<div id="cf7-confirm" style="display:none;">
    <p>以下の内容で送信します。よろしければ「送信する」を押してください。</p>
    <dl id="cf7-confirm-body"></dl>
</div>

次に、確認ボタンを押すと入力内容を映し、最初は隠しておいた送信ボタンを表示するJavaScriptを読み込ませます。項目名(fieldsのname)は、ステップ2で決めたメールタグの名前に合わせてください。

<script>
document.addEventListener( 'DOMContentLoaded', function () {
    var form = document.querySelector( '.wpcf7-form' );
    if ( ! form ) return;

    var submit  = form.querySelector( '#cf7-submit' );
    var preview = document.getElementById( 'cf7-confirm' );
    var body    = document.getElementById( 'cf7-confirm-body' );
    var btn     = document.getElementById( 'cf7-confirm-btn' );

    // 表示する項目(label=見出し、name=フォームの項目名)
    var fields = [
        { label: '会社名',           name: 'company' },
        { label: 'お名前',           name: 'your-name' },
        { label: 'メールアドレス',   name: 'your-email' },
        { label: '電話番号',         name: 'your-tel' },
        { label: 'お問い合わせ内容', name: 'your-message' }
    ];

    submit.style.display = 'none'; // 確認前は送信ボタンを隠す

    btn.addEventListener( 'click', function () {
        body.textContent = '';
        fields.forEach( function ( f ) {
            var el  = form.querySelector( '[name="' + f.name + '"]' );
            var val = el ? el.value : '';
            var dt  = document.createElement( 'dt' );
            var dd  = document.createElement( 'dd' );
            dt.textContent = f.label;
            dd.textContent = val || '(未入力)';
            body.appendChild( dt );
            body.appendChild( dd );
        } );
        preview.style.display = 'block';
        submit.style.display  = 'inline-block'; // 確認後に送信ボタンを出す
    } );
} );
</script>

この方法なら追加プラグインなしで確認画面を用意でき、値は画面に表示するだけなのでキャッシュ絡みの事故も起きません。textContentで差し込んでいるため、入力された文字がそのままHTMLとして解釈される心配もありません。

送信後にサンクスページへ飛ばす

送信が完了したら専用のサンクスページに移動させると、お礼を伝えられるうえ、広告やGA4のコンバージョン計測もしやすくなります。Contact Form 7には、送信完了を合図にできるイベントが用意されています。それを使ってページを移動させます。イベント名や仕様はバージョンで変わることがあるため、実装前にContact Form 7公式のDOMイベント解説で確認してください。次のコードを、フォームを置いたページや共通のフッターなどに読み込ませます。

<script>
// Contact Form 7の送信完了イベントを合図にサンクスページへ移動
document.addEventListener( 'wpcf7mailsent', function( event ) {
    // [下のURLを自社のサンクスページに変更してください]
    location = 'https://example.com/thanks/';
}, false );
</script>

先にサンクスページ用の固定ページ(例:/thanks/)を作ってから、URLを差し替えてください。計測タグを絡める場合の考え方はGTMでGA4イベント計測を設定する手順で詳しく解説しています。

正しく設定できると取りこぼしがなくなる

設定を丁寧にやると、何が変わるのか。一番大きいのは「問い合わせの取りこぼしがゼロに近づく」ことです。フォームは動いているのにメールだけ届いていない、という状態は、実は珍しくありません。せっかくの見込み客からの連絡が、気づかないうちに消えているのです。

自動返信メールを設定しておくと、問い合わせ主の側にも「ちゃんと送れた」という安心が残ります。返信が来ないと相手は不安になり、競合にも同じ問い合わせを送ってしまいます。

受付完了メールが即座に届くだけで、その離脱を防げます。BtoBでは、この最初の一通の丁寧さが会社の印象を左右します。

さらに、送信内容をサイト内に保存するアドオン(Flamingo)を入れておくと、万が一メールが届かなくても管理画面から問い合わせ履歴を確認できます。メールとデータベースの二重で残せば、取りこぼしはほぼなくなります。

ポイント。フォームの成果は「デザインの良さ」より「確実に届くこと」で決まります。通知・自動返信・履歴保存の3点がそろっていれば、見た目が素朴でも問い合わせ対応はきちんと回ります。

よくある失敗と回避法

Contact Form 7の設定方法|確認画面と自動返信まで

Contact Form 7の設定でつまずくポイントは、だいたい決まっています。現場でよく見かける失敗を3つ挙げて、それぞれの防ぎ方を説明します。

失敗1. テストしたのにメールが届かない

一番多い相談がこれです。設定が正しくてもメールが届かないのは、WordPressの標準メール送信機能(PHPのメール)が、レンタルサーバーや受信側の迷惑メール判定に弾かれやすいからです。原因が設定ミスなのか、送信の仕組みなのか切り分けが必要になります。

防ぐには、送信を専用の仕組みに任せる「SMTPプラグイン」を入れます。WP Mail SMTPなどを使い、Gmailや自社メールのサーバー経由で送るようにすると、到達率がぐっと上がります。手順はWordPressでメールが届かない。WP Mail SMTPのGmail設定手順にまとめています。合わせて、自社ドメインの送信認証(SPF・DKIM)を整えると、迷惑メール行きを大きく減らせます。こちらは迷惑メール判定される会社メールのSPF・DKIM設定手順を参考にしてください。

失敗2. スパムの問い合わせが大量に来る

公開して数日でボットからの英語の迷惑送信が増える、というのもよくあります。放置すると本当の問い合わせが埋もれ、通知メールも見なくなってしまいます。

対策は複数を組み合わせるのが基本です。次の3層を重ねると、迷惑送信をかなり減らせます。

  • GoogleのreCAPTCHAでボットをはじく
  • WordPressに同梱のAkismet Anti-Spamを有効化する
  • 隠しフィールドで判定するHoneypot系のプラグインを足す

失敗3. 自動返信が自分に届いて相手に届かない

「メール(2)」の送信先に、自分(管理者)のアドレスを入れてしまう間違いです。これだと自分に二通届くだけで、問い合わせ主には受付メールが行きません。相手は「送れたのか分からない」ままになります。

防ぎ方はシンプルで、メール(2)の送信先を必ず`[your-email]`(フォームで入力された相手のアドレスのタグ)にすることです。設定後は、自分のスマホのアドレスなどで一度テスト送信し、相手側に受付メールが届くかを必ず確認してください。テストなしで公開しないのが鉄則です。

プラグイン運用の落とし穴と、任せどころの見極め

ここまで手順を書いてきましたが、正直にお伝えすると、Contact Form 7は「設定して終わり」ではありません。運用で見落とされがちな現場のリアルを共有します。

まず、フォームは攻撃の標的になりやすい入口です。プラグインは放置すると脆弱性が残るため、Contact Form 7本体もSMTPやスパム対策プラグインも、こまめに更新する必要があります。更新を止めたサイトは、乗っ取りや踏み台送信のリスクが上がります。この観点はWordPress乗っ取りを防ぐ更新と二段階認証の最低限設定も合わせて確認しておくと安心です。

次に、確認画面の完全再現やデザインの作り込み、条件によって送信先を振り分ける設定などは、想像以上に手間がかかります。JavaScriptやサーバー側の知識が必要になり、キャッシュとの相性問題まで面倒を見ることになります。

ここで大事なのが「自社でどこまでやるか」の線引きです。名前・メール・本文だけのシンプルなフォームなら自社で十分作れます。

一方、複数フォームの出し分け、確認画面の厳密な実装、到達率の保証、スパムの継続監視まで求めるなら、プロに任せたほうが結果的に早くて確実です。

見落としがちなコストが「テストと保守の時間」です。フォームは作った瞬間より、公開後に届かない・スパムが来るといったトラブル対応で時間を取られます。導入前に「誰がテストし、誰が更新を見るか」を決めておかないと、放置フォームになりがちです。

公開前には、AIも活用しつつ最終チェックをかけるのがおすすめです。フォームのHTMLをClaudeなどに貼って「必須項目の抜け、メールタグの不整合、送信先の設定ミスがないか確認して」と頼むと、人が見落とす初歩ミスを拾えます。ただしAIは実際の送信テストまではできません。最後の実送信テストと本番判断は、必ず人が行ってください。

Contact Form 7は無料で全部使えるの?

はい、本体は無料で、フォーム作成・通知メール・自動返信・サンクスページ移動まで無料で設定できます。より高度な確認画面やサポートが必要なときだけ、有料プラグインや外注を検討する形で十分です。

確認画面は必ず作らないとダメ?

必須ではありません。承諾チェックボックスを1つ置くだけでも、入力ミスの送信はかなり減ります。厳密な確認画面が要るのは、金額や申込内容など間違えると困る情報を扱う場合です。一般的な問い合わせなら、チェックボックスとサンクスページで十分実用的です。

Googleフォームではダメなの?

手軽さならGoogleフォームも選択肢です。ただし自社ドメインのデザインに馴染ませたい、送信をサイト内で完結させたい、計測を細かくしたい場合はContact Form 7が向きます。会社の印象や計測を重視するBtoBサイトでは、サイト内フォームのほうが有利なことが多いです。

送信された内容はどこかに残る?

標準ではメール送信のみで、データは保存されません。同じ作者が提供する公式アドオンのFlamingoを入れると、送信内容をサイト内に保存できます。メールが届かなかったときの保険にもなるので、入れておくと安心です。

まずは1分でできる第一歩として、いま使っているフォームから自分宛てにテスト送信し、通知メールと自動返信メールの両方が届くかだけ確認してみてください。片方でも届かなければ、この記事のメール設定を見直すサインです。次に読むなら、届かない問題を根本から解くためのWP Mail SMTPのGmail設定手順が役立ちます。

ここまで読んで、設定やテスト、スパム対策まで自社でやり切るのは大変そうだと感じた方は、コレットラボのAIで作るサイト制作・内製化の伴走支援にお声がけください。フォーム周りの実装から運用体制づくりまで、御社の状況に合わせて一緒に整理します。まずは現状を聞かせていただくだけでも大丈夫です。AI業務システム化の詳細はこちらから気軽にご相談ください。

30分の無料相談

現状をお聞きし、優先順位を一緒に整理します。

予約する →

Read Next / 次に読む

wwwあり・なしをhtaccessで統一する手順と注意点
ホームページ制作・運用

wwwあり・なしをhtaccessで統一する手順と注意点

2026.07.18 / 約 16 分

関連記事

ホームページ制作・運用

Core Web Vitals改善|表示速度を自分で測って直す3手順

更新
ホームページ制作・運用

更新されないサイトの信用低下を直す更新体制の作り方|担当と頻度

更新
ホームページ制作・運用

開業前に決める集客戦略|大分でホームページより先にやること

更新
ホームページ制作・運用

wwwあり・なしをhtaccessで統一する手順と注意点

ホームページ制作・運用

BtoBサイトの素材選び|既視感を脱し自社らしさを出す進め方

更新
ホームページ制作・運用

問い合わせフォームは5項目に絞る|BtoBの入力設計と問い直し

更新
ホームページ制作・運用

インフォグラフィック外注|認識ズレを防ぐ指示出し5ステップ

更新
ホームページ制作・運用

店舗のWeb集客は情報発信型サイトが強い理由と作り方3ステップ

更新
ホームページ制作・運用

GTMでGA4イベント計測を設定する手順|非エンジニアでも自力で

更新
ホームページ制作・運用

ドメイン・SSL期限切れでサイトが止まる前に|更新管理の手順

更新
ホームページ制作・運用

ホームページで集客できない原因3つと改善手順|福岡

更新
ホームページ制作・運用

LPで問い合わせ0の原因は5か所|確認する順番と直し方まで解説

更新