こちらのページでは、申請フォームの入力項目を横に並べて配置するための「レイアウト」パーツ(2列、3列、4列)の具体的な設定方法を解説します。
複数の項目を横並びにすることで、フォーム全体の縦の長さを抑え、申請者にとって見やすいレイアウトを作成できます。
目次
レイアウトパーツとは
「レイアウト」パーツは、他の入力パーツを中に入れるための「箱」のようなものです。この箱を先に配置することで、後から追加する項目を横に並べて表示させることができます。
設定手順
1. レイアウトパーツを配置する
フォーム作成画面の左側にある「入力パーツエリア」から、【レイアウト】カテゴリの中の「2列」「3列」「4列」のいずれかを選択し、中央のキャンバスエリアへドラッグ&ドロップします。
配置したい場所が緑色にハイライトされたら、ドロップして配置します。
2. 列の中に他の入力パーツを配置する
次に、先ほど配置したレイアウトパーツのそれぞれの列の中に、テキストボックスなどの他の入力パーツをドラッグ&ドロップしていきます。
同じように、残りの列にもパーツを配置することで、項目が横並びになります。
注意:「調査」「位置情報」「カメラ」「署名」のパーツは、2列以上のレイアウトの中に追加することはできません。
3. レイアウトパーツの下に項目を追加する
横並びにしたレイアウトパーツの下に、通常の1列の項目を追加したい場合は、レイアウトパーツ全体の下が緑色にハイライトされる位置まで、新しいパーツをドラッグ&ドロップしてください。
注意:2列以上のレイアウトを使用すると、1列あたりの横幅が短くなるため、入力パーツによっては文字が見切れるなど、意図しない表示になる可能性があります。必ずプレビュー機能で実際の表示を確認してください。
現在確認されているエラー(修正中)
以下の操作を行うとエラーが発生する場合があります。現在システムの修正を進めておりますが、ご不便をおかけします。設定の際はご注意ください。
1つの列に複数のパーツを配置することによるエラー
例えば「3列×2行」のような格子状のレイアウトを作成したい場合、UI上は1つの「3列」パーツの各列に、複数の入力パーツを縦に並べて配置できそうに見えますが、この操作を行うとエラーが発生します。
▼ エラーが発生する操作例
このように複雑なレイアウトを作成したい場合は、行の数だけレイアウトパーツを配置する必要があります。
▼ 正しい操作例(3列×2行の場合)
まず1行目として「3列」のレイアウトパーツを配置し、各列にパーツを一つずつ設定します。その後、2行目としてもう一つ新しい「3列」のレイアウトパーツを、1行目の下に追加してください。
関連記事
以上でございます。
最後までお読み頂きありがとうございます。
関連キーワード👀
レイアウト, 2列, 3列, 横並び, フォームデザイン
設定に関するご質問等は、support@smartflowhelp.zendesk.com までよろしくお願いいたします。