The problem
Blumenia's order intake ran through a 22-question Google Form. Image size got asked once, then referenced three more times — once for a matching color-correction price, once for a matching delivery price, once for orientation — so a customer could pick one size up top and tap a mismatched row further down, invisible until the studio read it by hand.
Billing and delivery address were free-text boxes, so submissions arrived inconsistent or incomplete, meaning follow-up emails before a quote could even start. And the form was long, linear, stateless — no progress, no resume — on a purchase that's emotionally loaded and easy to abandon under friction.
Key decisions
Derive instead of re-ask
Image size is captured once; every dependent question filters to match that choice instead of showing the full list and trusting the customer to pick the right row. Removes the error at the source instead of validating for it after.
Chunk and save state
22 fields split into four steps — artwork spec, bouquet logistics, billing/delivery, consent — with a progress bar and save-resume via localStorage. Lowers the cost of starting a long form, and protects a one-shot emotional purchase from a closed tab.
Structure the data
Free-text address blocks became discrete validated fields (name, street, city, ZIP, country, phone), plus a "billing same as delivery" toggle. Turns a paragraph the studio had to parse by hand into clean fields they can act on immediately.
Working inside the constraint
No dev environment on the receiving end — the form had to live as one block of markup pasted into Shoptet's page editor, styled by whatever the shop's theme already provides. That ruled out a stylesheet or JS framework, so the accessibility work had to sit in the HTML itself: real fieldset/legend groups, every input bound to a label, required states declared natively.
Submission runs through Web3Forms — no backend to write, just a fetch call and two hidden divs toggled on success or failure.