お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の
英語版を参照してください。
カードフォームのインタラクティブなインターフェイスを、カードフォーム専用のテーマビルダーでより視覚的に魅力的にしましょう。フォームをカスタマイズして、カスタム背景、フォント、効果などを試してみたり、テーマギャラリーで用意されているプリデザインテーマを選択することができます。
カードフォームの外観をお好みにカスタマイズするには、
- Cardフォームを構築した後、テーマタブに移動します。
- スクラッチから作成/フォームをカスタマイズをクリックします。
![Create from Scratch](https://help.zoho.com/galleryDocuments/edbsn96fefac9f09cef15c1487f1928ed2c604a8ffdd6425b8fa19ca527b310d73f3b063309d7cf4166f906444ef49ebac5e1?inline=true)
- フォームのカスタマイズの下で、次のことをカスタマイズできます。
- レイアウト
- ページ
- ヘッダー
- フィールドと入力
- ボタンと進捗バー
レイアウト
Zoho Formsは、カードフォームのデザインに最適なレイアウトを選択し、ブランディングや視覚的な好みに沿って調整する柔軟性を提供します。
「レイアウト」の下に、
- カード形式のレイアウトタイプを選択することができます。 これらのレイアウトタイプは、フォーム上のバナー画像の配置を決定します。
- バナーなし:このレイアウトタイプにはバナー画像が含まれません。明確な画像なしでシンプルなデザインを希望する場合は、このオプションを選択できます。フォームフィールドは、両側にバナーなしで表示されます。
- 左バナー:このレイアウトタイプでは、バナー画像がカードフォームの左側に表示されます。プロンプトな画像やロゴを左側に表示しながら、フォームフィールドを右側に配置する視覚的に魅力的なオプションを選択できます。
- 右バナー:このレイアウトタイプは、左バナーと似ていますが、画像がカードフォームの右側に配置されます。
![Layout Type](https://help.zoho.com/galleryDocuments/edbsn97dcb85a614d02e41c942d35df464f9c3826c5ab294586be77fcf7b8cb6607028d46a60c3d5c8ade7e391f912ace5aac?inline=true)
バナー画像を使用する場合は、背景色、配置、不透明度などをバナーでカスタマイズできます。
![Customize Banner image](https://help.zoho.com/galleryDocuments/edbsn794f493f7d6b68ee11d4f17ef37332f80e5c7656ade06a381ba2853b88ad73d7f8fc8fea14b65fe03e265a530efc48de?inline=true)
- 「コンテナスタイル」の下で、カードフォームの各ページにフィールドを配置するかどうかを選択できます。
- フィールドの周りにコンテナを設けることで、カード形式のフォームの背景とフィールドとの間に明確な視覚的な分離を行い、フォームをより構造化された整然とした見た目にすることができます。
- しかし、カード形式のフォームをより統一感のある流れるようなデザインにしたい場合は、コンテナを取り除くことができます。
![Container Style](https://help.zoho.com/galleryDocuments/edbsnb1996108cb81b2a9b3f145b1f950c53d1f287887bf6e18c92afd953d8b7ffd8d6c7ebd7dd0af19da0060d89fd1a0b9dc?inline=true)
コンテナを設ける場合は、コンテナのボーダーの形状、色、背景などをContainer & Footerでカスタマイズすることができます。
![Container customization](https://help.zoho.com/galleryDocuments/edbsn34648459bb2ec8908d0c03ea2302a842da2bda0825f6160bb59b8961e0f112b4af168b304a3248d3a7ee7d0e1f27dcb4?inline=true)
- 「ナビゲーションスタイル」の下で、ナビゲーションボタンをフィールドの下に揃えるか、各ページの最下部に別々に配置するかを選択できます。
![Navigation Style](https://help.zoho.com/galleryDocuments/edbsnc737eb550e726c76dd41c11966766bd2922c852cdc03758148bd97c073955ef562234e47834433b12ed94266334aafb6?inline=true)
- カードフォームの各ページにナビゲーションボタンをフィールドと一緒に配置する場合、それらはフィールドの直下に表示されます。このオプションは、ナビゲーションボタンを関連するフィールドに近接して保持するため、よりコンパクトなレイアウトを提供します。ユーザーエクスペリエンスをシームレスにすることができます。なぜなら、次のページや前のページに移動するために、フォームの最下部までスクロールする必要がなくなるからです。
- カードフォームの各ページの最下部にナビゲーションボタンを配置する場合、それらはフィールドと分離されます。このレイアウトは、フォームフィールドとナビゲーションボタンの間に明確な視覚的な分離を提供することができます。
トランジション効果
カードフォームにおけるトランジション効果は、ページを移動する際にスムーズで魅力的なアニメーションを伴ってユーザーインターフェイスにインタラクティビティと視覚的な魅力を加えることができます。
カードフォームに適用できるトランジション効果は次のとおりです:
フェードアウト:フェードアウト効果を使用して、カード形式の次のページまたは前のページが表示される前に、ページを徐々に消えていくようにします。
回転: この効果は、カードフォームページ間をナビゲートする際に特定の軸を中心に回転します。
プッシュバック: この効果は、フォームの次または前のカードが表示される前に、カードがプッシュバックされたかのような幻想を作り出すアニメーションを作成します。
フリップ: カードは、次/前のページが反対側にあることを示すために、垂直軸を中心に回転することができます。
ページ
ページの下に
- フォームのフォントのスタイルを選択し、必要に応じてフォントサイズを調整できます。フォントサイズの選択は、(Welcome Pageのコンテンツを除く)フォーム上のすべてのテキストに対してダイナミックに調整されます、つまり、フォームがレスポンシブになります。
- 背景色を選択したり、デスクトップから画像をアップロードしたり、プリデザインの背景から選択したり、Pixabayから画像を検索してフォームのすべてのページの背景として使用できます。
- 背景の不透明度も調整できます。
フォーム内にサブフォームがある場合、フォームの背景色がサブフォームの背景色にデフォルトで適用されます。フォームの背景に画像を設定している場合、サブフォームの色がフォームの背景画像の色と調和するように背景色を選択することをお勧めします。
ヘッダー
ヘッダーの下に
- フォームタイトルの背景色を選択し、この背景の透明度を調整できます。
- フォームタイトルと説明のフォントの色も選択できます。
フィールドと入力
ここでは、フォームフィールドのスタイルとエラーメッセージをカスタマイズできます。
フィールド
フィールドセクションの下で、フィールドのラベル、フィールドの説明、フィールドの入力値に異なる色を選択することができます。
入力
入力項目の下で、フィールド入力ボックスの枠スタイル、枠の色、入力ボックスの背景色、および背景色の不透明度を選択することができます。
選択された色(入力値、境界、 および背景)は、評価、スライダー、および選択基準フィールドを含むすべてのフィールドに適用されます。
ピッカー
ピッカー要素の背景色や選択した値の色をカスタマイズすることもできます。
ピッカー要素には次が含まれます:
- 名前 - 挨拶
- 住所 - 国
- 電話 - 国コード
- ドロップダウン
- 複数選択
- 時間フィールド
- 日付フィールドピッカー
- 日付時間フィールドピッカー
- マトリックス選択 - ドロップダウン
- フィールドペイン(質問間をジャンプする)
- Zoho CRMフィールド
ピッカーの背景、選択、入力値に補完する色を使用することをお勧めします。
エラーメッセージ
エラーメッセージのセクションで、エラーメッセージの背景色とエラーメッセージテキストの色を選択できます。
名前などのフィールド要素を持つフォームフィールドがある場合は、入力ボーダーとエラーメッセージの背景色が明確に異なるようにしてください。エラーのあるフィールド要素の境界と他のフィールド要素の境界が視覚的に区別できないためです。
ここでは、ナビゲーションボタン、アクションボタン、ウェルカムページボタン、プログレスバーの色をカスタマイズすることができます。
ナビゲーション
ナビゲーションボタンとは、フォームページ上の「前へ」と「次へ」ボタンのことです。「前へ」と「次へ」のナビゲーションボタンのラベルの色をそれぞれ別々にカスタマイズすることができます。
行動
アクションボタンには提出、保存、レビューボタンが含まれます。これらのボタンの背景、テキスト、アイコンの色をカスタマイズできます。
ようこそページ
ホームページには、クリックするとフォームの最初の質問に進む開始ボタンが含まれています。このボタンの背景色とテキスト色をカスタマイズすることができます。
進捗バー
プログレスバーは、回答者がフォームに記入している質問の進捗を表示します。完了した質問と未完了の質問のプログレスバーの色をカスタマイズすることができます。