Canvaのような完璧な見た目にフォームをカスタマイズする

プロジェクト用のフォームをデザインする際には、フォームがCanvaのビジュアルと一致していることを確認することが重要です。Jotformのフォームデザイナーを使用すると、ブランディングやデザインの好みに合わせてフォームの外観を簡単にカスタマイズできます。カラータブ、スタイルタブ、テーマタブ、レイアウトタブを使用して、フォームの色、レイアウト、タイポグラフィをパーソナライズし、デザインを洗練させることができます。

たとえば、Canvaデザインにフォームを追加したものの、全体的な外観にうまく馴染まない場合があります。

次の例と比較してみてください。フォームの背景が透明になっています。

フォームをCanvaデザインにスムーズに溶け込ませたい場合は、背景を透明にすることをお勧めします。その方法は次のとおりです:

1. フォームビルダーで、ページの右側にあるフォームデザイナー(ペイントローラーアイコン)をクリックします。
2. カラータブで、ページカラーを透明(×アイコンが付いた白いボックス)に設定します。
3. 次に、フォームカラーを透明(×アイコンが付いた白いボックス)に設定します。

以下は、フォームデザイナーの他の機能を使用してフォームをカスタマイズするためのその他のオプションです。

色とビジュアルの統一

カラータブでは、フォームの主要なビジュアル要素を制御し、Canvaデザインとの一貫性を確保できます。

• カラースキーム — Canvaデザインのパレットを反映したカラースキームを選択し、統一感のある外観を実現します。
• ページカラー — フォームとCanvaデザインのテーマを補完するページの背景色を設定します。
• ページ画像 — Canvaデザインのスタイルに合った控えめな背景画像やテクスチャをアップロードします。
• フォームカラー — フォームコンテナの背景色を調整し、ページカラーとの適切なコントラストを確保します。
• フォーム画像 — フォーム自体に背景画像を追加して、より豊かなビジュアル体験を提供します。
• フォントカラー — フォームの背景とのコントラストが良好で読みやすいフォントカラーを選択します。
• 入力背景 — 入力フィールドの色を調整して目立たせ、ユーザーが簡単に入力できるようにします。

レイアウトとタイポグラフィの微調整

スタイルタブでは、レイアウトとタイポグラフィを微調整し、フォームがCanvaデザインのクリーンで整理された外観と一致するようにできます。

• フォーム幅 — フォームの幅を全体的なデザインに合わせて調整します。ミニマルな外観には狭く、より広々とした雰囲気には広くします。
• ラベル配置 — Canvaデザインのレイアウトに合わせて、ラベルを左、右、または中央に配置します。
• 質問間隔 — フォームの質問間の間隔を調整して、雑然としたレイアウトを避けます。
• ラベル幅 — ラベルの幅をカスタマイズして、フォームの入力フィールドと適切に整列するようにします。
• フォント — Canvaデザインに合ったフォントを選択するか、カスタムフォントをアップロードしてブランドの一貫性を保ちます。
• フォントサイズ — Canvaデザインで使用されている比率に合わせてフォントサイズを調整し、バランスの取れた外観を実現します。
• ボタンスタイル — ボタン(送信ボタンなど)の外観をカスタマイズして、デザインのテーマを反映させます。
• カスタムCSSの挿入 — カスタムCSSを挿入して、Canvaのビジュアルに合った正確なスタイリングを実現します。

定義済みスタイルの適用

テーマタブでは、さまざまな定義済みフォームテーマが用意されており、Canvaのビジュアルに合ったスタイルを素早く適用できます。

• 注目、無料、使用済みテーマ、お気に入りテーマ、購入済みテーマなどのカテゴリー別にグループ化されたさまざまなフォームテーマを閲覧します。
• Canvaデザインのカラーパレット、レイアウト、スタイルによく似たテーマを選択します。
• テーマを適用したら、正確なニーズに合わせてさらにカスタマイズできます。

フォームレイアウトの選択

レイアウトタブでは、フォームの構造デザインを決定できます。クラシックで分かりやすいレイアウトを好むか、よりモダンでインタラクティブなレイアウトを好むかを選択できます。

• クラシックフォーム — このレイアウトは、すべての質問を従来の縦型形式で配置します。明確で構造化されたフォームを好むユーザーに最適です。
• カードフォーム — このレイアウトは一度に1つの質問を表示し、段階的なユーザー体験を提供します。ユーザーインタラクションとクリーンでモダンなデザインに焦点を当てたフォームに最適です。

より高度なカスタマイズについては、高度なデザイナーを探索して、さらに多くのデザインオプションを解放し、真にユニークなフォームを作成できます。詳細については、このガイドをご覧ください。