目次
Contact Form 7で確認画面付きお問い合わせフォームを作成する方法
Contact Form 7に確認画面を追加して、ユーザーが入力内容を確認してから送信できるフォームの作り方を解説します。
必要なプラグイン
- Contact Form 7
- Contact Form 7 Multi-Step Forms（確認画面機能を追加）
手順1: 固定ページを作成する
WordPress管理画面から、以下の3つの固定ページを作成します。
1. お問い合わせページ
- スラッグ：
contact（既存の場合はそのまま）
2. お問い合わせ確認ページ
- スラッグ：
contact-confirm - タイトル：お問い合わせ確認
3. お問い合わせ完了ページ
- スラッグ：
contact-thanks - タイトル：お問い合わせ完了
手順2: Contact Form 7でフォームを作成する
WordPress管理画面の「お問い合わせ > コンタクトフォーム」から、2つのフォームを作成します。
フォーム1：お問い合わせ（入力画面）
フォームタブ:
通常のフォーム内容を作成し、最後の送信ボタン部分を以下のように変更します。
変更前:
[submit "送信する"]変更後:
[submit id:js-submit "内容を確認する"]
[multistep multistep-635 first_step "/contact-confirm"]※multistep-635の数字部分は、次に作成する確認フォームのIDに合わせて変更してください。
フォーム2：お問い合わせ確認（確認画面）
フォームタブ:
入力画面と同じフォーム項目を作成しますが、以下の点を変更します。
- 各入力項目に
readonly属性を追加（編集不可にする） - 送信ボタンとマルチステップの設定を追加
例:
[text* your-name readonly "readonly"][email* your-email readonly “readonly”]
[textarea your-message readonly “readonly”]
[submit “送信する”]
[multistep multistep-635 last_step]
設定タブ:
「メール」タブで送信先メールアドレスなどを設定します。
追加設定タブ:
リダイレクト先（サンクスページ）を指定します。
on_sent_ok: "location = '/contact-thanks';"または、Contact Form 7の最新版では「追加設定」に以下を記述：
on_sent_ok: "location.href='/contact-thanks';"手順3: 固定ページにショートコードを貼り付ける
お問い合わせページ（contact）:
[contact-form-7 id="123" title="お問い合わせ"]お問い合わせ確認ページ（contact-confirm）:
[contact-form-7 id="635" title="お問い合わせ確認"]お問い合わせ完了ページ（contact-thanks）:
完了メッセージを自由に記述してください。
例：
お問い合わせいただき、ありがとうございます。
内容を確認の上、担当者よりご連絡させていただきます。動作の流れ
- ユーザーが「お問い合わせ」ページでフォームに入力
- 「内容を確認する」ボタンをクリック
- 「お問い合わせ確認」ページに遷移し、入力内容を確認
- 「送信する」ボタンをクリック
- 「お問い合わせ完了」ページに遷移
注意点
- フォームIDは実際に作成したフォームのIDに置き換えてください
multistepのパスは、確認ページのスラッグに合わせて調整してください- Contact Form 7のバージョンによって、リダイレクト設定の記述方法が異なる場合があります
この設定で、ユーザーフレンドリーな確認画面付きお問い合わせフォームが完成します。
