A contact form starts with good HTML. Delivery is a separate concern: the browser can collect and validate data, but a server endpoint or another destination must process it.
Start with the form’s job
Decide what a useful enquiry contains before adding fields. For many sites, a name, reply address and message are enough. Each extra field creates more work for the visitor.
- Write the outcome the form should create.
- Keep only fields needed to produce that outcome.
- Decide where submissions will be processed before publishing.
Use labels and suitable input types
A visible label explains the field to everyone. Matching the input type to the data gives browsers and assistive technology better information.
<form action="/your-endpoint" method="post">
<label for="contact-name">Name</label>
<input id="contact-name" name="name" autocomplete="name" required>
<label for="contact-email">Email</label>
<input id="contact-email" name="email" type="email" autocomplete="email" required>
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" required></textarea>
<button type="submit">Send message</button>
</form>Treat browser validation as guidance
Attributes such as required, type and maxlength improve the experience, but they are not a security boundary. Any receiving server must validate the request again, enforce limits and encode data safely when displaying it.
Test more than the happy path
Use the keyboard, zoom the page, submit empty and malformed values, and check the form at narrow widths. Confirm that errors are understandable and focus remains predictable.
Frequently asked questions
Can HTML send a form directly to email?
HTML can submit data, but reliable email delivery needs a server endpoint or form-processing service. A mailto link depends on the visitor’s email application and is not equivalent.
Do I need JavaScript?
No. A basic form can work without JavaScript. Add JavaScript only for progressive improvements such as richer client feedback or a WhatsApp message generator.
Where should validation happen?
Use browser validation for immediate guidance and repeat all important validation on the server that receives the submission.
Primary sources
Turn the guide into a working form
Start from a template, change the fields and take the code with you.
Open the free builder