Contact Form with Proper Labels

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

The success message should only appear after a valid submit, so native validation must be enabled and the form action should target the success section. Consider edge cases like invalid email and required fields; test accessibility by associating labels and using native validation.

Solution

Overview

Native HTML validation is enough here: required fields and input types block invalid submissions, and the CSS :target pattern reveals the success state. This keeps the solution accessible and JS-free.

Approach 1 – Valid submit reveals success via :target

Ensure each input has a label and a unique id, add required to mandatory fields, and use type=email for the email field. Keep the form action pointing to #thanks so the success message becomes visible only after validation passes.

<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">
        <label for="c-name">
          Name
        </label>
        <input id="c-name" name="name" type="text" autocomplete="name" required />
        <label for="c-email">
          Email
        </label>
        <input id="c-email" name="email" type="email" autocomplete="email" required />
        <label for="c-message">
          Message
        </label>
        <textarea id="c-message" name="message" required>

</textarea>
        <button type="submit">
          Send
        </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;
}
#thanks {
  display:none;
  margin-top:16px;
  padding:12px;
  border:1px solid #ccc;
  border-radius:8px;
}
#thanks:target {
  display:block;
}

Notes & Pitfalls

Pitfalls

Using novalidate disables browser validation, so invalid submits would still reach #thanks.
This pattern signals 'valid submit attempt', not server-confirmed delivery.
Using method="get" means form values may appear in the URL query string.

Techniques

Rely on required + type="email" so invalid submits are blocked.
Use action="#thanks" + :target for a no-JS success message.
Optionally add minlength on the message to reduce accidental empty-ish submits.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep