What we built

A storefront for a fictional Sheffield bespoke metalwork studio, built around the question every UK architectural trade has to answer: can I trust your price before you turn up to measure?

We answered it with an interactive section called Quote Configurator. The visitor picks what they are making (gates, railings, canopy, staircase, or bespoke), roughly how big in their own unit (metres of width, linear metres, square metres, or storeys), and how they want it finished (galvanised, galvanised plus powder coat, or hand painted). The result panel comes back with:

• A real price band in pounds, calculated from per-unit rates and a setup cost
• A real lead time in weeks, adjusted for the finish
• A plain-English line describing exactly what they have specified
• A primary CTA: “Book a free site survey” that opens a UK callback form inline

The form asks for first and last name, phone, postcode, optional email, preferred survey day, and free-text notes. On submit it shows a thank-you state and quietly attaches the quote summary as a hidden field, so the workshop knows what to bring to the survey.

Why this shape

UK architectural-trade buyers (homeowners, architects, small developers) do not behave like service customers. They:

• Get three quotes before they pick up the phone
• Know roughly what their job costs, and want to test you against that number
• Are skeptical of “request a quote” forms that lead nowhere for two days
• Want a postcode-ready callback, not a WhatsApp DM

A static “Get in touch” page loses this buyer. A configurator gives them the number they came looking for, then asks for the survey at the moment they are most engaged. The callback form pattern is what their muscle memory expects from a good UK trade.

What is on the page

• Hero with a single H1, dual CTA (configurator first, services link second), Trustpilot proof, and a hero workshop frame with floating spec badges
• Trust strip with coded welder credentials, Sheffield workshop, Trustpilot rating, and free survey
• Quote Configurator, the killer section. Three steps, a stepper bar, presets plus a slider for the size, finish swatches with the popular pick badged, an estimate panel in the brand’s deep ink, and an inline UK callback form with hidden quote-summary attachment.
• How it works, four steps (sketch, survey, workshop, fit). Fabrication is a longer journey than a callout, so we show four
• Services, four cards with example chips, price-from, and lead time
• The workshop, founder story with the Attercliffe address, service area, and a pull quote
• Reviews from three Yorkshire customers across residential and architectural jobs
• FAQ with six service-delivery, accuracy, guarantee, automation, building-control, and payment questions
• Final CTA in the brand’s deep ink card with the configurator and phone CTAs
• Mobile sticky CTA with the configurator anchor and a phone shortcut

Stack

• Astro 5 + Tailwind 3
• Vanilla TypeScript for the configurator state machine and the form (no React, no client framework)
• Space Grotesk (display) + Inter (body) + JetBrains Mono (small labels), the industrial-modern pair for fabrication
• Industrial orange, warm concrete, and near-black palette for premium-trade utility brand

Why this matters

A bespoke trade site that says “Contact us for a quote” is forgettable. A configurator that returns a real number in real time, then asks for the survey, is a sales tool. It also doubles as qualifier: the moment a visitor picks “4.2m estate pair, galvanised plus powder coat”, the workshop knows what to put on the survey clipboard before they leave the yard. The state machine + UK callback pattern lifts straight onto bespoke joinery, sash windows, granite worktops, garden rooms, and any other architectural trade that lives on accurate first-call quotes.