お問い合わせフォーム UIパターン集

ブラウザ操作エージェントのテスト用に設計された5つの異なるフォームパターン。 各パターンは異なる要素配置とインタラクションを特徴としています。

パターン1

シンプル縦型フォーム

基本的な縦型レイアウト。全ての入力フィールドが上から下へ順番に配置されています。

  • 従来型のデザイン
  • 明確なラベル配置
  • シンプルなバリデーション
表示する

パターン2

カード型モダンフォーム

カードUIを採用したモダンなデザイン。視覚的な階層構造が明確です。

  • モダンなカードUI
  • アイコン付きフィールド
  • リアルタイムバリデーション
表示する

パターン3

ステップ式フォーム

複数のステップに分割されたウィザード形式。段階的な情報入力が可能です。

  • 3ステップ構成
  • プログレスバー表示
  • 戻る/進むナビゲーション
表示する

パターン4

サイドバー付きフォーム

左側にナビゲーション、右側にフォームを配置した2カラムレイアウト。

  • セクション別ナビゲーション
  • 2カラムレイアウト
  • アンカーリンク対応
表示する

パターン5

フローティングラベル

入力時にラベルが浮き上がるマテリアルデザイン風のインタラクティブフォーム。

  • フローティングラベル
  • アニメーション効果
  • マテリアルデザイン
表示する

テスト情報

各フォームには以下の要素が含まれています:

  • 名前入力フィールド
  • メールアドレス
  • 電話番号
  • 問い合わせ種別選択
  • メッセージ入力欄
  • 送信ボタン

全てのフォームはクライアントサイドバリデーション機能を実装