Gravity Forms にフォームの確認画面を作成する

フォームの確認画面の世界的な現状

海外では通常Webフォームには確認画面は存在しないことが一般的です。
理由は、入力途中での離脱やカゴ落ち防止のためと言われています。

そういう意味では確認画面がほぼ必須である日本の状況はある種独特なものとも言えると思います。
（海外製のフォームプラグインにはほとんど確認画面機能はありません。）

そのため、海外製フォームプラグインである Gravity Forms もデフォルトで確認画面を表示する機能はありません。
確認画面は別途設定する必要があります。

注意事項

フォーム > 設定 に「確認」というメニューがありますが、これは確認画面の事ではなく、日本で言う「送信完了画面」の設定のことを指します。
それはデータの送信後に表示する画面になります。

確認画面の作成方法

確認画面にどのような情報を表示して確認を行うかによって作成方法は異なります。

まず、入力されたすべてのフィールドの項目を確認画面に表示する方法を説明します。

Gravity Pre-submission Confirmation プラグインを使用するやり方

一番簡単な方法として、Gravity Pre-submission Confirmation プラグインを使用するやり方を説明します。

Gravity Pre-submission Confirmation プラグインをインストールする

WordPress 管理画面の左側メニューで、プラグイン > 新規追加を選択します。

右上の「プラグインの検索…」の入力ボックスに「Gravity Pre-submission Confirmation」と入力します。
すると Gravity Pre-submission Confirmation プラグインが一番目に表示されますので、「今すぐインストール」ボタンをクリックします。

インストールが完了したら、「有効化」ボタンをクリックします。

これでプラグインのインストールが完了です。
Gravity Pre-submission Confirmation には特に設定は存在しませんので、初期設定等は不要です。

フォームを作成する

まず、新規フォームを作成します。

作成するフォームに名前を付けて「フォームの作成」ボタンをクリックして保存します。

確認画面を作成する

確認画面のあるフォームは次のようなページ構成になります。（入力画面が1ページで終わる場合）

1. 入力画面
2. 確認画面
3. 完了

3の「完了」は、GravityForms 標準の「確認」機能を使用しますので、フォームエディター上では2ページのフォームを作成することになります。

はじめに（途中でもよい）標準フィールドの「ページ」をフォームエディターにドラッグアンドドロップで設定します。

すると、「ページ送りを開始」「改ページ」「送信」ボタン、「ページ送りを終了」、3つの点線とボタンが表示されます。
以下のようにフォームを設定していきます。

1. ーーーーーー「ページ送りを開始」ーーーーーー
2. 入力するフォームを設置
3. ーーーーーーーー「改ページ」ーーーーーーーー
4. 確認画面を設置
5. 「送信」ボタン
6. ーーーーーー「ページ送りを終了」ーーーーーー

• 2.の入力するフォームについては、通常通りフォームを設定します。

• 次に、4. 確認画面を設置します。
  「改ページ」と「送信」ボタンの間に「HTML」フィールドを設置します。

• 「HTML」フィールドを編集します。

HTMLフィールドのコンテンツに {all_fields} を設定することで設定したすべての入力フィールドを整形されたテーブルで表示します。

{all_fields} の表示例

Gravity Pre-submission Confirmation を使用した時の {all_fields} の表示は以下のようになります。

参考1：住所フィールドの表示について

住所フィールドが含まれている場合、{all_fields} マージタグでは以下のような表示になります。
これはGravity Formsが日本の住所表示に対応していないのが原因です。

表示例）
千代田1-2-3
インペリアルマンション
千代田区, 東京都 1234567
Japan
Map It

住所フィールドが存在するフォームの場合は、確認画面に表示するフィールドをすべてHTMLフィールドにマージタグとして記載することで、住所フィールドの中身の順番を変更することができます。

以下のようなマージタグを「HTML」フィールドのコンテンツに記載します。
（Field Name:1.5の場合、住所フィールドのフィールドIDが"1"だった時の例になります。住所フィールドがフィールドID:3だった場合は、Field Name:3.5 となります。）

〒 {Field Name:1.5}<br>{Field Name:1.4} {Field Name:1.3} {Field Name:1.1} {Field Name:1.2}

上記のマージタグの出力例はこのようになります。

〒 1234567
東京都 千代田区 千代田1-2-3 インペリアルマンション

参考2：特定のフィールドの除外と複数のモディファイアの設定について

{all_fields} マージタグを使用する場合に特定のフィールドの出力を除外する場合は、 以下のような書き方をします。
この例では、フィールドID:3に設定してある住所フィールドの国名（ID:6）を出力しないようにする場合の例です。

{all_fields:exclude[3.6]}

また、マージタグは複数のモディファイアをカンマでつないで使用することができます。
{all_fields:modifier1,modifier2,modifier3}

{all_fields:exclude[3.6],nohidden}

参考3：{all_fields} マージタグのモディファイアについて

モディファイア

コンマを区切り文字として、複数の修飾子を追加することができます。順番は関係ありません。

例：
{all_fields:value,empty}
{all_fields:admin,value}

:admin

デフォルトのフィールドラベルではなく、フィールドのアドミンラベル（指定されている場合）を使用します。
例： {all_fields:admin}

:value

対応する値ラベルではなく、実際の値を表示する。これは通常、チェックボックス、ラジオボタン、ドロップダウンなど、複数の入力があるフィールドに適用されます。
例：{all_fields:value}

:empty

値が送信されていないフィールドが表示されます。

:noadmin

フィールド設定の「高度な設定」の「表示状態」が「管理者用」に設定されたフィールドの出力を非表示にします。

:nohidden

Hiddenフィールドタイプを使用しているフィールドのフィールド出力を非表示にします。「高度な設定」の「表示状態」が「非表示」に設定されているフィールドには適用されません。

参考情報

{all_fields} マージタグについては以下のページを参照してください。（英語）

• https://docs.gravityforms.com/fields-merge-tag/
• https://gravitywiz.com/gravity-forms-all-fields-template/

デモ

カスタムテンプレートを使用する方法について

上記以外に確認画面でカスタムテンプレートを使用する方法があります。
この方法は別途記事を作成します。

投稿者プロフィール

DoL（CMSラボ所長）DoL（CMSラボ所長）

CMS Laboの所長。
所員はまだない。

DoLは Director of Laboratories の略です。

最新の投稿

投稿者アーカイブ

• GravityForms2023年2月13日スパムハニーポットの機能強化
• GravityForms2023年2月10日ブロックのテーマとスタイルの設定
• GravityForms2023年2月9日Gravity Formsのテンプレートライブラリを利用する
• GravityForms2023年2月8日Gravity Forms セットアップウィザード