Phase: BuildingAction Day45 minutes

Day 19: Forms and Interaction

Forms collect user input. State tracks what they've typed. When someone fills out your contact form, you'll be able to see what they entered and do something with it.

Today's Tasks

  1. 1Create a Contact page with a form
  2. 2Include: Name, Email, Message fields
  3. 3Add a submit button
  4. 4For now, just log the data to console

Prompt to Use

Create a Contact page at /contact with a form. Include fields for Name, Email, and Message. When submitted, log the data to the console (we'll save it properly later). Add validation so fields can't be empty. Style it nicely with Tailwind.

Expected Outcome

A working contact form that captures input.

New Terms

FormStateuseStateValidationConsole

Pro Tip

Always validate on the frontend (for user experience) AND the backend (for security). We'll add backend validation later.

Coming Tomorrow

We'll learn about environment variables - keeping secrets safe.