Booking Form
Feature Detail
Description
The Booking Form enables prospective organizations to request a product demo directly from the Sales Website. It collects basic contact information and organization details, then delivers the request via email or webhook to the Norse Digital Products sales team. The form requires no login and is the primary conversion mechanism on the static sales site, bridging marketing interest into qualified sales pipeline leads with minimal friction for decision-makers evaluating Meander.
Sources & reasoning
Lines 337 and 222 explicitly name the demo booking form as a Sales Website MVP deliverable that POSTs to email/webhook with no login - a deliberate lightweight constraint. It is the only interactive conversion surface on a static marketing site, making it critical for early pipeline generation despite low technical complexity.
-
docs/source/likeperson.md · line 337Enkelt demo-booking-skjema (sender til e-post/webhook, ingen pålogging)
-
docs/source/likeperson.md · line 222Demo booking form
Analysis
The Booking Form is the sole conversion mechanism on the Sales Website, transforming passive interest into actionable leads without any backend infrastructure beyond an email or webhook handler. This lowers the barrier to initiating a commercial conversation for prospective Norwegian non-profit organizations. Without it, the site is purely informational with no call-to-action, severely limiting early customer acquisition. Including it in MVP ensures the sales function is operational from launch, enabling Norse Digital Products to build a qualified pipeline before the operational products are fully available to trial.
The form is a static React component on the Next.js Sales Website, posting to a serverless endpoint or third-party handler such as Formspree or a Vercel edge function. No database, no authentication, no shared runtime with operational products. Required fields: organization name, contact name, and email. Client-side validation with accessible error messages per WCAG 2.2 AA. Submission triggers an email to the Norse sales mailbox and optionally a CRM webhook. CSRF protection via honeypot field. The form must function without JavaScript as a progressive enhancement baseline.
Quality Assurance
Prospective Organization Representative (primary)Prospective Organization Representative
Quick UAT
- Ă…pne salgsnettstedet og naviger til demo-bestillingssiden (f.eks. /bestill-demo eller via 'Book en demo'-knapp).
- Fyll ut alle obligatoriske felt: navn, e-postadresse, organisasjonsnavn og valgfri melding.
- Trykk 'Send forespørsel' (eller tilsvarende innsendingsknapp).
- Bekreft at en suksessmelding vises som bekrefter at forespørselen er mottatt og at teamet tar kontakt.
- Bekreft at skjemaet ikke kan sendes pĂĄ nytt uten ny brukerinteraksjon (forhindrer dobbeltinnsending).
Quick UAT — Accessibility
-
Ă…pne salgsnettstedet og naviger til demo-bestillingssiden (f.eks. /bestill-demo eller via 'Book en demo'-knapp).
- Screen reader Sideoverskrift annonseres ved sidelast; 'Book en demo'-knapp har lesbĐ°Ń€ label.
- Keyboard / focus Siden er fullt navigerbar med Tab; fokusrekkefølge følger visuell rekkefølge.
- Zoom Siden er brukbar ved 200% zoom uten horisontal scrolling.
- Contrast 4.5:1 for all tekst; CTA-knapp skiller seg fra bakgrunn uten kun ĂĄ bruke farge.
-
Fyll ut alle obligatoriske felt: navn, e-postadresse, organisasjonsnavn og valgfri melding.
- Screen reader Hvert inputfelt annonseres med label og obligatorisk-status (required); feilmeldinger leses opp ved validering.
- Keyboard / focus Tab navigerer mellom felt i logisk rekkefølge; Enter i tekstfelt flytter ikke til neste felt.
- Focus visibility Synlig fokusring pĂĄ alle inputfelt; obligatoriske felt er merket med 'required' i label eller aria-required.
- Touch target Alle inputfelt har minst 44×44 CSS px berøringsflate (inkludert label-kobling).
-
Trykk 'Send forespørsel' (eller tilsvarende innsendingsknapp).
- Screen reader Knappen annonseres som 'Send forespørsel, knapp'; lastetilstand annonseres via live region.
- Keyboard / focus Knappen nĂĄs med Tab og aktiveres med Enter eller Space.
- Focus visibility Synlig fokusring pĂĄ innsendingsknapp; knapp deaktiveres under innsending med aria-disabled og synlig tilstandsendring.
- Touch target Innsendingsknapp ≥ 44×44 CSS px.
- Live region 'Sender forespørsel…' annonseres som polite live region under innsending.
-
Bekreft at en suksessmelding vises som bekrefter at forespørselen er mottatt og at teamet tar kontakt.
- Screen reader Suksessmeldingen annonseres automatisk som assertive live region etter vellykket innsending.
- Focus visibility Fokus flyttes til suksessmeldingen etter innsending slik at skjermlesere leser opp bekreftelsen umiddelbart.
- Live region 'Forespørselen din er mottatt. Vi tar kontakt snart.' annonseres som assertive live region.
- Contrast Suksessmelding skiller seg fra bakgrunn med ≥ 4.5:1 kontrast; status formidles ikke kun via farge (grønn).
-
Bekreft at skjemaet ikke kan sendes pĂĄ nytt uten ny brukerinteraksjon (forhindrer dobbeltinnsending).
- Keyboard / focus Enter-tast på innsendingsknapp etter fullført innsending utløser ikke ny innsending.
- Focus visibility Innsendingsknapp er synlig deaktivert (aria-disabled) etter vellykket innsending.
Expected End State
Forespørselen er registrert og levert til Norse Digital Products' salgsteam via e-post eller webhook. Brukeren ser en bekreftelsesmelding på skjermen. Ingen pålogging eller oppfølging kreves fra brukeren.
Components (21)
Shared Components
These components are reused across multiple features
User Stories
No user stories have been generated for this feature yet.