@htmlbricks/hb-form-contact

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>