はじめに｜Contact Form 7はそのままでは足りない
WordPressサイトの多くで導入されているContact Form 7（CF7）は、シンプルで導入も簡単。しかし、「確認画面」や「完了ページへのリダイレクト」など、実務では求められる機能が標準では備わっていません。
例えば以下のような要望は、実務で頻繁にあります。
- 入力内容を送信前に確認させたい（確認画面）
- 送信後にThanksページに遷移させて計測タグを動作させたい（完了画面）
- 離脱を防ぐUIやUX設計をしたい（戻るボタン・入力再編集）
本記事では、Contact Form 7でこうした要望に対応する方法を実装例付きで丁寧に解説。さらに、標準で確認・完了画面を備える「Snow Monkey Forms」や「MW WP Form」との比較も行います。
Contact Form 7に「確認画面」を追加する方法（実務対応版）
方法①：専用プラグイン「Contact Form 7 Multi-Step Forms」を使う
概要
「Contact Form 7 Multi-Step Forms」プラグインを使えば、1ページ目で入力 → 2ページ目で確認 → 最終送信といったフローが簡単に構築可能です。
実務ポイント
- ステップごとに別フォームIDを使う方式（フォームの分割）
- Google Tag ManagerやGA4での計測時にも各ステップでトリガー設計が可能
実装手順（具体的な構築例）
- プラグインのインストールと有効化
WordPress管理画面 > プラグイン > 新規追加 >
Contact Form 7 Multi-Step Forms で検索 → インストール → 有効化
- フォームを複数作成
- 「フォーム1（入力フォーム）」
- 「フォーム2（確認用）」
それぞれを個別にContact Form 7で作成します。
- フォーム1に「次へ」ボタンを追加
[your-name]
[your-email]
[hidden form-step "step1"]
[next "確認画面へ"]フォーム2（確認画面）では、確認用に内容を表示＋戻る・送信ボタンを用意
[hidden your-name default:get]
[hidden your-email default:get]
<p>お名前： [your-name]</p>
<p>メールアドレス： [your-email]</p>
[back "戻る"]
[submit "送信する"]- フォームの埋め込み
入力フォームと確認画面用のショートコードをそれぞれ固定ページに貼り付けます。
方法②：JavaScript＋CSSで確認画面を自作する（プラグイン不要）
概要
フォーム入力後、JavaScriptで入力値を一時保存し、同一ページ内で確認画面をモーダルや非表示エリアとして表示する方法です。完全自由なUI設計が可能で、デザインルールが厳しいクライアント案件にも最適。
実装例（jQueryベース）
<div id="cf7-form-wrapper">
<div id="input-area">
[text* your-name placeholder "お名前"]
[email* your-email placeholder "メールアドレス"]
<button type="button" id="show-confirm">内容を確認する</button>
</div>
<div id="confirmation-area" style="display: none;">
<p>お名前：<span id="confirm-name"></span></p>
<p>メールアドレス：<span id="confirm-email"></span></p>
<button type="button" id="back-btn">戻る</button>
<input type="submit" value="送信する">
</div>
</div>jQuery(function($){
$('#show-confirm').click(function(){
const name = $('input[name="your-name"]').val();
const email = $('input[name="your-email"]').val();
$('#confirm-name').text(name);
$('#confirm-email').text(email);
$('#input-area').hide();
$('#confirmation-area').show();
});
$('#back-btn').click(function(){
$('#confirmation-area').hide();
$('#input-area').show();
});
});実務メリット
- デザインカスタマイズが自在
- SPA的なUIに近づけられる
- 計測タグ・EFO施策との連携も柔軟に可能
Contact Form 7で「完了画面（Thanksページ）」に遷移させる方法
方法：Contact Form 7 Redirectionを使う
送信完了後に「/thanks」などの固定ページにリダイレクトさせたい場合に便利なプラグイン。
手順
- プラグイン「Contact Form 7 Redirection」をインストール
- 対象フォーム編集画面 > 「Redirection」タブで「/thanks」などの遷移先URLを設定
実務ポイント
- Thanksページに GA4イベント・CVタグ・Facebookピクセルなどを埋め込める
- LPでA/BテストやLP最適化を行う際にも計測が明確に分離される
そもそも：標準で「確認画面・完了画面」が備わったフォームを使いたいなら？
Snow Monkey Forms（おすすめ）
特徴
- 入力 → 確認 → 完了ページの3ステップが標準装備
- WordPress公式プラグインディレクトリにあり無料
- Gutenbergと相性が良く、ノーコードでブロック型フォームが作成可能
- 送信後に「Thanksページに遷移」も簡単設定
実務での活用例
- 企業コーポレートサイトの「お問い合わせ」
- 資料請求フォームに確認画面が必須の業界（士業・不動産・教育系など）
- 完了後は /thanks ページでリスティング広告のコンバージョンタグ計測
MW WP Form（開発者向けにおすすめ）
- 入力・確認・完了ページを分けてテンプレート設計
- フックが充実しており、メール内容やバリデーションも柔軟に制御可能
- 実務で「バリデーションを詳細にカスタマイズしたい」ケースに適している
フォーム選びの比較表（実務者向け）
| 機能・特徴 | Contact Form 7 | Snow Monkey Forms | MW WP Form |
|---|---|---|---|
| 入力確認画面 | ❌（追加実装必要） | ✅ 標準対応 | ✅ 標準対応 |
| 完了画面 | ❌（リダイレクト必要） | ✅ 標準対応 | ✅ 標準対応 |
| ノーコード対応 | △ | ◎（ブロック編集） | △（開発向け） |
| 高度なカスタマイズ | ◎（JSで対応） | △ | ◎（フック多数） |
| 実務向けおすすめ度 | 中〜上 | 上 | 上級者向け |
まとめ｜実務要件に応じた選定が成功の鍵
- Contact Form 7を使い続けたい場合 → プラグインやJSで確認画面・完了画面を追加しよう → 特にGAや広告計測が必要な場合は完了ページ遷移は必須！
- ノーコードや時短が必要な案件なら → Snow Monkey Forms一択。初期実装も早くメンテもしやすい
- 複雑なフォーム設計や高度な制御が必要なら → MW WP Formで開発的にカスタマイズ
よくある質問（FAQ）
Q. Contact Form 7で完了画面にリダイレクトすると送信エラーになる？
A. Ajaxで送信する仕様上、リダイレクト処理には「Contact Form 7 Redirection」などの専用プラグインが必要です。
Q. Snow Monkey Formsでページ遷移なしで完了画面を出す方法は？
A. 標準で確認・完了画面がページ内表示される構造になっています。モーダル表示などにしたい場合はCSSやJSでカスタマイズ可能。
締めくくり
フォーム設計はUXとCVを左右する重要な要素です。
確認画面や完了ページを正しく設計・実装することで、ユーザーの離脱を防ぎ、信頼感のあるフォーム体験を提供できます。
本記事を参考に、ぜひ自サイトや案件で使える実装を試してみてください！