HTML Practice: Build a Contact Form

Build a contact form for a small business. Do it from scratch, and only open the solution when you are done or stuck.

Challenge: the contact form

Your form must have all of the following:

A form that uses method="post" and an action of /contact.
A required name field and a required email field, each with a label.
A select called “Topic” with three choices.
A group of radio buttons, inside a fieldset with a legend, asking how the visitor wants to be contacted (email or phone).
A textarea for the message, with a label and a maxlength.
A checkbox that says they agree to be contacted.
A submit button that says what it does.

Show a possible solution

index.html

HTML

<form action="/contact" method="post">
  <p>
    <label for="name">Name</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email</label><br>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="topic">Topic</label><br>
    <select id="topic" name="topic">
      <option>Order question</option>
      <option>Book request</option>
      <option>Something else</option>
    </select>
  </p>
  <fieldset>
    <legend>How should we reply?</legend>
    <label><input type="radio" name="reply" value="email" checked> Email</label>
    <label><input type="radio" name="reply" value="phone"> Phone</label>
  </fieldset>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="5" maxlength="600"></textarea>
  </p>
  <p>
    <label><input type="checkbox" name="consent" required> You may contact me about this message</label>
  </p>
  <button type="submit">Send message</button>
</form>

Check your form: can you reach everything with the Tab key? Does clicking a label focus its field? Does the browser stop you from sending it empty?