Aller au contenu principal

Public Lead Forms

The public lead form route (/public/lead-forms/:formId) lives in frontend/src/pages/public/PublicLeadFormPage/PublicLeadFormPage.tsx.

Styling expectations​

  • The page enforces a plain light theme (the wrapper and the form tag set data-theme="light", and the wrapper overrides the main CSS custom properties such as --input, --background, --border), so embedded fields remain light until you customize them through the lead-form styling configuration; no other theme wrapper can override those colors.
  • The form shell is rendered as a rounded panel without borders or heavy shadows (bg-slate-50/80 with soft padding) to keep the embed visually light.
  • Error, success, and validation notices use minimal panels (colored backgrounds with no borders) so that they feel like native alerts rather than heavy cards.
  • The lead form settings expose an "Afficher le titre" toggle; when disabled the public page hides the heading so partners can drop the form into minimal layouts.

UX behavior​

  • Successful submissions show a centered success panel with a simple headline and a short confirmation message; the panel never shows any branding gradients or framed cards.
  • The success panel now exposes a lightweight action ("Retour au formulaire") so visitors can immediately reopen the form if they need to send another message.
  • Errors in the form appear as compact inline callouts (bg-red-50/90) right above the fields.
  • The loading, fallback, and not-found states all reuse the same clean light background so clients do not have to adjust theme toggles.
  • Recap emails keep the classic "Bonjour… Nouveau contact" format, list every field once, mention the submission source URL, include the “Voir la fiche de ce prospect” link when a contact records exists, and surface availability right away without extra actions; subjects now include the contact and any date/availability info so it’s clear in the inbox.

Any future changes to the public lead form experience must keep these style constraints in mind so the component remains easy to embed across partner sites.