Contact sections that get a useful message#
A contact form is a filter as much as an inbox. The fields decide whether you receive a useful enquiry or three follow-up emails establishing what the person wanted. These six differ in what they put beside the form.
The six contact layouts#
- Contact Form 1: a minimal form with the essential fields. Free.
- Contact Form 2: the form alongside company information cards.
- Contact Form 3: the form with a location map and office details.
- Contact Form 4: a two-column layout with the form beside contact details.
- Contact Form 5: the form paired with frequently asked questions.
- Contact Form 6: the form with team member cards and social links.
Which layout for which business#
Contact Section 1 when the form is the whole page. Contact Section 3 when a physical address matters, which is most local and appointment-based businesses. Contact Section 5 when a measurable share of your messages are questions already answered somewhere, since putting those answers beside the form reliably reduces the volume.
How the validation behaves#
Fields validate on blur and again on submit, errors are tied to their input with the correct accessible attributes, and the message names what to fix rather than saying the form is invalid. Announcing errors properly is the part most hand-built forms miss, so it is handled here rather than left to you.
What the form does not do#
It sends nothing. The block is the interface, including the submitting state, the success confirmation and the failure path when the request does not complete. You wire the submit handler to your own endpoint, a form service or a server action, so no third-party provider is baked into the markup.
Spam protection is the same story. A captcha or token check belongs on your server; a client-side block cannot honestly claim to stop anything, and the submit handler is where you add it.
Asking for less#
Every field costs completions. Name, email and message are usually enough, with anything else earning its place by changing how you route or answer the enquiry. A company-size dropdown on a form nobody segments by is pure friction.
What sits around a contact section#
An FAQ section is the highest-value neighbour and Contact Section 5 already carries one. A team section above it makes the message feel addressed to somebody, and the footer should repeat the direct contact details for people who never fill in forms.
