Blumenia Order Form

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.

Error states and accessibility

Each invalid field gets its own inline message wired to the input via aria-describedby, and a live region announces the first error on submit while focus jumps straight to it. Replaces a single generic "something's wrong" state with feedback a screen reader can actually follow.

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.

Submission runs through Web3Forms, with custom email templates built and deployed directly in the platform — so the studio gets formatted order details instead of a raw form dump.