フォームのデザイン設定について
デザインタブ
デザインタブでは、作成するフォームの以下を変更できます。
- カラー
- フォント
- フォントサイズとフォントの太さ
- レイアウト
- ロゴ（BEGINNERプラン以上）
カラー
「デザイン設定＞カラー」では、以下の反映箇所の色を個別に色指定ができます。
- ページ背景
- タイトル
- 背景
- タイトルテキスト
- 項目
- 項目名テキスト
- 任意背景
- 必須背景
- 任意・必須テキスト
- 概要説明テキスト
- 外枠
- 背景
- 入力テキスト
- 補足説明テキスト
- ボタン
- 背景
- ボタン内テキスト
- その他
その他でカラー設定される範囲
その他で選択したカラーは、以下の8箇所に一括で反映されます。
入力画面
①「フォームの公開期間設定」の終了日の色
②「受付上限設定機能」のプログレスバーとカウント数の色
③「尺度ボタン」の選択時の色
④「規約に同意する」で「URLを記入する」を選択した場合のリンクテキストの色
⑤レイアウト「ステップ」利用時のプログレスバーと矢印ボタンの色
完了画面
⑥送信完了画面のチェックボタンの色
入力、確認、完了、非公開画面共通
⑦レイアウトを「トップ」にした時のヘッダー背景の色
⑧レイアウト「サイド」時の左側背景の色
カラーの指定方法
カラーの指定方法としては、以下の2つがあります。
- カラーコード記入欄に任意のカラーコードを記入する
- カラーピッカーにて選択する
カラーピッカー内部に、予め用意されたカラーや透過度も選択可能ですので、ご利用ください。
フォント
「デザイン設定 >フォント」では全10種類のWebフォントを選択できます。
Webフォントについては、formLabの記事をご確認ください。
フォントサイズとフォントの太さ
フォント設定では、以下の反映箇所のフォントサイズとフォントの太さを個別に指定できます。
- タイトル
- タイトルテキスト
- 項目
- 項目名テキスト
- 概要説明テキスト
- 補足説明テキスト
- 入力テキスト
- ボタン
- ボタン内テキスト
フォントサイズの指定方法
フォントサイズの指定方法としては、以下があります。
- スライダーを調整する
- 数字を記入する
フォントの太さの指定方法
太さ指定できるフォントスタイルと「普通」のみ太さ指定できるフォントスタイルがあります。
フォントの太さを指定できる（細字 / 普通 / 太字）
①：Noto Sans JP, Noto Serif JP, M PLUS 1p, M PLUS Rounded 1c
フォントの太さを指定できない（普通のみ）
②：ゴシック, 明朝, さわらび明朝, さわらびゴシック, 小杉, 小杉丸
なお、①のフォントスタイルにて「細字」や「太字」を指定した後に、②のフォントスタイルを指定した場合、フォントの太さは自動的に「普通」に変更されますのでご注意ください。
レイアウト
「デザイン＞レイアウト」では、5種類のレイアウトを選択できます。
レイアウトは以下から選択できます。
- カバーなし
- サイド
- トップ
- フルスクリーン
- ステップ
以前は一問解答するごとに画面をスクロールしていく回答形式でした。新しい「ステップ」では、一問ごとに次のページに進む形式になっています。
なお、 レイアウト「ステップ」の仕様上、EFO機能の「ページ分割」と合わせてのご利用はできません。
古いバージョンのデザインについて
- レイアウト「ステップ」は、デザインのアップデートにより古いデザインを新たに利用できなくなりました。
注意事項
- フォームの利用
- 古いバージョンのレイアウト「ステップ」（以降「旧ステップ」とする）は、2024年11月26日（火）をもって、提供を終了いたしました。
- 「旧ステップ」をご利用のフォームは2024年11月26 日以降、自動的に新しいデザインに切り替わっております。
- 主な変更点
- 一問解答するごとに画面をスクロールしていく回答形式から、一問ごとに次のページに進む形式になりました。
- プログレスバーのデザインが変わりました。
- 変更前
- 変更後
- カバータブで設定していた画像は、フォーム全体に背景として表示されていましたが、フォーム上部のみに固定表示に変わりました。
レイアウト変更方法
- デザインタブからレイアウトをクリックする
- レイアウトをクリックする
- 「編集内容を保存」をクリックしてフォームを保存する
ロゴ（BEGINNERプラン以上）
サービス / 企業ロゴ
フォームの最上部に会社名やブランドロゴなどの画像を追加することが可能です。画像は「四角」と「丸」から選択いただけます。
設定できる画像に関しましては、以下をご参照ください。
- サイズ上限：100MB
- ファイル形式：png / jpg / gif等
- 縦横のサイズが同じ画像、または横長の画像をご利用ください。縦長の画像をご利用の場合、枠からはみ出てしまう仕様となっていますので、ご了承くださいませ。
formrunのロゴ（送信ボタン下）
クリエイターフォームの場合、ページ最下部に「formrun」のロゴを表示させることができます。※FREEプランの場合、formrunのロゴを非表示にすることはできません。
