Skip to content

マルチステップランディングページフォーム

長いランディングページフォームを複数のステップに分割し、各ステップに独自のフィールドを設定することで、ユーザーがフォームを1ステップずつ進められるようにします。すべてのマルチステップフォームにはロックされた確認ステップが含まれているため、ユーザーは送信後に必ず確認画面を目にします。

前提条件

ランディングページビルダーにアクセスするには、特定の権限が必要です。アクセスできない場合は、Braze管理者にお問い合わせください。

また、ランディングページフォームブロックについても理解しておく必要があります。

マルチステップフォームの仕組み

マルチステップフォームを作成するには、ビルドパネルのレイアウトセクションからフォーム行を追加します。フォーム行にはアクションボタンとマルチステップサポートが組み込まれているため、行構造を自分で組み立てる必要はありません。

ランディングページごとに追加できるフォーム行は1つだけです。ページにドラッグすると、1つのステップと、送信後に実行されるロックされた確認ステップから始まります。

ランディングページコンポーザーのマルチステップランディングページフォーム。

マルチステップフォームを追加する

  1. ランディングページエディターで、ビルドパネルに移動し、レイアウトを選択します。
  2. フォーム行をページにドラッグします。
  3. フォーム行を選択した状態で、右側のプロパティパネルのステップセクションを使用してフォームを構築します。
    • ステップ1フォームブロックメールキャプチャ電話番号キャプチャ入力フィールドドロップダウンチェックボックスチェックボックスグループなど)を追加します。
    • ステップを追加を選択して追加のステップを作成し、各ステップにフォームブロックを追加します。

たとえば、3ステップのフォームでは、ステップ1で名前を、ステップ2で電話番号を尋ね、確認ステップで送信に対する感謝のメッセージを表示できます。

エディターでステップ間を移動するには、2つの方法があります。

方法 操作方法
ステップナビゲーター キャンバス上で、ステップ X / Yコントロールを使用して前のステップまたは次のステップに移動します。
ステップパネル フォーム行を選択し、右側のプロパティパネルのステップセクションを使用して、確認ステップを含む任意のステップに直接ジャンプします。

ステップを管理する

フォーム行のプロパティパネルのステップセクションを使用して、ステップの追加、削除、並べ替えを行います。

アクション 操作方法
ステップを追加する ステップを追加を選択します。新しいステップは既存のステップの後、確認ステップの前に追加されます。
ステップを削除する 削除したいステップの横にあるゴミ箱アイコンを選択します。

確認ステップにはゴミ箱アイコンがなく、削除や並べ替えはできません。確認ステップは常に最後に実行され、ユーザーが前のステップを完了した後に表示されます。
ステップを並べ替える ステップの横にあるドラッグハンドルを使用して順序を変更します。

確認ステップをカスタマイズする

すべてのマルチステップフォームには、ステップセクションの送信後の下に確認ステップが含まれています。このステップはロックされているため削除できず、ユーザーがフォームを送信した後に必ず確認画面が表示されます。

確認ステップは削除できませんが、他のステップと同様にカスタマイズできます。ステップセクションで選択し、ブロックを追加してスタイルを設定し、確認メッセージを作成してください。

部分的に完了したフォームのデータを追跡する

ユーザーが確認ステップに到達する前にフォームを離れた場合でも、Brazeは完了したステップのデータをユーザープロファイルに保存します。ランディングページフォームを送信しましたイベントは、ユーザーがすべてのステップを完了して確認ステップに到達するまでログに記録されません。

これはランディングページアンケートとは異なり、最終ステップに到達しなかったユーザーは部分的な送信として追跡されます。

制限事項と考慮事項

  • ランディングページは単一のフォーム行をサポートしているため、すべてのステップと確認ステップはその1つの行内に配置されます。
  • データ収集ステップは最大10個まで追加できます。確認ステップはその制限にカウントされません。
  • 各ステップには、クリック時に次のステップに進むように設定されたデフォルトボタンが含まれています。このアクションは現在のステップの入力を検証して保存します。最後のデータ収集ステップでは、ランディングページフォームを送信しましたイベントもログに記録し、確認に進みます。ステップが接続されていない場合は、ボタンが次のステップに進むようにクリック時の動作を追加してください。詳細については、エディターブロックのボタンを参照してください。
  • 確認ステップがフォーム行に組み込まれているため、確認画面として使用する2つ目のランディングページを作成したりリンクしたりする必要はありません。
  • レイアウトの下にフォーム行が表示されない場合は、Brazeアカウントマネージャーにお問い合わせください。
New Stuff!