Project

Course 2 · Ch 12 · Final Chapter · Project

Practical Project — A Real Contact Form

Combining everything from this Intermediate course into one genuinely production-ready contact page

This final chapter builds a single, complete contact form page — deliberately combining validation, accessibility, structured data, and meta tags from across this entire course into one realistic artefact, rather than introducing anything new.

The Complete Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> // Ch5
  <title>Contact Us — osztromok.com</title>
  <meta name="description" content="Get in touch — questions, feedback, or just to say hello."> // Ch5
</head>
<body>

  <main>
    <h1>Contact Us</h1>

    <form action="/submit-contact" method="post" id="contactForm">

      <fieldset> // Ch1
        <legend>Your Details</legend>

        <label for="name">Name</label>
        <input type="text" id="name" name="name" required minlength="2"> // Ch1

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

      <label for="message">Message</label>
      <textarea id="message" name="message" required minlength="10" rows="5"></textarea>

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

    <details> // Ch8
      <summary>How long until I get a reply?</summary>
      <p>Usually within 2 business days.</p>
    </details>
  </main>

  <script type="application/ld+json"> // Ch9
  {
    "@context": "https://schema.org",
    "@type": "ContactPage",
    "name": "Contact Us"
  }
  </script>

  <script>
    // Ch10 — custom cross-field-style validation example: confirm before sending
    document.getElementById('contactForm').addEventListener('submit', (e) => {
      // FormData available here if a fetch-based submission were used instead
      // of the plain action/method POST shown above
    });
  </script>

</body>
</html>

What Each Decision Connects Back To

viewport + unique title/description — Chapter 5, makes the page genuinely mobile-responsive and gives it a real search engine presence.
fieldset/legend around the personal details — Chapter 1, groups related fields with a real accessibility benefit.
required + minlength on every field — Chapter 1's built-in validation, with the understanding that server-side validation still happens on the receiving end regardless.
details/summary FAQ snippet — Chapter 8, a JavaScript-free collapsible answer to a common question.
JSON-LD ContactPage markup — Chapter 9, gives search engines explicit context about this page's purpose.
The submit listener stub — Chapter 10, the hook point where FormData and custom validation logic would actually live for a fetch-based, no-reload submission.

Final Project Checklist

✅

Every input has a matching label, correctly associated

Fundamentals Ch7

✅

Required fields use built-in validation attributes, not JS alone

Chapter 1

✅

The form uses POST, never GET, since it submits personal data

Fundamentals Ch7

✅

Meta description and title are unique to this specific page

Chapter 5

✅

Server-side validation is assumed for every submitted value, regardless of client-side checks

Chapter 1 / Chapter 10

A "complete" form is never purely a client-side artefact

Everything in this chapter's markup is the client-side half of a real contact form — the action="/submit-contact" endpoint still needs server-side code to actually receive, validate again, and act on the submission (sending an email, storing it in a database). This chapter intentionally stops at the HTML boundary, which is exactly the scope of this course.

Chapter 12 Quick Reference — and Course 2 Wrap-Up

A real contact form combines: viewport/meta tags (Ch5), fieldset/legend (Ch1), built-in validation (Ch1), details/summary (Ch8), structured data (Ch9), and a JS submit hook (Ch10)
Always POST, never GET, for forms submitting personal data
Client-side markup is only half the picture — a real server-side handler is still required
Course 2 recap: forms in depth (Ch1) → tables in depth (Ch2) → multimedia (Ch3) → iframes (Ch4) → meta tags (Ch5) → accessibility (Ch6) → data attributes (Ch7) → HTML APIs (Ch8) → structured data (Ch9) → forms+JS (Ch10) → web components intro (Ch11) → real project (Ch12)
Next: Course 3 — HTML Advanced (Web Components in depth, Canvas, SVG, drag-and-drop, File API, PWAs, and more)