フォームを11の型に分け、AIへの指示文・動く見本・コードを載せています。
フォームはどの型を選ぶか
フォームの型は、1つを選ぶというより、組み合わせて使います。まず土台を項目の数と相手の違いで決め（1ページ完結型・ステップ分割型・条件分岐型）、そこに入力を手助けする工夫と、送る前後の画面を足します。項目が10個くらいまでなら1ページ完結型から始め、エラーはその場で知らせ、送信のあとは完了の表示を出す、が手堅い組み合わせです。
| こんなとき | 向いている型 |
|---|---|
| 項目が10個くらいまでのお問い合わせ | 1ページ完結型 |
| メールアドレス・パスワード・郵便番号など、書き方に決まりがある | その場エラー表示型 |
| 住所を書いてもらう（通販・郵送・会員登録） | 住所自動入力型 |
| 申し込みや注文など、送ったあとで取り消しにくい | 確認画面型 |
| 送ったあと、連絡を待ってもらう | 送信完了型（どの型にも組み合わせる） |
| 送れたことを、チェックが描かれる動きで伝えたい | アニメーション集のチェックマークアニメーション（SVG・図形の動き） |
| 項目が多く、一度に見せると書く気がなくなりそう | ステップ分割型 |
| 個人と法人など、相手によって聞くことが変わる | 条件分岐型 |
| 長い文章を書いてもらい、途中で閉じられやすい | 途中保存型 |
| 書類や写真を送ってもらう | ファイル添付型 |
| 時間の枠で予約を受け付ける | 日時予約型 |
| 料金や納期など、同じ質問が何度も届く | FAQ併設型 |
送信が済んだときに紙吹雪を1回だけ舞わせる方法は、アニメーション集のインタラクションの動き（紙吹雪が舞う）にあります。
その場エラー表示型・住所自動入力型・送信完了型・途中保存型・FAQ併設型は、土台に足す型なので、1ページ完結型かステップ分割型を土台にして、その上に足して使います。
どの型でも守ること
- 項目名は label で入力欄の外に置く。
placeholderを項目名の代わりにすると、書き始めた途端に何の欄か見えなくなります。forとidで結ぶと、項目名を押しても欄に移れます。 - 必須か任意かは、言葉で書いて示す。* の印や色だけに頼ると、見落とす人がいます。任意の項目が多いなら、そもそも聞かなくてよいかを見直します。
- エラーは欄のすぐ下に、直し方まで書く。間違いのある欄を
aria-invalid="true"にし、aria-describedbyでエラー文の id を指しておけば、読み上げソフトでも内容が伝わります。 - 入力欄の font-size は 16px 以上、押せる部分は 44px 前後にする。それより小さい欄を iPhone で押すと、画面が勝手にズームします。
typeとautocompleteを付けると、合うキーボードと自動入力が使えます。 - 送信のあとは、押した場所の近くで結果を知らせる。送っている間はボタンを押せなくして二重送信を防ぎ、送れたら完了の文や画面に切り替えます。
よくある質問 (FAQ)
決まった数はなく、返事をするのに本当に要る項目だけに絞ります。ふつうの問い合わせでは、たいていお名前と連絡先、用件の3項目で間に合います。会社名や住所は、要るときにあとから聞けます。どうしても10個を超えるなら、ステップ分割型で段階に分けます。
送ったあとで取り消しにくい申し込みや注文なら、はさむと安心です。項目が少ないお問い合わせなら、確認画面をはさまず、その場でエラーを知らせて、送信後に完了の表示を出すだけで足ります。確認画面をはさむときは「まだ送信されていません」と書き、修正のために戻ったとき、入れた内容がそのまま残っているようにします。
入力欄を離れたときに調べ、送信を押したときにもう一度まとめて調べるのが基本です。1文字打つごとに調べると、書き終わる前にエラーが出てしまいます。一度エラーが出た欄だけは、入力のたびに調べ直して、直った時点でエラーを消します。
「必須」と文字で書くほうが確実です。* は意味を知らない人がいて、読み上げソフトでは「アスタリスク」と読まれます。* を使うなら、フォームの最初に「* は必須の項目です」と書き添えます。どちらの場合も、入力欄には
required を付けておきます。