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

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. 下枠線: ヘッダーセクション下部に表示される枠線をカスタマイズします。
   色: ヘッダーの下枠線の色を選択します。
   幅: ピクセルスライダーで下枠線の太さを調整します。
6. 影: ヘッダーコンテナに影を付けます。
   色: ヘッダー下に適用される影の色を設定します。
   広がり: スライダーをドラッグして、影の濃さを調整します。
   
   

バナー

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

1. Background Color: バナー領域に表示する背景色を選択します。
   
2. Background 画像: バナー領域に表示する画像をアップロードするか、既存の画像を置き換えます。デバイスから画像をアップロードするか、Pixabay から画像を追加できます。
   
3. Alignment: バナー画像の水平方向の配置（左揃え・中央揃え・右揃え）を選択します。
   
4. Fit: 画像をバナー領域内にどのように表示するかを指定します。利用可能な設定は、なし、Tile、Stretch です。
   
5. Opacity: バナー画像と背景の透明度を調整します。
   
6. Banner Width: スライダーをドラッグして、フォームコンテナに対するバナーセクションの幅を設定します。
   
   

Container & Footer

Container & Footer では、次の項目をカスタマイズできます。

1. Border Shape: コンテナの枠線の形状（四角形、やや角丸、ピル型）を選択します。
   
2. Border: コンテナの枠線の色を設定します。
   
3. Background: コンテナの背景色を選択します。
   
4. Shadow Color: コンテナの背後に適用される影の色を選択します。
   
5. Shadow Spread: スライダーを使用して、コンテナの影の広がり具合を調整します。
   

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

項目 & Input

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

項目

項目 セクションでは、項目ラベル、項目の説明、項目入力値の色をそれぞれ選択できます。

Input

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

Input 値、Border、Background で選択した色は、評価、Slider、選択式の項目、Hover Text 項目のプロパティを含むすべての項目に適用されます。

Picker

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

1. 名前 - 敬称
   
2. 住所 - 国
   
3. 電話番号 - 国コード
   
4. ドロップダウン
   
5. Multiple Choice
   
6. 時間 項目 
   
7. 日付 項目 picker
   
8. 日付-時間 項目 picker
   
9. Matrix Choice - ドロップダウン
   
10. 項目 Pane (to jump が次の間 the questions)
    
11. Zoho CRM 項目
    
12. Hover Text

Picker Background、Selection、Input 値には、互いに補完し合う色を使用することをお勧めします。

エラー メッセージ

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

名前や住所などの項目要素を含むフォーム項目がある場合は、Input Border と エラー メッセージ Background の色を同じにしないようにしてください。同じ色を使用すると、エラーがある項目要素の枠線と、他の項目要素の枠線との視覚的な区別がつかなくなります。

Buttons

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

Navigation Buttons

ナビゲーションボタンは、フォームページ上の 前へ ボタンと 次 ボタンです。

1. Navigation Buttons Style: ボタンの枠線の形状（なし、四角形、やや角丸、ピル型）を選択します。
2. 前へ Button: 前へボタンの背景色、テキスト色、枠線の色を設定します。
3. 次 Button: 次ボタンの背景色、テキスト色、枠線の色を設定します。

開始する Button & 送信する Button

1. 開始する & 送信する ボタンのスタイル: Welcome ページに表示される開始するボタンと送信するボタンの枠線の形状（なし、四角形、やや角丸、ピル型）を選択します。
   
2. 開始する Button: 開始するボタンの背景色、テキスト色、枠線の色を設定します。
   
3. 送信する Button: 送信するボタンの背景色、テキスト色、枠線の色を設定します。
   
   

保存 & 確認する Buttons

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

1. 保存 Background: 保存ボタンの背景色を選択します。
   
2. 保存 Icon: 保存ボタン内のアイコンの色を設定します。
   
3. 確認する Background: 確認するボタンの背景色を選択します。
   
4. 確認する Icon: 確認するボタン内のアイコンの色を設定します。
   

Progress 棒グラフ

詳細

はい/No

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

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