概要 #
フォームインプットは、名前・メールアドレス・電話番号などの1行入力に適したテキスト入力フィールドです。
設問に対する短文の回答をユーザーから収集する際に使用します。
表示デザインやカラー、サイズなどを細かく調整でき、プレースホルダーやアイコン付きスタイルなどのテンプレートも選択可能です。
また、他の設問形式(ラジオボタン・テキストエリアなど)と組み合わせて活用することで、視認性と操作性に優れたフォームを構築できます。
※デザインやカラーは、全体設定のフォームカラーに連動させることもできます。
フォームインプットの設定項目について #
テキスト入力フィールドの見た目をカスタマイズするための設定です。デザインの統一や視認性の向上に役立ちます。
- デザイン(図中①)
テキスト入力欄の外観スタイルを選択します。
あらかじめ用意された複数のスタイルから選べるため、ページ全体のデザインに合わせた調整が簡単に行えます。 - カラー選択(図中②)
入力欄のボーダーやアクティブ状態などに使われるアクセントカラーを変更できます。
「フォームカラーを使用」をオンにすると、フォームスタイルで指定された共通カラーが反映されます。 - サイズ(図中③)
入力欄の幅を%単位で調整できます。
表示環境(PC・スマートフォン)に応じて、最適なサイズを指定することで使いやすさを高めることができます。
テキスト入力のデザイン選択画面の説明 #
この画面では、テキスト入力オブジェクトの見た目(デザイン)を選択することができます。
入力欄のスタイルは複数用意されており、目的やページの雰囲気に合わせて最適なデザインを選べます。
- 01. デフォルト:枠線付きのシンプルなプレースホルダー表示。
- 02〜03. ベーシック:基本的なボーダースタイル。03はプレースホルダーが太字。
- 04. ラベル:プレースホルダーと上部ラベル表示が組み合わさったタイプ。
- 05〜06. アイコン付き:入力欄内にアイコンが表示され、視覚的に用途がわかりやすいデザイン。
- 07〜08. フローティング:入力時にラベルが上に移動するタイプ。ユーザビリティ重視のスタイル。
- 09. 角丸:角が丸く柔らかい印象のデザイン。やさしい印象を与えるUI向き。
左のカテゴリ「テキスト入力」では、対象オブジェクトのみのスタイルが絞り込まれて表示されます。
スタイル選択後は、右側の設定エリアでカラーやサイズなどの微調整も可能です。