<html> HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Contact</title>
</head>
<body>
  <h1>Contact support</h1>

  <form action="#thanks" method="get">
    <!-- TODO: Add labeled fields for Name, Email, and Message. -->
    <!-- Must use HTML validation (do NOT add novalidate). -->
    <!-- Requirement: action must stay "#thanks" so valid submit reveals the success message. -->

    <!-- TODO: Add a submit button. -->
  </form>

  <section id="thanks" role="status" aria-live="polite">
    <h2>
      Message sent
    </h2>
    <p>
      Thanks! We received your message and will reply soon.
    </p>
  </section>
</body>
</html>
# CSS
body {
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:16px;
}
label {
  display:block;
  margin-top:12px;
}
input,textarea,button {
  font:inherit;
}
textarea {
  min-height:90px;
}
/* CSS-only success message */
#thanks {
  display:none;
  margin-top:16px;
  padding:12px;
  border:1px solid #ccc;
  border-radius:8px;
}
#thanks:target {
  display:block;
}
Live preview updates as you type
Building preview…