Building a Complete Contact Form

~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Time to bring everything from this block together! In this chapter we'll build contact.html into a complete, well-structured form - with everything you've learned in the last five chapters.

New: fieldset and legend for grouping

In larger forms, it's helpful to visually and structurally group fields that belong together. That's what <fieldset> (wraps a group) and <legend> (the heading of that group, directly as the first child of <fieldset>) are for:

<fieldset>
  <legend>Your Contact Details</legend>
  <p>...</p>
  <p>...</p>
</fieldset>

Browsers display <fieldset> by default with a thin border, and <legend> as a heading embedded into that border - all without any CSS.

The complete form

Replace the entire content of contact.html with this complete version:

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact - Finn's Football Website</title>
</head>
<body>

  <h1>Contact</h1>
  <p>Have a question or want to connect? Feel free to write to me!</p>

  <form>
    <fieldset>
      <legend>Your Contact Details</legend>

      <p>
        <label for="first-name">Your first name:</label><br>
        <input type="text" name="first-name" id="first-name" placeholder="e.g. Finn" required>
      </p>

      <p>
        <label for="email">Your email:</label><br>
        <input type="email" name="email" id="email" placeholder="you@email.com" required>
      </p>
    </fieldset>

    <fieldset>
      <legend>Your Message</legend>

      <p>
        <label for="subject">Subject:</label><br>
        <select name="subject" id="subject">
          <option value="question">A question</option>
          <option value="praise">Praise</option>
          <option value="other">Other</option>
        </select>
      </p>

      <p>
        <label for="message">Message:</label><br>
        <textarea name="message" id="message" rows="5" cols="40" required></textarea>
      </p>

      <p>
        <input type="checkbox" name="newsletter" id="newsletter">
        <label for="newsletter">I'd like to receive the newsletter</label>
      </p>
    </fieldset>

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

  <p><a href="index.html">Back to the home page</a></p>

</body>
</html>

Checklist for good forms

Before we move on to the next block, here's a checklist you can run through for every future form:

Does every input field have a name attribute?
Does every input field have a unique id, with a matching <label for="...">?
Is the right type chosen (email for emails, tel for phone numbers, etc.)?
Are genuinely required fields marked with required?
Is there a button with type="submit" to submit it?

Tipp: Block complete! Forms are one of the more complex topics in HTML, but you've now learned all the important building blocks. The next block covers semantic HTML - how to structure a whole page meaningfully, not just individual form fields.

Vorheriges Kapitel Buttons and Submitting Forms Nächstes Kapitel Why <div> and <span> Alone Aren't Enough