ページ分割 (マルチステップ)

長いフォームを複数のページ (ステップ) に分け、「次へ」「戻る」で移動しながら入力してもらえます。進捗表示も付けられます。

入力途中のデータはブラウザの中で保持されるため、ページを移動してもサーバーとの通信は発生しません。送信・入力チェック・保存・メールの動きは、1 ページのフォームと変わりません。

ページを分ける

ページ区切りを 1 つ置くと 2 ページ、2 つ置くと 3 ページになります。フォームの先頭や末尾、区切りが連続している場所にできる 空のページは自動的に詰められます。

「フォーム設定」→「設定」 タブの 「ページ分割」 で、フォーム全体の見え方を設定します。

項目	内容
進捗表示	ステップ (番号とページタイトル) / プログレスバー / なしから選びます
1 ページ目のタイトル	1 ページ目には区切りが無いため、ここでタイトルを指定します。空欄なら番号だけが表示されます
確認ステップのタイトル	入力すると、進捗表示の最後に確認画面のステップが追加されます。空欄なら追加されません
「次へ」ボタンのテキスト	空欄なら「次へ」
「戻る」ボタンのテキスト	空欄なら「戻る」

ページ区切りを 1 つも置いていないフォームでは、このカードに「まだページ区切りがありません」という案内が表示され、設定は反映されません。

「入力 → 確認 → 完了」の段階表示

確認ステップのタイトル に「確認」などと入力すると、進捗表示が「1. お客様情報 → 2. ご依頼内容 → 3. 確認」のようになり、確認画面の上にも同じ進捗表示が出ます。フォームの確認画面が無効の場合、この設定は無視されます。

操作	動き
「次へ」	そのページの項目だけをその場でチェックします。エラーがあればページに留まり、最初のエラーまでスクロールします
「戻る」	入力チェックは行いません
確認画面へ進む / 送信	従来どおり、すべてのページの項目をサーバー側でチェックします

サーバー側のチェックで 別のページの項目にエラーがあった場合、エラーのある最初のページへ自動的に移動 します。独自の検証ルールを PHP で追加している場合も、そのエラーは正しいページに表示されます。

入力欄で Enter キーを押したとき

最終ページ以外で Enter キーを押しても、フォームは送信されません。「次へ」を押したときと同じ動きになります。

組み合わせ	動き
条件分岐	条件で隠れている項目は「次へ」のチェック対象になりません。ページごとスキップすることはできません
フィールドグループ / リピーター	ページの中に置けます。行の中のエラーも、そのページに正しく表示されます
受付制御	組み合わせて使えます。受付を締め切っている間はフォーム自体が表示されません
ファイルアップロード	ファイルは送信時にまとめてアップロードされます。前のページに戻っても選択は解除されません
スパム対策 (reCAPTCHA など)	最終ページに表示されます

入力画面 HTML テンプレート でレイアウトを自作している場合、次の点に注意してください。

区切りは [fplant_field name="page_break_1"] と書いた位置に出ます。すべての区切りを同じ親要素の直下 に置いてください
表の行の間に区切りは置けません。 表を使う場合は 1 ページにつき 1 つの表 にしてください
送信ボタンを、ページ内の項目と同じ要素の中に入れないでください。 入れるとその要素ごと最終ページ扱いになります
進捗表示を出したい位置に <div class="fplant-pro-progress"></div> を書いておくと、そこに表示されます。書かない場合は 1 ページ目の先頭に自動で挿入されます

iframe 埋め込み ではそのまま動作します。ページによって高さが変わる場合、iframe の中でスクロールします。

JavaScript 埋め込み (外部サイト向けスニペット) では動作しません。