ContactForm

section · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

An accessible contact form that sends messages to the private ULAMS contact inbox through the platform API.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "ContactForm",
  "props": {
    "title": "Contact the ULAMS team",
    "intro": "Tell us what your team needs to teach.",
    "endpoint": "https://api.ulams.app",
    "nameLabel": "Your name",
    "emailLabel": "Email address",
    "subjectLabel": "Subject",
    "messageLabel": "Message",
    "submitLabel": "Send message",
    "sendingLabel": "Sending…",
    "successMessage": "Your message has been sent.",
    "errorMessage": "Could not send your message. Please try again.",
    "note": "Your message goes to the ULAMS contact inbox."
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "contact"
eyebrow	string		Small label above the title. max length 80
title	string	yes	Section title. max length 120
intro	string	yes	Short introduction. max length 400
endpoint	string	yes	Platform API base URL. max length 254
nameLabel	string	yes	Name field label. max length 80
emailLabel	string	yes	Reply-to field label. max length 80
subjectLabel	string	yes	Subject field label. max length 80
messageLabel	string	yes	Message field label. max length 80
submitLabel	string	yes	Submit button label. max length 80
sendingLabel	string	yes	Submitting state label. max length 80
successMessage	string	yes	Successful submission message. max length 200
errorMessage	string	yes	Submission failure message. max length 200
note	string	yes	Submission behavior note. max length 200

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Contact the ULAMS team
Tell us what your team needs to teach.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "endpoint": "javascript:alert(1)"
}

Issues:

• /title is required
• /intro is required
• /nameLabel is required
• /emailLabel is required
• /subjectLabel is required

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 23 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.