CRM forms

Every HubSpot contact form on the site renders through the CRM form module: the form itself (fields, steps, logic, copy) is built in the forms editor and the module adds the theme's enhancements by field name. This page places five forms, simple to complex (the last two share one form design, single-step then multi-step), so the full processing sequence can be verified for each: empty submit → inline error stage → corrected submit → confirmation stage.

Common checks on every form: labels are associated with their controls, required fields carry an asterisk and aria-required, an invalid submit moves focus to the first error, every control shows a keyboard focus ring, and the skeleton placeholder is replaced by the form without the page jumping.

Simple. First name, email and message are required. Submit empty → three inline errors, focus lands on the first. Fill them in → the form is replaced by HubSpot's thank-you message (Keep the form on screen is off).

Smallest. One required email. A malformed address is rejected inline before anything is sent. A valid submit redirects to the preferences centre instead of showing a message — the module's response type is set to Redirect.

Medium. First name, last name, email and arrival date are required; phone, date and group size are validated by type. Country drives Region: pick New Zealand and Region appears as a dropdown of NZ regions; pick Australia and it lists states; anything else hides it and clears its value. "Who is travelling?" renders as pill buttons (arrow keys move between them). Valid submit → inline thank-you.

Complex — every enhancement, one long form. Above the form the theme's completion meter counts every field and updates live. Interests cap at three (the rest lock with a polite announcement), choice lists flow in two columns, "Who will you be travelling with?" is a pill row, Region follows Country as on the enquiry form, and a known visitor's stored values are hydrated into any field HubSpot left empty. Only first name and email are required. Submit → the form stays on screen with a success alert above it (focus moves to the alert) and the values you entered remain.

Complex — multi-step. The same module and enhancements on a three-step form built in HubSpot's Form Editor (About you · Travelling with + Interests · Message), rendered by HubSpot's v4 renderer with its own step bar and Next / Previous buttons. Next is blocked until the step's required fields are valid; the theme re-binds its enhancements on every step, so the Choose-3 cap and the pill row work on step 2 and the completion meter counts fields across all steps. Submit on step 3 → the form stays on screen with the success alert.

Steps cannot be created through the Forms API, so this form is not a fixture — it is authored once per portal in Marketing → Forms (new editor) and referenced by id.