マルチステップランディングページフォーム
長いランディングページフォームを複数のステップに分割し、各ステップに独自のフィールドを設定することで、ユーザーがフォームを1ステップずつ進められるようにします。すべてのマルチステップフォームにはロックされた確認ステップが含まれているため、ユーザーは送信後に必ず確認画面を目にします。
前提条件
ランディングページビルダーにアクセスするには、特定の権限が必要です。アクセスできない場合は、Braze管理者にお問い合わせください。
また、ランディングページフォームブロックについても理解しておく必要があります。
マルチステップフォームの仕組み
マルチステップフォームを作成するには、BuildパネルのLayoutセクションからForm行を追加します。Form行にはアクションボタンとマルチステップサポートが組み込まれているため、行の構造を自分で組み立てる必要はありません。
ランディングページごとに追加できるForm行は1つだけです。ページにドラッグすると、単一のステップと、送信後に実行されるロック済みの確認ステップが表示されます。
Form行は独自のマルチステップナビゲーションを管理するため、すべてのステップは1つのページ上のその単一行内に配置されます。これは、単一ステップのフォームを作成し、そのSubmitボタンを別の確認用ランディングページにリンクする標準的なアプローチとは異なります。詳細については、ステップ4: 確認ページを作成するを参照してください。
マルチステップフォームの追加
- ランディングページエディターで、ビルドパネルに移動し、レイアウトを選択します。
- フォーム行をページにドラッグします。
- フォーム行を選択した状態で、右側のプロパティパネルのステップセクションを使用してフォームを構築します。
- フォームブロック（メールキャプチャ、電話キャプチャ、入力フィールド、ドロップダウン、チェックボックス、チェックボックスグループなど）をステップ1に追加します。
- ステップを追加を選択して追加のステップを作成し、各ステップにフォームブロックを追加します。
例えば、3ステップのフォームでは、ステップ1で名前を入力し、ステップ2で電話番号を入力し、最後に確認ステップで送信に対する感謝のメッセージを表示するといった構成が考えられます。
編集中にステップ間を移動する
エディターでステップ間を移動するには、2つの方法があります。
| 方法 | 操作手順 |
|---|---|
| ステップナビゲーター | キャンバスでステップ X / Yコントロールを使用して、前または次のステップに移動します。 |
| ステップパネル | フォーム行を選択し、右側のプロパティパネルのステップセクションを使用して、確認ステップを含む任意のステップに直接ジャンプします。 |
ステップの管理
フォーム行のプロパティパネルにあるステップセクションを使用して、ステップの追加、削除、並べ替えを行います。
| アクション | 方法 |
|---|---|
| ステップを追加する | Add stepを選択します。新しいステップは既存のステップの後、Confirmationステップの前に追加されます。 |
| ステップを削除する | 削除したいステップの横にあるゴミ箱アイコンを選択します。 Confirmationステップにはゴミ箱アイコンがなく、削除や並べ替えはできません。このステップは常に最後に実行され、ユーザーが前のステップを完了した後に表示されます。 |
| ステップを並べ替える | ステップの横にあるドラッグハンドルを使用して順序を変更します。 |
確認ステップのカスタマイズ
すべてのマルチステップフォームには、ステップセクションの送信後の下に確認ステップが含まれています。このステップはロックされているため削除できません。つまり、ユーザーがフォームを送信した後、必ず確認画面が表示されます。
確認ステップは削除できませんが、他のステップと同様にカスタマイズできます。ステップセクションで選択し、ブロックを追加してスタイルを設定することで、確認メッセージを作成できます。
フォームブロックのスタイル設定
フォーム行を選択した状態で、マルチステップフォームパネルのスタイルセクションを使用して、フォームコンテナをカスタマイズします。
| コントロール | 説明 |
|---|---|
| 背景画像 | フォームの背後に画像を追加します。画像のサイズ、位置、繰り返しの設定も調整できます。 |
| 背景色 | フォームコンテナの背景色を設定します。 |
| ボーダースタイル | フォームコンテナのボーダーを実線、破線、または点線から選択します。 |
| ボーダーの色 | フォームコンテナのボーダーの色を設定します。 |
| ボーダーの角丸 | フォームコンテナの角を丸くします。 |
| パディング | フォームコンテナの端とコンテンツの間のスペースを調整します。 |
これらのスタイルは、確認ステップを含むすべてのステップにわたってフォームコンテナに適用されます。
部分的に完了したフォームからデータをトラッキングする
ユーザーが確認ステップに到達する前にフォームを離れた場合でも、Brazeは完了したステップのデータをユーザープロファイルに保存します。ランディングページフォームを送信済みイベントは、ユーザーがすべてのステップを完了して確認ステップに到達するまでログに記録されません。
リターゲティングとトリガー配信は、ランディングページフォームを送信済みイベントに依存しています。一部のステップのみを送信し、すべてを完了していないユーザーのデータはプロファイルに保存されますが、部分的なデータがキャプチャされていても、そのイベントには含まれません。
これはランディングページアンケートとは異なります。アンケートでは、最終ステップに到達しなかったユーザーは部分的な送信としてトラッキングされます。
制限事項と考慮事項
- ランディングページは1つのフォーム行のみをサポートしているため、すべてのステップと確認ステップはその1つの行に含まれます。
- データ収集ステップは最大10個まで追加できます。確認ステップはこの上限にはカウントされません。
- 各ステップには、クリック時に次のステップに進むように設定されたデフォルトのボタンが含まれています。このアクションは、現在のステップの入力を検証して保存します。最後のデータ収集ステップでは、ランディングページフォームを送信しましたイベントも記録し、確認に進みます。ステップが接続されていない場合は、ボタンが次のステップに進むようにクリック時の動作を追加してください。詳細については、エディターブロックのボタンを参照してください。
- 確認ステップはフォーム行に組み込まれているため、確認エクスペリエンス用に2つ目のランディングページを作成したり、リンクしたりする必要はありません。
- レイアウトの下にフォーム行が表示されない場合は、Brazeアカウントマネージャーにお問い合わせください。