TechnicalCollectible prompt

Contact page with map, hours and response times

Build a contact page that routes each question to the right channel, with honest reply times and hours.

Lovablev0Bolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Contact page with map, hours and response times

Act as a senior product designer who writes front-end code. Build the contact page for {{business_name}} in {{city}}, built with {{tech_stack}}. Details: {{business_details}}. Keep the current layout, components and existing contact form, and change only what this page needs. Ask me first which kinds of questions we get (such as sales, support, billing, bookings, press) and who answers each. Layout, mobile first: - An H1, then the fastest ways to reach us as large tap targets: call, email and directions, each a real link - Who to contact for what: one short row per question type, with the best channel and an honest response time, such as "Bookings: call, answered during opening hours" or "Everything else: email, within one business day" - Answers to the three most common questions, linked, so some people don't need to write at all - Hours as a table with today's row highlighted and an open or closed status computed in the business's time zone, with holiday exceptions - The address in an address element, with parking or entrance notes - The existing contact form, and what happens after someone sends it: a confirmation, the expected reply time, and a copy by email - At 1280px, two columns: ways to reach us and hours on the left, map and address on the right Map, private and fast: a static map image with a pin linking to directions in the visitor's maps app; an interactive map only after a click, since embeds set third-party cookies and load heavy scripts; space reserved with an aspect ratio, so nothing shifts. Also: - LocalBusiness structured data with address, phone and hours matching the page - Phone numbers as tel links, at least 44px tall - WCAG 2.2 AA: real headings, a table with headers for hours, visible focus, 4.5:1 contrast States: closed today, holiday hours, no phone line, and a form that's sending, sent or failed. Avoid: a full-screen map, hours as an image, and "We'd love to hear from you!" with no real details. Finish with the page and a change list explaining each decision.
Technicalnvoka.com/library/nvoka-contact-page-with-map-hours-and-response-timesScan to open
Technical

Contact page with map, hours and response times

Build a contact page that routes each question to the right channel, with honest reply times and hours.

Nvoka logo

Curated by Nvoka

Lovablev0BoltClaude Code
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 4 filled

Your prompt

Act as a senior product designer who writes front-end code. Build the contact page for {{business_name}} in {{city}}, built with {{tech_stack}}. Details: {{business_details}}. Keep the current layout, components and existing contact form, and change only what this page needs. Ask me first which kinds of questions we get (such as sales, support, billing, bookings, press) and who answers each. Layout, mobile first: - An H1, then the fastest ways to reach us as large tap targets: call, email and directions, each a real link - Who to contact for what: one short row per question type, with the best channel and an honest response time, such as "Bookings: call, answered during opening hours" or "Everything else: email, within one business day" - Answers to the three most common questions, linked, so some people don't need to write at all - Hours as a table with today's row highlighted and an open or closed status computed in the business's time zone, with holiday exceptions - The address in an address element, with parking or entrance notes - The existing contact form, and what happens after someone sends it: a confirmation, the expected reply time, and a copy by email - At 1280px, two columns: ways to reach us and hours on the left, map and address on the right Map, private and fast: a static map image with a pin linking to directions in the visitor's maps app; an interactive map only after a click, since embeds set third-party cookies and load heavy scripts; space reserved with an aspect ratio, so nothing shifts. Also: - LocalBusiness structured data with address, phone and hours matching the page - Phone numbers as tel links, at least 44px tall - WCAG 2.2 AA: real headings, a table with headers for hours, visible focus, 4.5:1 contrast States: closed today, holiday hours, no phone line, and a form that's sending, sent or failed. Avoid: a full-screen map, hours as an image, and "We'd love to hear from you!" with no real details. Finish with the page and a change list explaining each decision.
See all