hb-form-contact

Category: forms · Tags: forms, contact

Summary

Opinionated contact form: JSON informations toggles fields; the component builds an hb-form schema at runtime. Optional privacy_policy checkbox and captcha (reCAPTCHA v2 invisible) before dispatching formContactSubmit or formContactSubmitWithCaptcha.

What it does

1. Parse: informations, privacy_policy, captcha as JSON strings in $effect.
2. Schema: Derived schema array — name, email, phone, subject, message in order when keys exist; privacy row uses id policy.
3. Submit: On valid hb-form submit, if captcha.siteKey → mount captcha child; else formContactSubmit. After v2 response → formContactSubmitWithCaptcha with response and type: "recaptcha-v2-invisible".

Custom element

hb-form-contact

Attributes

| Attribute | Type (logical) | HTML / notes | | --- | --- | --- | | id | string (optional) | Host id. | | style | string (optional) | In typings; not read in script. | | informations | string | object | Which fields exist and required / label / placeholder / value. Non-object → no form. | | privacy_policy | string | object | Needs input for label; optional link, policyId, required. | | captcha | string | object | siteKey + type (googlev_recaptchav2_invisible | googlev_recaptchav3); v3 type is typed but UI uses v2 invisible when siteKey is set. |

Custom events

| Event name | detail shape | | --- | --- | | formContactSubmit | { _valid: boolean; values: Record<string, string \| number \| boolean> } — no captcha path. | | formContactSubmitWithCaptcha | Same as above plus response: string and optional type ("recaptcha-v2-invisible"). |

Styling

CSS custom properties (extra/docs.ts)

| Variable | Role | | --- | --- | | --bulma-block-spacing | Vertical rhythm around the form (default 1.5rem in metadata). |

CSS parts / slots

None.

TypeScript

types/webcomponent.type.d.ts — Component, Events.

Dependencies

hb-form, hb-captcha-google-recaptcha-v2-invisible (when captcha used).

Minimal HTML example

<hb-form-contact
  informations='{"email":{"required":true},"message":{}}'
  privacy_policy='{"input":"I agree to the privacy policy","required":true}'
></hb-form-contact>