FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<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; }
Preview
Live preview updates as you type
Building preview…
Show preview