contact form 7で確認画面から入力画面に戻るには？

確認用フォームのコードに[previous]タグを追加すると、入力内容を保持したまま入力ページに戻るボタンが表示されます。

contact form 7で確認画面の改行を表示するには？

プラグインのバージョンによっては改行が自動で対応されています。改行が表示されない場合は、CSSでwhite-space: pre-wrapを指定する方法が有効です。

contact form 7でプラグインなしで確認画面を作ることはできますか？

技術的にはjQueryやCSSで疑似的な確認画面を実装可能ですが、難易度が高いためContact Form 7 Multi-Step Formsなどの専用プラグインを使う方法を推奨します。

contact form 7 multi-step formsの無料版の制限は何ですか？

無料版はフォームデータの上限が4KB（約1,000文字程度）に制限されています。大容量のフォームが必要な場合は有料版（Pro）へのアップグレードを検討してください。

【WordPress】確認画面を設置する方法（Contact Form 7）

Contact Form 7でお問い合わせフォームを作ったのに、確認画面が表示されない…

Contact Form 7（CF7）には、標準機能として確認画面が用意されていません。そのため、別途対応が必要になります。

この記事では、無料プラグイン「Contact Form 7 Multi-Step Forms」を使って確認画面を設置する手順を、画像付きで解説します。

Multi-Step Formsのインストールから設定まで
確認画面から前のページに戻る方法
「遷移しない」「改行されない」などよくあるトラブルの対処法

WordPress 6.x / 7.0 + Contact Form 7 Multi-Step Forms で動作確認済み（2026年6月時点）。

オンライン事業売買

WordPressサイト売買

ドメイン売買

データを読み込み中...

Contact Form 7に確認画面がない理由
確認画面を設置する方法（Multi-Step Formsプラグイン）
注意点・制限
- 無料版は4KB（約1,000文字）まで
- キャッシュプラグインとの相性に注意
よくある質問
まとめ

Contact Form 7に確認画面がない理由

Contact Form 7は、シンプルさを重視した設計のフォームプラグインです。公式ドキュメント（contactform7.com）でも確認画面機能には言及がなく、標準では「入力→送信→完了」の2ステップ構成になっています。

確認画面を追加するには、マルチステップフォーム専用プラグインを組み合わせるのが最も確実な方法です。

確認画面を設置する方法（Multi-Step Formsプラグイン）

今回使用するのは「Contact Form 7 Multi-Step Forms（WordPress.org公式）」です。50,000以上のサイトで使われている無料プラグインです。

MEMO

無料版はフォームデータの上限が4KB（概ね1,000文字程度）です。長文を含むフォームを作る場合は、有料版（Pro）へのアップグレードを検討してください。

STEP1：Multi-Step Formsをインストールする

WordPress管理画面の「プラグイン」→「新規プラグインを追加」をクリックします。

WordPressプラグイン一覧—「プラグインを新規追加」ボタン — ▲ 「新規プラグインを追加」をクリック

検索欄に「contact form 7 multi step」と入力し、「Contact Form 7 Multi-Step Forms」を見つけたら「今すぐインストール」→「有効化」の順にクリックします。

STEP2：確認用フォームを新規作成する（[multiform]タグ）

既存の入力フォームは変更しません。「お問い合わせ」→「コンタクトフォームを追加」で、確認画面専用の新しいフォームを作成します。

フォームコードには、入力フォームで使っているフィールドと同じ名前を [multiform フィールド名] の形式で並べます。これにより、入力画面で送信された値が確認画面に引き継がれて表示されます。

CF7フォーム編集—[multiform]タグを使った確認用フォームコード — ▲ 新規フォームに [multiform] タグを使って入力値を表示するコードを記述

💡 multiformタグの書き方

入力フォームで [text your-name] としている場合、確認フォームでは [multiform your-name] と書きます。これでユーザーが入力した値がそのまま表示されます。

STEP3：確認ページ（固定ページ）を作成する

STEP2で作成した確認用フォームを埋め込むための固定ページを作成します。「固定ページ」→「新規固定ページを追加」をクリックし、ページ本文にSTEP2で作ったフォームのショートコードを貼り付けます。

固定ページ編集—確認ページに確認用フォームのショートコードを配置 — ▲ 確認ページに確認用フォームのショートコードを貼り付けて公開する

STEP4：完了ページを作成する

同様に「固定ページ」→「新規固定ページを追加」で完了ページを作成します。「お問い合わせを受け付けました」などの完了メッセージを本文に入力して公開します。

STEP5：入力フォームに[multistep]タグを追加して確認ページへ遷移させる

既存の入力フォームの編集画面を開きます。「フォーム」タブのコード末尾（送信ボタンの前）に、確認ページのURLを指定した [multistep first_step] タグを追加します。

[multistep first_step "/contact-confirm/"]
[submit "確認画面へ"]

/contact-confirm/ の部分は、STEP3で作成した確認ページの固定ページスラッグです。フォーム名ではありません。WordPressの固定ページ編集画面で確認できるパーマリンクのスラッグ部分（例：https://example.com/contact-confirm/ なら /contact-confirm/）を指定します。

CF7フォーム編集—[multistep first_step]タグで確認ページへの遷移を設定 — ▲ 入力フォームの「フォーム」タブに [multistep first_step] タグを追加

注意

[multistep]タグの引数に指定するURLは確認ページのスラッグと一致させてください。うまく遷移しない場合は、プラグインの説明ページ（WordPress.org）に掲載されているサンプルコードを参照してください。

STEP6：確認フォームに完了ページへの遷移を設定する

確認用フォームの編集画面を開きます。

「フォーム」タブのコードに [multistep last_step] を追加します。このタグが付いたフォームが送信されたとき、実際にメールが送信されます。

[multistep last_step]
[previous "入力に戻る"] [submit "送信する"]

次に「その他の設定」タブを開き、以下のコードを追加します。送信完了後に完了ページへリダイレクトさせる設定です。

on_sent_ok: "location.replace('/contact-thanks/');"

/contact-thanks/ の部分は、STEP4で作成した完了ページの固定ページスラッグです。完了ページの編集画面でパーマリンクのスラッグを確認し、その値を指定します。

💡 「戻る」ボタンを設置するには

確認フォームに [previous] タグを追加することで、ユーザーが入力ページに戻れるボタンを表示できます。入力ミスに気づいたときに便利です。

STEP7：動作確認をする

設定が完了したら、実際にお問い合わせページを開いて動作確認します。

入力フォームに値を入力して「確認画面へ」をクリックする
確認ページに入力内容が正しく表示されるか確認する
「入力に戻る」ボタンで入力ページに戻れるか確認する
「送信する」をクリックして完了ページに遷移し、メールが届くか確認する

お問い合わせ確認ページ—入力値が表示された確認画面 — ▲ 確認ページにフォームが正しく表示されていることを確認する（Multi-Step Forms有効化後は入力値が引き継がれて表示されます）

注意点・制限

無料版は4KB（約1,000文字）まで

Multi-Step Formsの無料版では、フォームで送受信できるデータ量の上限が4KB（概ね1,000文字程度）に制限されています。テキストエリアに長い文章を入力するフォームでは、この制限に引っかかる可能性があります。大容量のフォームが必要な場合は有料版（Pro）の利用を検討してください。

キャッシュプラグインとの相性に注意

WP Super CacheやW3 Total Cacheなどのキャッシュプラグインを使用している場合、確認ページがキャッシュされることで正しく動作しないケースがあります。確認ページをキャッシュ対象から除外する設定を行うことを推奨します（各キャッシュプラグインの設定で「除外URL」に確認ページのスラッグを追加）。

よくある質問

Q. 確認画面に遷移しないのはなぜですか？

[multistep]タグの記述ミス、または確認ページのURLが正しく指定されていない可能性があります。フォームコードの [multistep first_step “URL”] の引数と、実際の確認ページURLが一致しているか確認してください。また、JavaScriptエラーが発生していないか、ブラウザの開発者ツールでコンソールを確認することも有効です。

Q. 確認画面から入力画面に戻るには？

確認用フォームのフォームコードに [previous] タグを追加すると、「戻る」ボタンが表示されます。このボタンをクリックすると、入力内容を保持したまま入力ページに戻ることができます。

Q. 確認画面で改行を表示するには？

テキストエリアで入力した改行を確認画面でも表示するには、確認用フォームで [multiform your-message] をそのまま使うのではなく、nl2br 処理が必要な場合があります。プラグインのバージョンによっては自動で対応されているため、まず動作確認を行ってください。改行が表示されない場合は、CSSで white-space: pre-wrap を指定する方法も有効です。