入力フォームの見た目は、何も設定しなければ「デフォルトのレイアウト」が適用されます。
作成した入力フォームは上から順番に縦一列に表示されます。
この記事では、HTML レイアウトエディター（Excel） または Google ドキュメントを用いて、入力フォームのレイアウトを作成する方法をご紹介します。
これらを用いてレイアウトを作成・設定すると、入力位置を指定したり、入力フォームにデザインをつけることができます。
「モデルを修正する」で使用した休暇申請モデルにレイアウトを設定する方法をご紹介します。
情報：
レイアウトが予め設定された「テンプレート」をコピーしてモデルを作成する方法もあります。
→モデル一覧 テンプレートを使いモデルを作成する
Excel で HTML レイアウトを作成する
Excel でレイアウトの下書きを作成します。
「 ${休暇区分} 」など、特殊な符号を用いています。Gluegent Flow では、これを「プレースホルダー」と呼んでいます。
作成したレイアウト内にプレースホルダーを置くことで、入力欄の配置を定めています。
レイアウト上で「${入力フォーム名}」と書くと、タスク作成画面では、入力欄が表示されます。
↓
情報：
プレースホルダーには他の利用場面と様々な予約語があります。
→プレースホルダーの概要
Excel でのレイアウト作成後、レイアウトをモデルに設定しましょう。
休暇申請モデルの編集画面を開きます。
「入力フォーム」＞「フォーム全体の設定」をクリックし、フォーム全体の設定を開きます。
「HTMLレイアウトエディター」を選択し、「＋レイアウトを追加」をクリックします。
HTML レイアウトエディターが開きます。
Excel で作成したレイアウトをコピーし、HTML レイアウトエディターに貼り付けます。
余白の範囲を含めてレイアウトをコピーします。以下の画像では、A1 から D7 までの範囲を選択しています。
HTML レイアウトエディターにコピーしたレイアウトを貼り付けます。これで HTML レイアウトができました。
情報：
WIndowsの場合、HTMLレイアウトエディター内で Ctrl キーを押下しながら、V キーを押下することで貼り付けられます。
Macの場合は Command + V キーで貼り付けられます。
「OK」をクリックし、HTML レイアウトエディターを閉じます。
「プレビュー」を見ると、プレースホルダーが正しく反映されているか確認できます。
注意：
複雑なレイアウトを使用した場合、レイアウトが崩れる場合があります。
スマートフォンで申請・承認することが想定されるモデルではスマートフォンでの表示に適したレイアウトを作成してください。PC での表示に適したレイアウトの場合、スマートフォンでも PC と同様の表示となります。
Google ドキュメントでレイアウトを作成する
Google Workspace 版では、Google ドライブのドキュメントを使ってレイアウトを指定できます。
レイアウトに使うドキュメントを Google ドライブで作成します。
休暇申請モデルの編集画面を開きます。
「入力フォーム」＞「フォーム全体の設定」をクリックします。
「Google ドキュメント」を選択し虫めがねアイコンをクリックします。
先ほど作成したレイアウトドキュメントをクリックします。
「プレビュー」をクリックし、レイアウトが正しく反映されていれば完成です。
注意：
ドキュメントを変更してもモデルのレイアウトは変更されません。変更を反映するには、更新アイコンをクリックし、モデルを保存してください。
※本記事の画面キャプチャーおよび動画の内容は2023 年 6 月時点のものです。