Contact sections · DESIGN EDITION
Rooms project enquiry section
An image-led interior studio contact section with an editorial introduction and carefully grouped project enquiry fields.
Small vanilla JavaScript enhancement · MIT codeFree HTML contact form and enquiry section snippets
Choose contact sections for business enquiries, project briefs and appointment requests. Get labeled responsive forms, HTML/CSS code and Astro components.
- HTML + Astro components
- Open code and individual downloads
- MIT code · scoped styles
6 designs
Contact sections · HTML + ASTRO
Split office contact section
A two-column contact section pairing an office address and telephone links with a labeled enquiry form.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Minimal enquiry form
A narrow, understated contact form with a short introduction and generous reading space.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Project brief contact section
An agency enquiry section with service and project-size choices alongside a short project brief.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Appointment request form
A clearly labeled appointment enquiry with a preferred date, contact details and a notes field.
Small vanilla JavaScript enhancement · MIT code
Contact sections · HTML + ASTRO
Contact directory section
A contact section with separate general, project and office routes above a straightforward message form.
Small vanilla JavaScript enhancement · MIT codeCHOOSING A SECTION
Using these contact sections
A useful contact section explains what to send and what happens next. These designs pair labeled form fields with different contexts: a local office, a compact enquiry, a project brief, a preferred appointment date and a professional contact directory. They use native browser validation and visible required-field labels. Preview mode never sends messages, and the exported source includes clear setup notes for your backend. A preferred date is an enquiry, not a confirmed booking.
- Collect the minimum information needed to answer the enquiry.
- State realistic response expectations in your own words.
- Test server validation, spam controls and success/error responses with your backend.