テクモ WEB開発者技術メモ

Contact Form 7（以下 CF7）には、入力内容を送信前に見せる確認画面の機能がありません。よく使われるのは Multi-Step Forms プラグインですが、入力ページと確認ページを別々の固定ページとして作る必要があり、フォームが増えると管理の手間が増えます。
本記事では、1つのページの中で「入力 → 確認 → 送信」を切り替える方法を3通り、WordPress 7.1.4／CF7 6.2.4.1 の検証環境で実際に動かしました。おすすめの自作の方法は、コードを1行ずつ説明しています（3章）。PHP や JavaScript に慣れていない方も、上から順に読めば何をしているか分かるように書きました。

1. 結論

2. 確認画面の作り方は4通り

このほか、確認画面を最初から持つフォームプラグイン（MW WP Form、Snow Monkey Forms など）に乗り換える方法もあります。MW WP Form は公式ページに「このプラグインは現在、必要最低限のメンテナンスリリースのみ提供しています。」と書かれていて、WordPress での動作確認は 6.4 までです。Snow Monkey Forms 13 は WordPress 7.1 以上が必要です（最新の CF7 6.2.4.1 も同じく 7.1 以上が必要です。いずれも2026年11月4日 WordPress.org で確認）。今あるフォームを作り直す手間もかかるため、CF7 のまま確認画面を付ける A か B をおすすめします。

3. 作り方A：確認画面用のプラグインを使わずに自作する ★おすすめ

3-1. 仕組み

ポイントは、「確認」ボタンでも CF7 にふつうに送信させることです。CF7 はいつもどおり入力チェック・同意の確認・迷惑メールの判定を行い、メールを送る直前に wpcf7_before_send_mail というタイミングで、登録されている処理を呼びます。ここで「確認ボタンから来た送信なら止める」と書けば、チェックは全部通したうえで、メールだけ送らない状態が作れます。

［入力画面］ 「入力内容を確認する」ボタン（name="_bit_step" value="confirm"）
   │  CF7 がふつうに送信 → 入力チェック・同意・迷惑メール判定
   ▼
［サーバ（PHP）］ wpcf7_before_send_mail で「確認ボタンから来た」なら送信を止める
                 結果に bit_confirm という名前を付けて返す
   ▼
［画面（JavaScript）］ CF7 の合図（wpcf7submit）で bit_confirm を受け取ったら、入力欄を隠して確認表を出す
   │  「戻って修正する」→ 入力画面に戻る（入力した値は残っている）
   ▼  「送信する」（CF7 のふつうの送信ボタン）→ いつもどおりメールを送る

入力チェックをサーバ（CF7 本体）に任せるので、必須・メール形式・同意・迷惑メール対策が CF7 の設定どおりに効きます。チェックを JavaScript で作り直す必要がありません。

3-2. 先に知っておく言葉

3-3. ファイルの構成と入れ方

wp-content/plugins/
└─ bit-cf7-confirm/          ← フォルダを作る
    ├─ bit-cf7-confirm.php   ← プラグイン本体（54行）
    ├─ confirm.js            ← 確認表を作り、画面を切り替える（59行）
    └─ confirm.css           ← 入力画面と確認画面の出し分け（8行）

1. wp-content/plugins/ の中に bit-cf7-confirm というフォルダを作り、下の3つのファイルを置きます。
2. 管理画面の「プラグイン」に「bit CF7 確認画面（自作の見本）」が出るので、有効化します。
3. CF7 の「コンタクトフォーム」→ 確認画面を付けたいフォームの「フォーム」タブを、3-5 の形に書き換えます。

テーマではなくプラグインにしておくと、テーマを替えても確認画面が残ります。また、3-5 の形に書き換えたフォームにだけ効くので、ほかのフォームには影響しません（同じページに2つのフォームを置いても、互いに影響しないことを確かめました）。

3-4. bit-cf7-confirm.php（プラグイン本体）を1行ずつ

まず全体です（コピーして使えます）。

<?php
/*
 * Plugin Name: bit CF7 確認画面（自作の見本）
 * Description: Contact Form 7 に確認画面を付ける。「確認」ボタンは CF7 の入力チェックだけ通してメールを送らずに止め、確認画面を出す。
 * Version: 0.2.0
 */

// 「確認」ボタン（name="_bit_step" value="confirm"）で送られたときは、
// 入力チェック・同意・迷惑判定をすべて通った後、メールを送る直前で止める。
add_action( 'wpcf7_before_send_mail', function ( $contact_form, &$abort, $submission ) {
    if ( ( $_POST['_bit_step'] ?? '' ) !== 'confirm' ) {
        return; // 「送信する」ボタン＝通常どおり送る
    }
    $abort = true;
    $submission->set_status( 'bit_confirm' );
    $submission->set_response( '入力内容をご確認のうえ「送信する」を押してください。' );
    // 同じタイミングで動くほかの処理（問い合わせ保存の CFDB7・決済の Stripe など）を、確認の段階では動かさない
    remove_all_actions( 'wpcf7_before_send_mail' );
}, PHP_INT_MIN, 3 ); // いちばん最初に動かす

// クイズ（[quiz]）と画像認証（[captchar]）は、確認の段階では答え合わせをしない。
// CF7 は送信の応答のたびに問題を出し直して答えの欄を空にするので、確認の段階で答えさせると最後の送信で必ず不正解になる。
// これらは確認画面の側に置き、最後の「送信する」で答え合わせする。
foreach ( array(
    'wpcf7_validate_quiz'     => 'wpcf7_quiz_validation_filter',
    'wpcf7_validate_captchar' => 'wpcf7_captcha_validation_filter',
) as $hook => $checker ) {
    add_filter( $hook, function ( $result ) use ( $hook, $checker ) {
        if ( ( $_POST['_bit_step'] ?? '' ) === 'confirm' ) {
            remove_filter( $hook, $checker, 10 ); // CF7 の答え合わせ（優先度10）を、この送信のときだけ外す
        }
        return $result;
    }, 1 );
}

// 確認画面を使うフォームの直前に、JavaScript が動かないときの案内を付ける
// （フォームの中に <noscript> を書いても CF7 が枠を消してしまうので、フォームの外に足す）
add_filter( 'do_shortcode_tag', function ( $output, $tag ) {
    if ( 'contact-form-7' !== $tag || false === strpos( $output, 'bit-confirm' ) ) {
        return $output;
    }
    return '<noscript><p class="bit-nojs">確認画面の表示には JavaScript が必要です。JavaScript が使えない場合は、お電話またはメールでお問い合わせください。</p></noscript>' . $output;
}, 10, 2 );

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'bit-cf7-confirm',
        plugins_url( 'confirm.js', __FILE__ ),
        array( 'contact-form-7' ),
        '0.2.0',
        true
    );
    wp_enqueue_style( 'bit-cf7-confirm', plugins_url( 'confirm.css', __FILE__ ), array(), '0.2.0' );
} );

1行ずつの説明です（空行は省いています）。

<?php

/*
 * Plugin Name: bit CF7 確認画面（自作の見本）
 * Description: Contact Form 7 に確認画面を付ける。「確認」ボタンは CF7 の入力チェックだけ通してメールを送らずに止め、確認画面を出す。
 * Version: 0.2.0
 */

// 「確認」ボタン（name="_bit_step" value="confirm"）で送られたときは、
// 入力チェック・同意・迷惑判定をすべて通った後、メールを送る直前で止める。

add_action( 'wpcf7_before_send_mail', function ( $contact_form, &$abort, $submission ) {

    if ( ( $_POST['_bit_step'] ?? '' ) !== 'confirm' ) {

        return; // 「送信する」ボタン＝通常どおり送る
    }

    $abort = true;

    $submission->set_status( 'bit_confirm' );

    $submission->set_response( '入力内容をご確認のうえ「送信する」を押してください。' );

    // 同じタイミングで動くほかの処理（問い合わせ保存の CFDB7・決済の Stripe など）を、確認の段階では動かさない
    remove_all_actions( 'wpcf7_before_send_mail' );

}, PHP_INT_MIN, 3 ); // いちばん最初に動かす

// クイズ（[quiz]）と画像認証（[captchar]）は、確認の段階では答え合わせをしない。
// CF7 は送信の応答のたびに問題を出し直して答えの欄を空にするので、確認の段階で答えさせると最後の送信で必ず不正解になる。
// これらは確認画面の側に置き、最後の「送信する」で答え合わせする。

foreach ( array(
    'wpcf7_validate_quiz'     => 'wpcf7_quiz_validation_filter',
    'wpcf7_validate_captchar' => 'wpcf7_captcha_validation_filter',
) as $hook => $checker ) {

    add_filter( $hook, function ( $result ) use ( $hook, $checker ) {

        if ( ( $_POST['_bit_step'] ?? '' ) === 'confirm' ) {
            remove_filter( $hook, $checker, 10 ); // CF7 の答え合わせ（優先度10）を、この送信のときだけ外す
        }

        return $result;
    }, 1 );
}

// 確認画面を使うフォームの直前に、JavaScript が動かないときの案内を付ける
// （フォームの中に <noscript> を書いても CF7 が枠を消してしまうので、フォームの外に足す）

add_filter( 'do_shortcode_tag', function ( $output, $tag ) {

    if ( 'contact-form-7' !== $tag || false === strpos( $output, 'bit-confirm' ) ) {
        return $output;
    }

    return '<noscript><p class="bit-nojs">確認画面の表示には JavaScript が必要です。JavaScript が使えない場合は、お電話またはメールでお問い合わせください。</p></noscript>' . $output;

}, 10, 2 );

add_action( 'wp_enqueue_scripts', function () {

    wp_enqueue_script(
        'bit-cf7-confirm',
        plugins_url( 'confirm.js', __FILE__ ),
        array( 'contact-form-7' ),
        '0.2.0',
        true
    );

    wp_enqueue_style( 'bit-cf7-confirm', plugins_url( 'confirm.css', __FILE__ ), array(), '0.2.0' );
} );

3-5. フォーム（CF7 の「フォーム」タブ）を1行ずつ

入力欄を bit-input、確認画面を bit-confirm で囲みます。全体です。

<div class="bit-input">
<div data-label="お名前"><label>お名前（必須）[text* your-name]</label></div>
<div data-label="メールアドレス"><label>メールアドレス（必須）[email* your-email]</label></div>
<div data-label="ご用件"><fieldset><legend>ご用件</legend>[radio kind use_label_element default:1 "お見積り" "ご質問" "その他"]</fieldset></div>
<div data-label="興味のある分野"><fieldset><legend>興味のある分野</legend>[checkbox topics use_label_element "ホームページ制作" "システム開発" "保守"]</fieldset></div>
<div data-label="お問い合わせ内容"><label>お問い合わせ内容（必須）[textarea* your-message]</label></div>
[acceptance agree] 個人情報の取り扱いに同意する [/acceptance]
<button type="submit" name="_bit_step" value="confirm" class="wpcf7-submit">入力内容を確認する</button>
</div>
<div class="bit-confirm">
<dl class="bit-confirm__table"></dl>
<button type="button" class="bit-confirm__back">戻って修正する</button> [submit "送信する"]
</div>

<div class="bit-input">

<div data-label="お名前"><label>お名前（必須）[text* your-name]</label></div>

<div data-label="メールアドレス"><label>メールアドレス（必須）[email* your-email]</label></div>

<div data-label="ご用件"><fieldset><legend>ご用件</legend>[radio kind use_label_element default:1 "お見積り" "ご質問" "その他"]</fieldset></div>
<div data-label="興味のある分野"><fieldset><legend>興味のある分野</legend>[checkbox topics use_label_element "ホームページ制作" "システム開発" "保守"]</fieldset></div>

<div data-label="お問い合わせ内容"><label>お問い合わせ内容（必須）[textarea* your-message]</label></div>

[acceptance agree] 個人情報の取り扱いに同意する [/acceptance]

<button type="submit" name="_bit_step" value="confirm" class="wpcf7-submit">入力内容を確認する</button>

</div>

<div class="bit-confirm">

<dl class="bit-confirm__table"></dl>

<button type="button" class="bit-confirm__back">戻って修正する</button> [submit "送信する"]

</div>

3-6. confirm.js を1行ずつ

/*
 * bit CF7 確認画面（自作版）
 * 「確認」で CF7 が status=bit_confirm を返したら、入力欄を隠して確認表を出す。
 * 項目名はフォーム側の data-label を使う（<div data-label="お名前">[text* your-name]</div>）。
 */
document.addEventListener('wpcf7submit', function (e) {
    var form = e.target;
    var box = form.querySelector('.bit-confirm__table');
    if (!box) return;

    if (e.detail.status !== 'bit_confirm') {
        // 確認画面の側の項目（クイズ・画像認証）の誤りなら、確認画面のまま直してもらう
        var invalid = (e.detail.apiResponse && e.detail.apiResponse.invalid_fields) || [];
        var onConfirmSide = invalid.length > 0 && invalid.every(function (f) {
            return form.querySelector('.bit-confirm [name="' + f.field + '"]');
        });
        if (!onConfirmSide) {
            form.classList.remove('is-confirm'); // 入力エラー・送信完了などは入力画面に戻す
        }
        return;
    }

    var data = new FormData(form);
    box.textContent = '';
    form.querySelectorAll('[data-label]').forEach(function (row) {
        var names = new Set();
        row.querySelectorAll('[name]').forEach(function (el) {
            if (el.name.charAt(0) !== '_') names.add(el.name);
        });
        var values = [];
        names.forEach(function (name) {
            data.getAll(name).forEach(function (v) {
                values.push(v instanceof File ? v.name : v);
            });
        });
        var dt = document.createElement('dt');
        var dd = document.createElement('dd');
        dt.textContent = row.dataset.label;
        dd.textContent = values.filter(function (v) { return v !== ''; }).join('、') || '（未入力）';
        box.appendChild(dt);
        box.appendChild(dd);
    });
    form.classList.add('is-confirm');
    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    // 押したボタンが隠れるので、キーボードの入力位置を確認表に移す
    box.setAttribute('tabindex', '-1');
    box.focus({ preventScroll: true });
});

document.addEventListener('click', function (e) {
    var back = e.target.closest('.bit-confirm__back');
    if (!back) return;
    var form = back.closest('form');
    form.classList.remove('is-confirm');
    form.querySelectorAll('.wpcf7-response-output').forEach(function (el) { el.textContent = ''; });
    // キーボードの入力位置を、最初の入力欄に戻す
    var first = form.querySelector('.bit-input input:not([type=hidden]), .bit-input textarea, .bit-input select');
    if (first) first.focus();
});

/*
 * bit CF7 確認画面（自作版）
 * 「確認」で CF7 が status=bit_confirm を返したら、入力欄を隠して確認表を出す。
 * 項目名はフォーム側の data-label を使う（<div data-label="お名前">[text* your-name]</div>）。
 */

document.addEventListener('wpcf7submit', function (e) {

    var form = e.target;

    var box = form.querySelector('.bit-confirm__table');
    if (!box) return;

    if (e.detail.status !== 'bit_confirm') {

        // 確認画面の側の項目（クイズ・画像認証）の誤りなら、確認画面のまま直してもらう
        var invalid = (e.detail.apiResponse && e.detail.apiResponse.invalid_fields) || [];
        var onConfirmSide = invalid.length > 0 && invalid.every(function (f) {
            return form.querySelector('.bit-confirm [name="' + f.field + '"]');
        });

        if (!onConfirmSide) {
            form.classList.remove('is-confirm'); // 入力エラー・送信完了などは入力画面に戻す
        }

        return;
    }

    var data = new FormData(form);

    box.textContent = '';

    form.querySelectorAll('[data-label]').forEach(function (row) {

        var names = new Set();
        row.querySelectorAll('[name]').forEach(function (el) {
            if (el.name.charAt(0) !== '_') names.add(el.name);
        });

        var values = [];
        names.forEach(function (name) {
            data.getAll(name).forEach(function (v) {
                values.push(v instanceof File ? v.name : v);
            });
        });

        var dt = document.createElement('dt');
        var dd = document.createElement('dd');

        dt.textContent = row.dataset.label;

        dd.textContent = values.filter(function (v) { return v !== ''; }).join('、') || '（未入力）';

        box.appendChild(dt);
        box.appendChild(dd);
    });

    form.classList.add('is-confirm');

    form.scrollIntoView({ behavior: 'smooth', block: 'start' });

    // 押したボタンが隠れるので、キーボードの入力位置を確認表に移す
    box.setAttribute('tabindex', '-1');
    box.focus({ preventScroll: true });

});

document.addEventListener('click', function (e) {

    var back = e.target.closest('.bit-confirm__back');
    if (!back) return;

    var form = back.closest('form');
    form.classList.remove('is-confirm');

    form.querySelectorAll('.wpcf7-response-output').forEach(function (el) { el.textContent = ''; });

    // キーボードの入力位置を、最初の入力欄に戻す
    var first = form.querySelector('.bit-input input:not([type=hidden]), .bit-input textarea, .bit-input select');
    if (first) first.focus();
});

3-7. confirm.css を1行ずつ

/* 入力画面: 確認表と「送信する」を隠す／確認画面: 入力欄と「確認」を隠す */
.bit-confirm { display: none; }
form.is-confirm .bit-confirm { display: block; }
form.is-confirm .bit-input { display: none; }
.bit-confirm__table { display: grid; grid-template-columns: 10em 1fr; gap: .5em 1em; margin: 0 0 1.5em; }
.bit-confirm__table dt { font-weight: bold; }
.bit-confirm__table dd { margin: 0; white-space: pre-wrap; }
.bit-confirm__table:focus { outline: none; } /* 入力位置を移したときの枠を出さない（押す場所ではないため） */

/* 入力画面: 確認表と「送信する」を隠す／確認画面: 入力欄と「確認」を隠す */

.bit-confirm { display: none; }

form.is-confirm .bit-confirm { display: block; }

form.is-confirm .bit-input { display: none; }

.bit-confirm__table { display: grid; grid-template-columns: 10em 1fr; gap: .5em 1em; margin: 0 0 1.5em; }

.bit-confirm__table dt { font-weight: bold; }

.bit-confirm__table dd { margin: 0; white-space: pre-wrap; }

.bit-confirm__table:focus { outline: none; } /* 入力位置を移したときの枠を出さない（押す場所ではないため） */

3-8. クイズ・画像認証を使う場合

CF7 の クイズ（[quiz]）や、Really Simple CAPTCHA の画像認証（[captchac] [captchar]）は、確認画面の側（フォームの11行目の確認表の下）に置きます。

<dl class="bit-confirm__table"></dl>
<p>[quiz q1 "1+1は？|2"]</p>   ← この1行を足す（画像認証なら [captchac cap1] [captchar cap1]）
<button type="button" class="bit-confirm__back">戻って修正する</button> [submit "送信する"]

理由：CF7 は送信の結果を返すたびに、クイズの問題を出し直して答えの欄を空にします。入力画面の側に置くと、「確認」を押した時点で答えが消え、最後の送信で必ず「答えが正しくありません」になります（実測で、何度答えてもメールは0通でした）。確認画面の側に置き、PHP の24〜34行目で「確認の段階では答え合わせをしない」ようにしているので、最後の「送信する」のときにだけ答え合わせされます。答えを間違えたときは、確認画面のままエラーが出るので、その場で答え直せます（confirm.js の12〜19行目）。

3-9. 入れたら、この順に試してください

1. 同意にチェックを入れる前は、「入力内容を確認する」が押せない
2. 何も入れずに確認 → 必須のエラーが出て、確認画面に進まない
3. 正しく入れて確認 → 確認画面に入力内容が並ぶ（この時点ではメールは届かない）
4. 「戻って修正する」→ 入力した値が残っている → 直して再び確認すると、直した内容が出る
5. 「送信する」→ メールが届く（自動返信を設定していれば、それも届く）
6. CF7 やこのプラグインを更新したときも、1〜5 をもう一度試す

4. 作り方B：Confirm Plus Contact Form 7（入れるだけ）

プラグインを有効にするだけで、送信ボタンが「確認」に変わり、押すと確認表が出ます。項目名はフォームの <label> や <legend> から自動で拾います。今回の検証では、入力チェック・確認・修正・再確認・送信（メール2通）まで正しく動きました。

手軽ですが、検証で次の2点を確認しました。

5. Contact Form 7 add confirm は今の CF7 では動かない ★つまずきどころ

昔から確認画面づくりに使われてきた Contact Form 7 add confirm は、有効インストール数が5万件ありますが、最終更新は2018年2月です。CF7 の版を変えて試した結果は次のとおりです。

原因は、プラグインの JavaScript が CF7 から届く合図（wpcf7submit）の中の detail.id で、切り替えるフォームを探していることです。CF7 5.4 で JavaScript が作り直され、この detail.id が合図に入らなくなりました（フォームを見分ける値としては、以前からある detail.unitTag が残っています）。サーバ側は「確認OK」を返しているのに、画面側がどのフォームを切り替えればよいか分からず止まります。CF7 の配布ファイルで、5.3.2 にはあって 5.4 には無いことを確かめました。

6. 実測結果の一覧

7. 作るときの注意点

8. まとめ（ご質問への回答）

参考（一次ソース）

• Contact Form 7（WordPress.org）: https://wordpress.org/plugins/contact-form-7/
• Confirm Plus Contact Form 7（WordPress.org）: https://wordpress.org/plugins/confirm-plus-contact-form-7/
• Contact Form 7 add confirm（WordPress.org）: https://wordpress.org/plugins/contact-form-7-add-confirm/
• Multi-Step Forms for Contact Form 7（WordPress.org）: https://wordpress.org/plugins/contact-form-7-multi-step-module/
• MW WP Form（WordPress.org）: https://wordpress.org/plugins/mw-wp-form/
• Snow Monkey Forms（WordPress.org）: https://wordpress.org/plugins/snow-monkey-forms/
• add_action()（WordPress 公式）: https://developer.wordpress.org/reference/functions/add_action/

※本記事の動作は、WordPress 7.1.4（日本語版）／PHP 8.3／MySQL 8.0 の検証環境で、Contact Form 7 6.2.4.1（add confirm は 5.3.2・5.4・5.5.5・5.9.8 でも確認）・Confirm Plus Contact Form 7 2.0.3.1・Contact Form 7 add confirm 5.1・Really Simple CAPTCHA 2.5・Contact Form 7 Database Addon（CFDB7）1.4.2 を使い、2026年11月4日に確認しました。プラグインの版・更新日・有効インストール数は同日の WordPress.org の情報です。

作成: Seeds Brains（ジェイノーム業務支援AI）