1. formrunFAQ
  2. 1.フォーム
  3. 3.フォーム編集画面の設定

カバータブ・デザインタブについて

カバー画像を選択できる「カバータブ」とレイアウト・フォント・ロゴを設定できる「デザインタブ」について説明します。

カバータブ・デザインタブ 

これら2つのタブでは、
作成するフォームのデザインを、写真、カラー、レイアウト及びフォントやロゴを
選択・変更することができます。 

カバータブでは

デザインタブでは

を変更することができます。

カバータブ

formrunのクリエイターフォームのフォーム編集画面では
カバー画像を設定して、目的に合わせたフォームのデザインにすることができます。

  • カバー>写真
    デフォルトで用意された画像を選択(201種類)
  • カバー>カスタム
    任意の画像をアップロード
    「配置」項目にて、画像の配置を「全画面・パターン・シングル」より選択いただけます。
    フォームへ、ロゴ画像などを表示させたい場合にご活用くださいませ。

カバー画像の配置

「全画面」配置

 

​​​​​​「パターン」配置


「シングル」配置

デザインタブ

デザインタブでは、フォームのデザインを設定することが可能です。

カラー

「デザイン設定>カラー」では、以下の反映箇所の色を個別に色指定ができます。

  • ページ背景
  • タイトル
    • 背景
    • タイトルテキスト
  • 項目
    • 項目名テキスト
    • 任意背景
    • 必須背景
    • 任意・必須テキスト
    • 概要説明テキスト
    • 外枠
    • 背景
    • 入力テキスト
    • 補足説明テキスト
  • ボタン
    • 背景
    • ボタン内テキスト
  • その他

その他でカラー設定される範囲

その他で選択したカラーは、以下の6箇所が一括で反映されます。

  1. 「受付上限設定機能」のプログレスバーとカウント数の色
  2. 「尺度ボタン」の選択時の色
  3. 「利用規約/プライバシーポリシー」へのリンクの色
  4. レイアウト「ステップ」を使用時の矢印ボタンの色
  5. 送信完了画面のチェックボタンの色
  6. レイアウト「トップ」時のヘッダー背景の色、レイアウト「サイド」時の左側背景の色

※こちらの画像は、レイアウト「トップ」と「サイド」でカバー画像が設定されていない時の色です

カラーの指定方法

カラーの指定方法としては、以下の2つがあります。

  • カラーコード記入欄に任意のカラーコードを記入する
  • カラーピッカーにて選択する

があります。

カラーピッカー内部に、予め用意されたカラーや透過度も選択可能ですので、ご利用ください。

 メインカラーとは、以下の反映箇所全ての色を設定できる機能となっております。

「カラー」が反映される箇所は、

  1. 送信ボタンの色
  2. 送信完了画面のチェックボタンの色
  3. 利用規約/プライバシーポリシーへのリンクの色
  4. フォームのカバー画像の色(「カバー>カスタムで画像を削除している場合)
  5. 「尺度ボタン」項目の色
  6. 受付上限設定機能におけるプログレスバーやカウント数の色
  7. レイアウト「ステップ」「フルスクリーン」の際の背景色(※選択した色から少し暗い色になります。)
  8. レイアウト「ステップ」の際の「↑」「↓」ボタンの色

となります。
※以下のキャプチャをご参照ください。 

カラーの指定方法

カラーの指定方法としては、

  • 予め用意されたカラーを選択する

  • カラーコード記入欄に任意のHTMLカラーコードを記入する

があります。

フォント

「デザイン設定 >フォント」では全10種類のWebフォントを選ぶことができます。

スクリーンショット 2022-10-18 18.17.52

Webフォントについては、formLabの記事をご確認ください。

formLab:【2018年12月、全10種類のWebフォントから、お好きなフォントを選べるようになりました!】

フォントサイズとフォントの太さ

スクリーンショット 2022-10-18 18.18.19

フォント設定では、以下の反映箇所のフォントサイズとフォントの太さを個別に指定できます。

  • タイトル
    • タイトルテキスト
  • 項目
    • 項目名テキスト
    • 概要説明テキスト
    • 補足説明テキスト
    • 入力テキスト
  • ボタン
    • ボタン内テキスト

フォントサイズの指定方法

スクリーンショット_2022-10-19_19_50_46

フォントサイズの指定方法としては、

  • スクロールバーを調整する
  • 数字を記入する

があります。

フォントの太さの指定方法

太さ指定できるフォントスタイルと「普通」のみ太さ指定できるフォントスタイルがあります。

無題

フォントの太さを指定できる(細字 / 普通 / 太字)

①:Noto Sans JP, Noto Serif JP, M PLUS 1p, M PLUS Rounded 1c

フォントの太さを指定できない(普通のみ)

②:ゴシック, 明朝, さわらび明朝, さわらびゴシック, 小杉, 小杉丸


なお、①のフォントスタイルにて「細字」や「太字」を指定した後に、②のフォントスタイルを指定した場合、フォントの太さは自動的に「普通」に変更されますのでご注意ください。

レイアウト

「デザイン設定>レイアウト」では、5種類のレイアウトを選択することができます。

スクリーンショット_2022-10-24_12_26_22-2

レイアウトは現在

から選択できます。

なお、 スタイルタブ「ステップ」の仕様上、
ブロック「ページ分割」と合わせてのご利用は未対応となっております。
ご留意くださいませ。

カバー画像の推奨サイズについて

レイアウトの設定毎に推奨サイズが異なりますので、
下記の図を参考に画像の作成をお願いいたします。

※図は下記のサンプル画像をアップした場合に表示されるエリアとなります。

※PC・スマホ両方で同じ画像が使用されるため、
 表示端末によっては意図しない表示がされる可能性がございます。

※セーフエリア = PC・スマホ両方で表示されるエリア。

サンプル画像
 

 

レイアウト> トップ


 

推奨サイズ:幅1280px×高さ545px以上

セーフエリア:幅1280px×高さ160px

 

レイアウト > サイド

推奨サイズ:幅640px×高さ860px以上

セーフエリア:幅640px×高さ550px

 

レイアウト > フルスクリーン

推奨サイズ:幅860px×高さ860px以上

セーフエリア:幅570px×高さ860px

ロゴ(BEGINNERプラン以上)

「デザイン設定>ロゴ」では、フォームの最上部に会社名やブランドロゴなどの画像を追加することが可能です。画像は「スクエア」と「サークル」から選択いただけます。

設定できる画像に関しましては、以下をご参照ください。

  • サイズ上限:100MB
  • ファイル形式:png / jpg / gif等
  • 縦横のサイズが同じ画像、または横長の画像をご利用ください。縦長の画像をご利用の場合、枠からはみ出てしまう仕様となっていますので、ご了承くださいませ。