- コーポレートサイトのお問い合わせフォーム
https://contact-form-inky.vercel.app/
- 入力画面
| 入力前 | 入力後 |
|---|---|
 |
 |
-
確認画面
-
完了画面
- 完了画面のブラウザのデバッグコンソールで送信データが確認できます。
- 実際に送信は行われておりません。
- フロントエンドの技術選定として、採用される事が多い
Next.jsとTailwind CSSを使って実装しました。 - バリデーションにはReact-hook-formを使用しました。
- 郵便番号を入力した際に、住所以降が自動入力される様になります。
- 幾つかライブラリを検討した結果、シンプルでカスタムフックとして使いやすいuse-postal-jpを使っています。
- React-hook-form との兼ね合いで、自動入力しても値が set されていないという問題があり、実装に悩みましたが、useEffect を使って郵便番号から住所が取得出来たタイミングでsetValueする事で解決しました。