1. フォームの作成後、テーマタブに移動します。
   

2. 新規作成 / テーマをカスタマイズをクリックします。
   
   

1. 旧バージョンのテーマビルダーを利用している既存ユーザーの場合、新しいテーマビルダーに切り替えるオプションが表示されます。 最新バージョンに切り替えをクリックします。
   
   

2. 新しいテーマビルダーの概要が表示されたポップアップが開きます。 今すぐ切り替えをクリックします。
   

3. すると、 テーマ変換 - プレビュー ページが表示されます。このページでは、旧バージョンのテーマが新しいテーマにどのように変換されるかを確認できます。今すぐ切り替えをクリックして続行します。
   

4. 新しいテーマビルダーを使ってさらにテーマを変更するには、テーマをカスタマイズをクリックします。
   

   メモ:
   1. 新しいテーマビルダーに切り替える前に、現在のテーマを保存してください。これにより、後で旧テーマビルダーに戻す場合に再適用できます。
   2. 新しいテーマビルダーに切り替えた後に旧テーマビルダーへ戻すと、以前適用していたテーマではなく、自動的にClassicテーマがフォームに適用されます。

3. フォームのカスタマイズでは、次の項目をカスタマイズできます。
   
   
1. 全体のスタイル
2. ヘッダー
   
3. 項目
   
4. コンテナー
5. バナー
6. ページ
7. 特殊項目
   
8. ボタン

フォント

フォントセクションでは、オンラインフォームのタイポグラフィを調整し、全体の印象を整えることができます。

ここでは、次の 2 つの重要な要素をカスタマイズできます。

フォントファミリー: フォームで使用するフォントの種類を選択できます。ブランドイメージに合い、読みやすく視認性の高いフォントを選択してください。

フォントサイズ:フォーム内に表示されるテキストの大きさを設定できます。適切なフォントサイズを選ぶことで、さまざまな画面サイズやデバイスでの読みやすさを確保できます。

1. 画像サイズ: ロゴ画像のサイズを調整できます。スライダーを使用して、必要に応じてロゴの大きさを変更します。
2. 画像の配置: フォームヘッダー内でのロゴ、件名、説明の配置を制御します。用意されたスタイルに基づいて画像の配置を選択し、整理されたレイアウトを作成します。
   

Border

項目

「項目」セクションでは、フォーム内の各項目の見た目を個別に調整できます。

項目

1. ラベル: 項目ラベルの色を選択できます。
   
2. 説明文:項目に関連付けられている説明テキストの色を設定できます。
3. フォーカス: ユーザーが項目をクリックまたは移動したときに、その項目を強調表示する色を選択できます。 これにより、現在アクティブな項目が分かりやすくなり、ユーザー体験が向上します。
   
4. 必須アスタリスク:必須項目を示す記号 (*) の色を選択できます。
   

入力

1. 値:ユーザーが項目に入力するテキストの色を設定します。
2. 背景:項目の入力エリアの背景色を設定します。
3. 枠線: 項目の枠線の色をカスタマイズできます。
4. 枠線の形状:フォームに合う枠線のスタイルを選択できます。

1. 背景:複数選択項目、スライダー項目、ドロップダウン、日付ピッカー、ホバーテキストなどのピッカー項目の背景色を設定できます。
   

枠線と余白

1. 枠線の太さ:入力項目の枠線の太さを調整できます。
   
2. 横方向の余白:フォームコンテナの左右の枠線と項目との間隔を調整できます。
   
3. 縦方向の余白 - 項目間:項目同士の上下の間隔を調整できます。

エラーメッセージ

1. テキスト:エラーメッセージの文字色を選択できます。
   
2. アイコン:各項目内に表示されるアイコンの表示設定を行えます。表示するか非表示にするかを選択できます。
   

コンテナ

コンテナは、フォーム内のすべての項目とボタンを囲む領域です。次の設定でフォームコンテナをカスタマイズできます。

レイアウト

コンテナ幅

フォーム幅では、フォームコンテナ全体の幅を指定できます。フォーム幅は次のいずれかで設定できます。

1. カスタム:許可された範囲内で、コンテナの幅をピクセル値で指定できます。フォームサイズを細かく調整したい場合に便利です。
2. 画面幅に合わせる:ユーザーの画面幅に応じて、コンテナが自動的に拡大・調整されます。
   

配置

コンテナの表示位置を設定できます。左寄せ・右寄せ・中央揃えのいずれかを選択できます。

枠線

1. 枠線:フォームコンテナを囲む枠線の色を選択できます。
2. 枠線の太さ:フォームコンテナを囲む枠線の太さを調整できます。
   

角丸・余白・影

1. 角丸: 角丸スライダーを使って、フォームコンテナの角の丸みを調整できます。
   
2. 横方向の余白:フォームコンテナの左右の端とコンテナ内コンテンツとの距離を調整できます。
3. 縦方向の余白: フォームコンテナの上下の端とコンテナ内コンテンツとの距離を調整できます。
4. 影:フォームコンテナに影の効果を付けます。
   
5. 影の広がり:スライダーをドラッグして、影の濃さ・広がりを調整します。
   
6. フォームのレスポンシブ対応
   レスポンシブ表示:レスポンシブ表示を有効にすると、画面幅 480 ピクセル未満の端末を含む、さまざまな画面サイズのデバイスで最適な表示と操作性が保たれるよう、フォームレイアウトが自動調整されます。

バナー

バナーは、商品を宣伝したり、ブランドやサービスを回答者に紹介したりするための効果的な手段です。

画像

フォームコンテナ上部のスペースに、自社に合ったバナー画像を追加できます。端末から画像をアップロードするか、Pixabay から画像を追加することができます。また、視覚障がいのあるユーザーにも配慮できるよう、画像に代替テキストを追加することも可能です。詳細はこちら

スタイル

1. スタイル 1: バナーがフォームコンテナの上部に固定されます。
   
2. スタイル 2: バナーがフォームコンテナとは独立した位置に配置されます。

画像サイズ: バナー画像のサイズを調整できます。

画像の配置: バナー画像の配置位置を設定できます。左寄せ・中央揃え・右寄せから選択できます。

ページ

ナビゲーションバー

スタイル: フォームのデザインに合ったビジュアルスタイルを選択し、進捗状況を分かりやすく表示できます。

1. フォームコンテナ内: ナビゲーションバーがフォームコンテナ上部に表示されます。
   
2. フォームコンテナ外:ナビゲーションバーがフォームコンテナの外側に表示されます。
   

訪問済み/未訪問 - ナビゲーションバー

ページヘッダー

グリッド

1. スタイル 1: このスタイルでは、グリッドフィールドに枠線は表示されません。
   
2. スタイル 2:このスタイルでは、グリッド全体を囲む枠線が表示され、さらにグリッドヘッダーの下に区切り線が追加されます。このスタイルを選択すると、枠線の色とヘッダー下部のボーダー色をカスタマイズできます。
   
3. スタイル 3:このスタイルでは、枠線に加えて、グリッドのヘッダーとコンテナに背景色を設定できます。このスタイルを選択すると、枠線の色、ヘッダーの背景色、ヘッダー下部のボーダー色、コンテナの背景色をカスタマイズできます。
   

1. 背景:ヘッダーの背景色を設定できます。ヘッダーの背景として、単色またはグラデーションを選択できます。
   
2. 下ボーダー:グリッドヘッダーの下部ボーダーの色を設定できます。
   
3. 左右余白:グリッドヘッダーの左右端との間隔を調整できます。
   

1. 背景:グリッドコンテナの背景色を設定できます。コンテナの背景として、単色またはグラデーションを選択できます。
   
2. 左右余白:グリッドコンテナの左右端との間隔を調整できます。
   
3. 列間隔:列同士の間隔を調整できます。
   

1. [記号]を評価タイプとして選択した場合、選択した評価の形状（星、ハートなど）に応じて、記号の枠線色と、ユーザーが評価レベルを選択したときに塗りつぶされる色をカスタマイズでき、視覚的にわかりやすく表示できます。
2. [数値]を評価タイプとして選択した場合、未選択時の数値のテキスト・枠線・背景色、および選択時のテキスト・背景色をそれぞれカスタマイズできます。

区切り線