お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. カードフォームを作成した後、[テーマ]タブに移動します。
   
2. [ゼロから作成] または [フォームをカスタマイズ] をクリックします。
   
   
   
3. [フォームのカスタマイズ]では、次の項目を設定できます。
   
1. レイアウト
2. ページ
   
3. ヘッダー
   
4. バナー
   
5. コンテナ & フッター
6. フィールド & 入力
   
7. ボタン
   
8. 保存 & レビューボタン
   
9. 進行状況バー
   
10. 詳細設定

レイアウト

1. カードフォームの[レイアウトタイプ]を選択できます。レイアウトタイプによって、フォーム上のバナー画像の配置が決まります。
   
1. バナーなし: バナー画像を表示しないレイアウトです。大きな画像を使わないシンプルなデザインにしたい場合に選択します。フォームフィールドは、左右どちらにもバナーを表示せずに配置されます。
   
2. 左バナー: このレイアウトでは、カードフォームの左側にバナー画像が表示されます。左側にロゴや印象的な画像を表示し、右側にフォームフィールドを配置したい場合に適しています。
   
3. 右バナー: 左バナーと同様ですが、画像がカードフォームの右側に配置されます。
   
   
   左右いずれかのバナーを使用する場合は、[バナー]で、背景色、背景画像、フィット、配置、不透明度、幅などをカスタマイズできます。
   
   
2. [コンテナスタイル]では、カードフォームの各ページにあるフィールドをコンテナ内に配置するかどうかを選択できます。
   
1. フィールドの周りにコンテナを表示すると、フォームの背景とフィールド部分を視覚的に分けられるため、カードフォーム全体がより整理され、構造化された印象になります。
   
2. 一方で、よりミニマルで一体感のあるデザインにしたい場合は、コンテナを使用しないことで、フォーム全体がシームレスに連続して見えるようにできます。
   
   
   
   コンテナを使用する場合は、[コンテナ & フッター]で、コンテナの枠線の形状、色、背景などをカスタマイズできます。
   
   
3. [ナビゲーション方向]では、フォーム内のカード間の移動を横方向（水平）にするか、縦方向（垂直）にするかを選択できます。
   
   
   
   
   
   
1. 水平ナビゲーション: 水平ナビゲーションでは、ユーザーはカードを左から右へ移動して進みます。
   メリット:
1. 項目の順序を明確に示せます。
   
2. 直線的な流れで進むコンテンツの表示に適しています。
   
3. 同程度の重要度を持つコンテンツの表示に向いています。
   
   
2. 垂直ナビゲーション: 垂直ナビゲーションでは、ユーザーはカードを上から下へ移動して進みます。
    メリット:
1. 長文や長さが異なるコンテンツに適しています。
   
2. 重要度の異なるコンテンツを組み合わせて表示する場合に有効です。
   ナビゲーション方向を垂直に設定した場合、ナビゲーションボタンの枠線の形状はカスタマイズできません。この場合、[ボタン]セクション内の[ナビゲーションボタンのスタイル]オプションは非表示になります。
   
   
4. [ナビゲーション方向]で「水平」を選択している場合、[ナビゲーションスタイル]で、ナビゲーションボタンをフィールドの直下に配置するか、各ページ下部のフッターに分けて配置するかを選択できます。
   
   
   
   
1. ナビゲーションボタンをフィールドと揃えて配置すると、各ページのフィールドのすぐ下にボタンが表示されます。ボタンが関連するフィールドの近くにあるため、レイアウトがコンパクトになり、ユーザーはフォームの下部までスクロールしなくても前後のページにスムーズに移動できます。
   
2. ナビゲーションボタンを各ページ下部のフッターに配置すると、フィールドとは分かれて表示されます。このレイアウトでは、フォームフィールドとナビゲーションボタンを視覚的に明確に分けることができます。
   

トランジション効果

ページ

1. フォーム全体で使用するフォントのスタイルを選択し、必要に応じて[フォントサイズ]を調整できます。選択したフォントサイズは、ウェルカムページのコンテンツを除くフォーム上のすべてのテキスト（ボタンのテキストを含む）に自動的に反映され、レスポンシブに表示されます。
2. [背景色]を選択するほか、デスクトップから画像をアップロードしたり、事前デザイン済みの背景から選択したり、Pixabay で画像を検索して、フォーム全ページ共通の背景として設定できます。
   
3. 背景の[不透明度]も調整できます。
   

フォーム内にサブフォームがある場合、フォームで選択した[背景色]が、デフォルトでサブフォームの背景にも適用されます。フォームの背景として画像を設定している場合は、フォームの背景画像の色合いになじむ背景色を選択すると、サブフォームの色もフォーム全体と自然に調和します。

ヘッダー

フォーム上部の[ヘッダー]セクションには、フォームタイトルと説明が含まれます。[ヘッダー]では、次の項目をカスタマイズできます。

1. 背景: 上部に表示されるフォームタイトルの背景色を選択します。
   
2. 不透明度: 背景の透明度を調整します。
   
3. タイトル: フォームタイトルの文字色を設定します。
   
4. 説明: 説明テキストの文字色を設定します。
   
5. ロゴ: ロゴはブランドや会社を表すシンボルです。端末からロゴをアップロードするか、Pixabay から選択できます。視覚障がいのあるユーザーにも配慮できるよう、画像に代替テキストを追加することもできます。 詳細はこちら
   画像サイズ: ロゴ画像のサイズを調整できます。スライダーを使って必要に応じてロゴをリサイズします。
   画像の配置: フォームヘッダー内でのロゴ、タイトル、説明の配置方法を設定します。用意されたスタイルから画像の配置を選択し、整理されたレイアウトを作成します。
6. 余白: ヘッダーセクション内側の水平方向および垂直方向の余白をカスタマイズします。
   内側の水平余白: ヘッダーコンテンツとフォームヘッダー左右端との間隔を調整します。
   内側の垂直余白: フォームヘッダーの上下方向の余白を調整します。
7. 下罫線: ヘッダーセクション下部に表示される罫線をカスタマイズします。
   色: ヘッダー下罫線の色を選択します。
   幅: ピクセルスライダーで下罫線の太さを調整します。
8. シャドウ: ヘッダーコンテナに影を付けます。
   色: ヘッダー下に適用される影の色を設定します。
   スプレッド: スライダーをドラッグして影の広がり具合（強さ）を調整します。
   
   

バナー

バナーは、製品を宣伝したり、回答者にブランドやサービスを紹介したりするための効果的な手段です。バナーでは、次の項目をカスタマイズできます。

1. 背景色: バナー領域に表示される背景色を選択します。
   
2. 背景画像: バナー領域に表示する画像をアップロードするか、既存の画像を差し替えます。端末から画像をアップロードするか、Pixabay から画像を追加できます。
   
3. 配置: バナー画像の水平方向の配置（左揃え、中央揃え、右揃え）を選択します。
   
4. フィット: 画像をバナー領域内にどのように表示するかを指定します。利用できるオプションは、なし、タイル、ストレッチです。
   
5. 不透明度: バナー画像および背景の透明度を調整します。
   
6. バナー幅: スライダーをドラッグして、フォームコンテナに対するバナーセクションの幅を設定します。
   
   

コンテナ & フッター

コンテナ & フッターでは、次の項目をカスタマイズできます。

1. 枠線の形状: コンテナの枠線の形状（角丸なし、やや角丸、ピル型）を選択します。
   
2. 枠線: コンテナの枠線の色を設定します。
   
3. 背景: コンテナの背景色を選択します。
   
4. シャドウの色: コンテナ背面に適用される影の色を選択します。
   
5. シャドウのスプレッド: スライダーを使って、コンテナの影の広がり具合を調整します。
   

1. 背景: フッターセクションの背景色を選択します。
   
   

項目 & 入力

こちらでは、フォーム項目とエラーメッセージのスタイルをカスタマイズできます。

項目

項目セクションでは、項目ラベル、項目の説明、項目の入力値に対して、それぞれ異なる色を設定できます。

入力

入力セクションでは、項目入力ボックスの枠線スタイル、枠線の色、入力ボックスの背景色を選択し、背景色の不透明度を調整できます。

入力値、枠線、背景に設定した色は、評価、スライダー、選択式項目、ホバーテキスト項目プロパティを含むすべての項目に適用されます。

ピッカー

ピッカー要素の背景色や、ピッカー要素内で選択された値の色もカスタマイズできます。

1. 氏名 - 敬称
   
2. 住所 - 国
   
3. 電話 - 国コード
   
4. ドロップダウン
   
5. 複数選択
   
6. 時刻項目 
   
7. 日付項目ピッカー
   
8. 日付時刻項目ピッカー
   
9. マトリックス選択 - ドロップダウン
   
10. 項目ペイン（質問間の移動）
    
11. Zoho CRM 項目
    
12. ホバーテキスト

ピッカー背景、選択、入力値には、互いに補色関係にある色を使用することをおすすめします。

エラーメッセージ

エラーメッセージセクションでは、エラーメッセージの背景色と、エラーメッセージテキストの色を選択できます。

氏名や住所などの複数の項目要素を含むフォーム項目がある場合は、入力枠線とエラーメッセージ背景の色を明確に区別してください。同じ色を使用すると、エラーがある項目要素の枠線と、他の項目要素の枠線との視覚的な違いがなくなってしまいます。

ボタン

ボタンでは、次の項目をカスタマイズできます。

ナビゲーションボタン

ナビゲーションボタンは、フォームページに表示される前へボタンと次へボタンです。

1. ナビゲーションボタンの形状: ボタン枠線の形状（なし、角丸なし、やや角丸、ピル型）を選択します。
   
2. ナビゲーションボタンのスタイル: 表示されているスタイルの中からボタンのスタイルを選択します。
3. 前へボタン: 前へボタンの背景色、文字色、枠線の色を設定します。
4. 次へボタン: 次へボタンの背景色、文字色、枠線の色を設定します。

開始ボタン & 送信ボタン

1. 開始 & 送信ボタンの形状: ウェルカムページに表示される開始ボタンと送信ボタンの枠線の形状（なし、角丸なし、やや角丸、ピル型）を選択します。
   
2. 開始ボタン: 開始ボタンの背景色、文字色、枠線の色を設定します。
   
3. 送信ボタン: 送信ボタンの背景色、文字色、枠線の色を設定します。
   
   

保存 & レビューボタン

回答の保存や、送信前の確認に使用されるボタンの見た目をカスタマイズできます。

1. 保存ボタンの背景: 保存ボタンの背景色を選択します。
   
2. 保存アイコン: 保存ボタン内のアイコンの色を設定します。
   
3. レビュー背景: レビューボタンの背景色を選択します。
   
4. レビューアイコン: レビューボタン内のアイコンの色を設定します。
   

進行状況バー

詳細

はい/いいえ

はい/いいえ項目では、次の内容をカスタマイズできます。

1. ラベル 1 の背景: ラベル 1 の背景色を設定します。これは 3 つのスタイルすべてに適用されます。
   
2. ラベル 1 のテキスト: デフォルトスタイル（トグル）ではラベル 1 の文字色、スタイル 2 と 3（いいね/よくないね & チェックマーク/バツ）ではアイコンの色を設定します。
   
3. ラベル 2 の背景: ラベル 2 の背景色を設定します。これは 3 つのスタイルすべてに適用されます。
   
4. ラベル 2 のテキスト: デフォルトスタイル（トグル）ではラベル 2 の文字色、スタイル 2 と 3（いいね/よくないね & チェックマーク/バツ）ではアイコンの色を設定します。
   
5. 枠線: はい/いいえ項目の枠線の色を設定します。すべてのスタイルに適用されます。