Booking Form

frontend/src/components/BookingForm.svelte

The booking form is the shared two-step Meet & Greet form used across the public site. It collects owner details first, then dog details, and submits one JSON payload to /api/contact.

When the user enters a dog name on Step 2, the step heading updates from Tell us about your dog to Tell us about {dog name}.

What it collects

name
email
phone
services
petName
petBreed
location
message

It also sends:

service
serviceAreaStatus

serviceAreaStatus is:

in_area
outside_area
unknown

Breed autocomplete

Breed suggestions come from frontend/src/lib/booking/options.js.
The autocomplete list is intentionally curated to common small and medium breeds only.
The current curated list contains 38 small and medium breed entries, including common crossbreeds such as Cavoodle, Cockapoo, Labradoodle Mini, Schnoodle, and Spoodle.
The Step 2 heading includes a circular placeholder dog image by default.
As the user types, the breed field shows controlled in-form suggestions rather than relying on the browser datalist UI.
When a breed suggestion is selected, the heading image swaps from the placeholder to the matched breed preview photo.
Common typed variants can also resolve to the supported breed entry, for example Shitzu maps to Shih Tzu.
If the breed does not exactly match a supported option, the field still submits and the heading keeps the generic dog image.
Breed preview images are stored locally in frontend/public/images/breeds.
Source and attribution notes for the downloaded free-use breed images live in frontend/public/images/breeds/ATTRIBUTION.md.

Suburb autocomplete

Suburb suggestions also come from frontend/src/lib/booking/options.js.
The suburb field now uses controlled in-form autocomplete suggestions, so typing prefixes like Pons can resolve to Ponsonby.
The programmed suburb list now covers a broader Auckland suburb set, so places like Long Bay can still be recognized and marked as outside the regular route.
The list includes:
- regular service-area suburbs
- a small set of nearby suburbs outside the normal route
Selecting an in-area suburb shows a compact green confirmation state directly under the suburb field.
Selecting an out-of-area suburb shows a small warning banner directly under the suburb field.
The warning does not block form submission. Users can still contact the business because route exceptions may be possible.
Step 2 is laid out as two compact columns so pet name and breed sit on the left while suburb and its autocomplete feedback sit on the right, with the message field spanning full width below.

Analytics

The form keeps experiment analytics non-blocking and emits:

form_start
form_submit
conversion

Files involved

frontend/src/components/BookingForm.svelte
frontend/src/lib/booking/options.js

Updating breeds

Edit frontend/src/lib/booking/options.js.

Each breed entry defines:

name
sizeLabel
image

The image is only for the preview avatar UI and does not affect submission.

When adding a new local breed image:

save it under frontend/public/images/breeds
add or update its source entry in frontend/public/images/breeds/ATTRIBUTION.md
keep the image path local so the form does not depend on third-party runtime hosts

Updating suburbs