Free Contact Form Template (HTML, CSS & JS, 2026)
An accessible contact form template in HTML, CSS and JavaScript — name, email and message fields with inline validation and a success message — responsive and ready to connect to your backend.
This free contact form template is an accessible, responsive form in HTML, CSS and a little JavaScript: name, email and message fields with real labels, inline validation and a success message. It’s dependency-free and built to the accessibility fundamentals, so it works for everyone. Connect it to a hosted form service or your own backend and start receiving messages.
What you get
- Accessible fields with real
<label>s, required states andautocomplete. - Inline validation with errors announced via
aria-live, and a success message. - A responsive card layout that works on any screen.
- CSS-variable theming and zero dependencies.
Try it live
The complete template runs live below — edit the HTML, CSS and JavaScript and watch the preview update instantly. Open it in XCODX Studio when you want to make it your own.
How it's built
An accessible, responsive contact form: every field has a real <label>, focus states are visible, and errors are announced inline rather than by color alone. The JavaScript validates on the client for instant feedback and shows a success state, then hands off to whatever backend you choose. It is built to drop into a real site and wire to an email service in minutes.
- Labelled inputs and visible focus — usable by keyboard and screen reader
- Inline validation with a clear success state, not just red borders
- Client validation for feel; always validate on the server too (below)
- A responsive single-column layout that works on any screen
How to deliver the messages
- Use a form service (Formspree, Web3Forms, Netlify Forms) for a no-backend option — point the
fetchat their endpoint. - Or your own API: POST the JSON to your server over HTTPS and email or store it — see the complete guide to REST APIs.
- Stop spam: add a honeypot field or a captcha, and rate-limit submissions on the server.
- Validate server-side too: client validation is for UX; always re-check on the server.
- Confirm to the user: the success message reassures them; consider an auto-reply email.
Frequently asked questions
How do I make a contact form send email without a backend?
fetch request) at their endpoint, and they email you each submission — no server to build or maintain. It’s the fastest way to make a static site’s contact form actually deliver messages.Is this contact form accessible?
<label> tied to its input, required fields are marked, errors are announced to screen readers via role="alert"/aria-live, the success message uses role="status", and focus states are visible. On validation failure it moves focus to the offending field. These are the fundamentals that make a form usable for everyone.How do I stop spam on the contact form?
Should I validate the form on the client or the server?
Build and test this contact form live in XCODX Studio. See also the login page template, accessibility best practices and the complete guide to REST APIs.