Contacts Page Design Development
Contacts page is the last step before reaching out. User who made it here is ready for dialog. Design task is not to prevent them from doing so and remove last doubts.
Page Composition
Feedback Form — key element. Minimum fields: name, email/phone, message. Each extra field reduces conversion. If segmentation needed — dropdown "Subject" is better than 5 separate fields.
Real-time validation (inline validation) — show error on focus loss (blur), not on submit attempt. Error is concrete ("Enter email as [email protected]"), not abstract ("Invalid format").
Contact Details — phone, email, messengers. Phone and email are clickable links (tel:, mailto:). For messengers — icons with direct links to Telegram, WhatsApp.
Address and Map — if office exists. Map embedded via iframe (Google Maps, Yandex.Maps) or via API (mapbox-gl, Leaflet) for custom styling. iframe simpler and faster, API allows styling to brand colors.
Response Time — "We'll respond within 2 hours during business hours" removes waiting anxiety and forms expectation.
Layout
Desktop: form — left column (60%), contact details + map — right (40%). Mobile: form on top, details and map below.
Confirmation state — after successful form submission user should see clear confirmation: application accepted, what happens next, when to expect response. Not just "Thanks" — concrete next action.
Timeline
Contacts page design (desktop + mobile) — 2–3 working days.