確認、完了画面の設定について

確認・完了画面の設定方法

FormNestでは、フォーム送信プロセスを複数のステップに分ける「フォームフロー」機能が利用できます。この記事では、確認画面と完了画面の設定方法を詳しく解説します。

フォームフローとは

フォームフローは、フォーム送信プロセスを複数のステップに分ける機能です。ユーザーは入力内容を確認してから送信できるため、誤送信を防ぎ、ユーザー体験を向上させます。

標準フロー（3ステップ）

1. 入力画面 – ユーザーがフォームに入力
2. 確認画面 – 入力内容を確認（オプション）
3. 完了画面 – 送信完了メッセージを表示

💡 ヒント： 確認画面はオプションです。確認画面を無効にすると、入力画面から直接完了画面に進みます。

基本的な設定手順

ステップ1: フォーム表示ページの作成（必須）

まず、フォームを表示するページを作成します。

1. WordPress管理画面で「固定ページ」→「新規追加」（または「投稿」→「新規追加」）
2. ページタイトルを入力（例：「お問い合わせ」）
3. 本文エリアにショートコードを入力： [wp_formnest id="フォームID"]
4. 「公開」ボタンをクリックしてページを公開
5. ページのURLを確認（例：/contact/）

⚠️ 重要： 同じページで入力画面・確認画面・完了画面が自動的に切り替わります。別々のページを作成する必要はありません。

ステップ2: フォームフロー設定を開く

1. フォーム管理画面で、設定したいフォームの「編集」をクリック
2. フォーム編集画面で「フォームフロー設定」セクションを開く
3. 設定項目が表示されます

確認画面の設定

確認画面を有効にすると、送信前に入力内容を確認できる画面が表示されます。

確認画面を有効にする

1. フォームフロー設定の「確認画面を有効にする」にチェックを入れる
2. チェックを入れると、確認画面関連の設定項目が表示されます
3. 「保存」ボタンをクリック

確認画面の動作：

• 入力画面で「送信」ボタンをクリック
• バリデーションが成功すると、同じページで確認画面が自動表示
• 確認画面で入力内容を確認
• 「送信する」ボタンで送信完了
• 「戻る」ボタンで入力画面に戻って修正可能

確認画面URLの設定（オプション）

確認画面を別のページに表示したい場合に設定します。

設定方法：

1. 確認画面用のページを作成（任意）
2. ページタイトル：例「お問い合わせ確認」
3. 本文に同じショートコードを追加：[wp_formnest id="フォームID"]
4. 公開してURLをコピー（例：/contact-confirm/）
5. フォームフロー設定の「確認画面URL」にURLを貼り付け

⚠️ 注意：

• 確認画面URLと完了画面URLは、同じショートコードを表示するページである必要があります
• URLが空欄の場合は、同じページで確認画面が表示されます
• 相対URLのみ使用（/contact-confirm/のように/で始まるパス）

確認画面のカスタマイズ

確認画面のタイトルや説明文をカスタマイズできます。

設定項目：

• 確認画面のタイトル：確認画面に表示されるタイトル（デフォルト：「入力内容の確認」）
• 確認画面の説明文：確認画面に表示される説明文（デフォルト：「以下の内容で送信します。よろしければ「送信する」ボタンを押してください。」）

設定方法：

1. フォームフロー設定の「画面テキスト設定」セクションを開く
2. 「確認画面のタイトル」にタイトルを入力
3. 「確認画面の説明文」に説明文を入力
4. 「保存」ボタンをクリック

完了画面の設定

完了画面は、フォーム送信完了後に表示される画面です。

完了画面URLの設定（オプション）

送信完了後に別のページにリダイレクトしたい場合に設定します。

設定方法：

1. 完了ページを作成（任意）
   • WordPress管理画面で「固定ページ」→「新規追加」
   • ページタイトル：例「お問い合わせ完了」
   • 本文に完了メッセージを記入（例：「お問い合わせありがとうございました」）
   • 同じショートコードを追加：[wp_formnest id="フォームID"]
   • 公開してURLをコピー（例：/contact-thanks/）
2. フォームフロー設定の「完了画面URL」にURLを貼り付け
3. 「保存」ボタンをクリック

⚠️ 注意：

• 完了画面URLが空欄の場合は、同じページで完了画面が表示されます
• 相対URLのみ使用（/contact-thanks/のように/で始まるパス）
• http://やhttps://は不要
• ドメイン名も不要
• 確認画面URLと完了画面URLは、同じショートコードを表示するページである必要があります

完了メッセージのカスタマイズ

完了画面で表示されるメッセージをカスタマイズできます。

設定方法：

1. フォームフロー設定の「完了メッセージ」フィールドを開く
2. 表示したいメッセージを入力
3. HTMLタグも使用可能（<br>などで改行）
4. 「保存」ボタンをクリック

デフォルトメッセージ：

お問い合わせありがとうございます。
送信が完了しました。

担当者より折り返しご連絡いたします。

カスタマイズ例：

• シンプルなメッセージ：「送信が完了しました。ありがとうございました。」
• HTMLタグを使用：「お問い合わせありがとうございます。
  
  送信が完了しました。
  担当者より折り返しご連絡いたします。」
• 詳細なメッセージ：「お問い合わせありがとうございます。
  
  送信が完了しました。
  
  通常、1営業日以内にご返信いたします。
  お急ぎの場合は、お電話でお問い合わせください。」

ボタンの設定

フォームフローで使用されるボタンのテキストや表示をカスタマイズできます。

送信ボタンのテキスト

入力画面で表示される送信ボタンのテキストを変更できます。

設定方法：

1. フォームフロー設定の「ボタン設定」セクションを開く
2. 「送信ボタンのテキスト」にテキストを入力（デフォルト：「送信する」）
3. 「保存」ボタンをクリック

使用例：

• 「送信する」
• 「確認する」
• 「内容を確認する」
• 「次へ進む」

戻るボタンの設定（確認画面が有効な場合のみ）

確認画面で表示される戻るボタンの設定ができます。

設定項目：

• 戻るボタンのテキスト：戻るボタンに表示されるテキスト（デフォルト：「修正する」）
• 戻るボタンを表示する：戻るボタンを表示するかどうか

設定方法：

1. 確認画面を有効にする
2. 「戻るボタンのテキスト」にテキストを入力
3. 「戻るボタンを表示する」にチェック（表示する場合）
4. 「保存」ボタンをクリック

使用例：

• 「修正する」
• 「戻る」
• 「入力画面に戻る」
• 「内容を修正する」

ボタンのCSSクラス設定（詳細設定）

ボタンにCSSクラスを追加して、デザインをカスタマイズできます。

設定方法：

1. フォームフロー設定の「詳細設定（CSSクラス名）」セクションを開く
2. 各ボタンのクラス名を入力：
   • 送信ボタンのクラス名：入力画面の送信ボタン
   • 確認ボタンのクラス名：確認画面の送信ボタン
   • 戻るボタンのクラス名：確認画面の戻るボタン
3. 複数のクラスを指定する場合は、スペースで区切る（例：btn btn-primary）
4. 「保存」ボタンをクリック

使用例：

• Bootstrapを使用する場合：btn btn-primary
• カスタムクラスを追加：custom-submit-button
• 複数のクラス：btn btn-lg btn-primary

フォームフローの動作パターン

パターン1: 確認画面あり + 完了画面URLなし

確認画面を有効にし、完了画面URLを設定しない場合です。

フロー：

入力画面 → [送信] → 確認画面 → [送信する] → 完了画面（同じページ）
                ↑                    ↓
                └── [戻る] ──────────┘

設定：

• 確認画面を有効にする：✓
• 完了画面URL：空欄

動作：

1. ユーザーが入力画面でフォームに入力
2. 「送信」ボタンをクリック
3. 同じページで確認画面が表示
4. 「送信する」ボタンで送信完了
5. 同じページで完了画面が表示
6. 「戻る」ボタンで確認画面に戻れる

パターン2: 確認画面あり + 完了画面URLあり

確認画面を有効にし、完了画面URLを設定する場合です。

フロー：

入力画面 → [送信] → 確認画面 → [送信する] → 完了ページ（リダイレクト）
                ↑                    ↓
                └── [戻る] ──────────┘

設定：

• 確認画面を有効にする：✓
• 完了画面URL：/contact-thanks/

動作：

1. ユーザーが入力画面でフォームに入力
2. 「送信」ボタンをクリック
3. 同じページで確認画面が表示
4. 「送信する」ボタンで送信完了
5. 完了ページ（/contact-thanks/）にリダイレクト
6. 完了ページで完了画面が表示

パターン3: 確認画面なし + 完了画面URLなし

確認画面を無効にし、完了画面URLを設定しない場合です。

フロー：

入力画面 → [送信] → 完了画面（同じページ）

設定：

• 確認画面を有効にする：チェックなし
• 完了画面URL：空欄

動作：

1. ユーザーが入力画面でフォームに入力
2. 「送信」ボタンをクリック
3. バリデーションが成功すると直接送信
4. 同じページで完了画面が表示

パターン4: 確認画面なし + 完了画面URLあり

確認画面を無効にし、完了画面URLを設定する場合です。

フロー：

入力画面 → [送信] → 完了ページ（リダイレクト）

設定：

• 確認画面を有効にする：チェックなし
• 完了画面URL：/contact-thanks/

動作：

1. ユーザーが入力画面でフォームに入力
2. 「送信」ボタンをクリック
3. バリデーションが成功すると直接送信
4. 完了ページ（/contact-thanks/）にリダイレクト
5. 完了ページで完了画面が表示

設定の詳細説明

確認画面の表示内容

確認画面には、以下の内容が表示されます：

• フォームタイトル：フォーム名
• 確認メッセージ：設定した確認画面の説明文
• 入力内容一覧：すべてのフィールドの入力内容（読み取り専用）
• 送信ボタン：送信を確定するボタン
• 戻るボタン：入力画面に戻るボタン（設定で表示/非表示を切り替え可能）

完了画面の表示内容

完了画面には、以下の内容が表示されます：

• フォームタイトル：フォーム名
• 成功アイコン：送信成功を示すアイコン
• 完了メッセージ：設定した完了メッセージ
• 送信データの表示：送信した内容の確認（オプション）
• トップページへのリンク：サイトのトップページに戻るリンク

セキュリティ機能

フォームフローでは、以下のセキュリティ機能が自動で有効になります：

• トークン検証：確認画面と完了画面では、セキュリティトークンで不正アクセスを防止
• セッション管理：フォームデータはセッションで安全に管理
• URL検証：設定されたURL以外からのアクセスをブロック
• POST-Redirect-GET：ブラウザのリロード時にPOSTが再送信されることを防止

💡 ヒント： これらのセキュリティ機能により、重複送信や不正アクセスを防ぐことができます。

よくある設定例

例1: シンプルなお問い合わせフォーム

確認画面なし、完了画面も同じページに表示するシンプルな設定です。

設定：

• 確認画面を有効にする：チェックなし
• 完了画面URL：空欄
• 送信ボタンのテキスト：「送信する」
• 完了メッセージ：「お問い合わせありがとうございます。送信が完了しました。」

メリット：

• シンプルで分かりやすい
• ユーザーの操作が少ない
• 設定が簡単

例2: 確認画面付きのお問い合わせフォーム

確認画面を有効にして、誤送信を防ぐ設定です。

設定：

• 確認画面を有効にする：✓
• 完了画面URL：空欄
• 送信ボタンのテキスト：「確認する」
• 戻るボタンのテキスト：「修正する」
• 戻るボタンを表示する：✓
• 完了メッセージ：「お問い合わせありがとうございます。送信が完了しました。」

メリット：

• 誤送信を防げる
• ユーザーが内容を確認できる
• 修正が簡単

例3: 完了ページにリダイレクトするフォーム

送信完了後に専用の完了ページにリダイレクトする設定です。

設定：

• 確認画面を有効にする：✓
• 完了画面URL：/contact-thanks/
• 送信ボタンのテキスト：「確認する」
• 完了メッセージ：「お問い合わせありがとうございました。担当者より折り返しご連絡いたします。」

メリット：

• 完了ページで追加情報を表示できる
• ユーザーが完了を明確に認識できる
• SEO対策にもなる

トラブルシューティング

問題1: 確認画面が表示されない

原因と解決方法：

• 設定が保存されていない
  • フォームフロー設定で「確認画面を有効にする」にチェックが入っているか確認
  • フォーム全体を「保存」する必要がある
• バリデーションエラーがある
  • 入力内容にエラーがあると、確認画面に進めません
  • エラーメッセージを確認して修正
• JavaScriptが無効になっている
  • ブラウザのJavaScriptが有効になっているか確認
  • 他のJavaScriptエラーがないか確認

問題2: 完了画面が表示されない

原因と解決方法：

• 完了画面URLが間違っている
  • 完了画面URLが正しいか確認
  • 相対URL形式（/contact-thanks/）になっているか確認
  • 完了ページに同じショートコードが配置されているか確認
• ページが公開されていない
  • 完了ページが公開状態になっているか確認
  • 非公開ページでは動作しません
• セッションの問題
  • ブラウザのセッションが切れている可能性
  • 再度フォームから送信してみる

問題3: 戻るボタンが表示されない

原因と解決方法：

• 確認画面が無効になっている
  • 確認画面を有効にする必要があります
  • 確認画面が有効でない場合、戻るボタンは表示されません
• 戻るボタンの表示設定
  • 「戻るボタンを表示する」にチェックが入っているか確認

問題4: 完了画面URLにリダイレクトされない

原因と解決方法：

• URLの形式が間違っている
  • 相対URL形式（/contact-thanks/）になっているか確認
  • http://やhttps://は不要
  • ドメイン名も不要
• ページが存在しない
  • 完了ページが作成されているか確認
  • ページのURLが正しいか確認
• ショートコードが配置されていない
  • 完了ページに同じショートコード（[wp_formnest id="フォームID"]）が配置されているか確認

問題5: 確認画面で入力内容が表示されない

原因と解決方法：

• セッションの問題
  • ブラウザのセッションが切れている可能性
  • 再度フォームから送信してみる
• フィールドが設定されていない
  • フォームにフィールドが追加されているか確認
  • フィールドが正しく保存されているか確認

ベストプラクティス

1. 確認画面の使用

• 重要なフォームには確認画面を有効にする：誤送信を防ぐため
• シンプルなフォームは確認画面なしでもOK：ユーザーの操作を減らすため
• 戻るボタンは表示する：ユーザーが修正しやすくするため

2. 完了画面の設定

• 完了メッセージは明確に：ユーザーが送信完了を理解できるように
• 次のアクションを案内：例：「担当者より折り返しご連絡いたします」
• 完了ページを使用する場合：追加情報を表示できる

3. ボタンのテキスト

• 分かりやすいテキストを使用：ユーザーが次に何をすべきか明確に
• 確認画面がある場合：送信ボタンは「確認する」など、確認を促すテキストに
• 確認画面がない場合：送信ボタンは「送信する」など、送信を明確にするテキストに

4. URLの設定

• 相対URLを使用：ドメイン変更時にも対応しやすい
• わかりやすいURL：/contact-thanks/など、意味が分かるURLに
• 同じショートコードを配置：確認画面URLと完了画面URLのページには、同じショートコードを配置

よくある質問

Q: 確認画面と完了画面を別々のページに設定できますか？

A: はい、可能です。ただし、両方のページに同じショートコード（[wp_formnest id="フォームID"]）を配置する必要があります。

Q: 確認画面なしで、完了画面だけを別ページに設定できますか？

A: はい、可能です。確認画面を無効にし、完了画面URLのみを設定してください。

Q: 完了メッセージにHTMLタグは使えますか？

A: はい、使用できます。改行には<br>タグ、強調には<strong>タグなどが使用できます。

Q: 確認画面で一部のフィールドだけを非表示にできますか？

A: 現在のバージョンでは、確認画面にはすべてのフィールドが表示されます。特定のフィールドを非表示にする機能は、今後のバージョンで追加予定です。

Q: 完了画面で送信データを表示しないようにできますか？

A: はい、完了画面のテンプレートをカスタマイズすることで可能です。ただし、テーマや子テーマのカスタマイズが必要です。

まとめ

確認画面と完了画面の設定により、ユーザーが安心してフォームを送信できる環境を整えることができます。

設定のポイント：

• 確認画面は、重要なフォームで有効にすることを推奨
• 完了画面URLは、追加情報を表示したい場合に設定
• ボタンのテキストは、ユーザーが理解しやすい内容に
• 完了メッセージは、次のアクションを明確に
• セキュリティ機能が自動で有効になるため、安心して使用できる

詳細な設定方法については、「基本的なフォームの作成方法」の記事を参照してください。問題が解決しない場合は、ヘルプページの「よくある問題と解決方法」セクションを確認するか、サポートにお問い合わせください。