Project 2: Build an Accessible Contact Form

Build a contact form for a small software studio. It should collect a name, email address, reason for contacting the team, and a message. Add an optional checkbox for receiving product updates.

Use a form with an explicit action and method. Associate every field with a label. Use an email input for the email address, a select for the reason, and a textarea for the message. Add required only to fields the studio genuinely needs.

<form action="/contact/" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email"
         autocomplete="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" required></textarea>

  <button type="submit">Send message</button>
</form>

This is a front-end exercise. The action URL must be backed by a server endpoint before it can send a message. Do not place secrets or private credentials in the HTML.

Submit the form empty, enter an invalid email, and then enter valid sample values. Navigate entirely with the keyboard. Confirm the server-side implementation will validate the same important rules before accepting data.