Skip to content
Coastal Healthcare Advocates

Module: contact-form

Shared contact-form behavior for the intake form and its dialog copy.

Provides:

  • inline validation with accessible error messages and an error summary;
  • a live character count for the message box;
  • automatic ticking of the "preferred contact method" boxes;
  • spam protection: a honeypot field, a 2-second time-trap, and a Cloudflare Turnstile widget whose token netlify/functions/submission-created.mjs verifies server-side (see CLAUDE.md, "Forms & spam protection");
  • an AJAX submit to Netlify Forms, with success and error states.

This module sets up the inline #intake-form itself as soon as it's imported (see the bottom of the file), and modal.js imports initContactForm to set up the dialog's cloned copy.

Without JavaScript the form still works: it POSTs natively to /thanks, which Netlify records and then serves index.html for.

Field ids

Ids are prefixed per form instance — in- for the inline form, cf- for the dialog copy (e.g. in-name, cf-name). Each validated field X has an error element X-err.

Source:

Members

(inner, constant) TURNSTILE_SRC

Cloudflare's Turnstile script. render=explicit stops it rendering widgets on its own (each form renders and owns its widget), and onload names the global it calls once ready. The host is allowed by the site's CSP (script-src and frame-src in index.html and netlify.toml).

Source:

(inner) dirty

Whether the visitor has typed or chosen anything (the privacy tick aside).

Source:

(inner) submitted

Whether the success panel is currently showing.

Source:

(inner) turnstileLoad

The in-flight or finished load of the script, or null before the first request. @type {Promise|null}

Source:

Methods

(static) initContactForm(form, optsopt) → {ContactFormController|null}

Adds validation, spam protection and AJAX submission to a contact form.

Parameters:
Name Type Attributes Default Description
form HTMLFormElement | null

The form to enhance.
opts ContactFormOptions <optional>
 {}

Optional elements and callbacks.
Source:
Returns:

A controller, or null if no form was given.

Type
ContactFormController | null

(inner) loadTurnstile() → {Promise.<void>}

Loads Cloudflare's Turnstile script once, on demand — the first time someone starts filling a form in — rather than on every page view. Resolves when window.turnstile is ready. Rejects if the script can't load (blocked or offline), and the next call tries again.

Source:
Returns:
Type
Promise.<void>

(inner) reset()

Return to a blank, visible form, errors cleared (the modal calls this on open and close).

Source:

(inner) setContext(ctxopt)

Set the hidden context field (crisis / referrer).

Parameters:
Name Type Attributes Description
ctx string <optional>

The context value; defaults to 'crisis'.
Source:

(inner) showSuccess()

Show the success state without a submit (the no-JS /thanks landing).

Source:

(inner) stampOpened()

Re-baseline the time-trap (call when a modal opens).

Source:

Type Definitions

ContactFormController

Handle returned by initContactForm for controlling a form.

Type:
  • Object
Properties:
Name Type Description
form HTMLFormElement

The form being controlled.
validate function

Runs validation, shows any errors, and returns true if the form is valid.
stampOpened function

Restarts the spam time-trap clock (call when a dialog opens).
setContext function

Sets the hidden context field ('crisis' by default, or e.g. 'referrer').
submitted boolean

Read-only: whether the success panel is showing.
dirty boolean

Read-only: whether the visitor has entered or changed anything (ignoring the privacy tick box and spam fields).
reset function

Returns to a blank, visible form with no errors.
showSuccess function

Shows the success panel without submitting (for the no-JS /thanks landing).
Source:

ContactFormOptions

Options for initContactForm. All optional; each falls back to looking inside/near the form.

Type:
  • Object
Properties:
Name Type Attributes Description
errorSummary HTMLElement <optional>

Box listing all errors at once. Default: [data-contact-errors] inside the form.
successPanel HTMLElement <optional>

Panel shown after a successful send. Default: [data-contact-success] beside the form.
submitBtn HTMLButtonElement <optional>

The submit button. Default: the form's button[type="submit"].
onSuccess function <optional>

Called after a successful send.
onReset function <optional>

Called at the end of reset().
Source:

FieldError

A validation error, as collected by validate.

Type:
  • Object
Properties:
Name Type Description
id string

Id of the invalid field.
message string

Message shown to the visitor.
Source: