ContactForm
A complete contact form with name, email, topic and message fields, plus configurable copy and a native submission endpoint.
ContactFormSet your own action in production. The built-in default is a mailto destination; this preview intercepts submission and sends nothing.
Preview a contact message
Fill in the required fields and submit. Native validation runs before the local message receipt appears.
<RegorApp id="contact-form-demo" src="./playground.ts"/>import {
defineButtonComponents,
defineContactFormComponents,
defineFlexComponents,
defineFormComponents,
} from '@purestack/ts-components'
import { createApp, defineComponent, html, type Ref, ref } from 'regor'
export interface ContactFormExample {
receipt: Ref<string>
capture: (event: Event) => void
}
const contactFormExampleTemplate = html`<Flex direction="column">
<div @submit.prevent="capture">
<ContactForm
title="Tell us about your project"
description="This preview keeps your message in this page."
action="#"
submitLabel="Preview message"
/>
</div>
<FormStatus tone="success" :hidden="!receipt">{{ receipt }}</FormStatus>
</Flex>`
function createContactFormExample(): ContactFormExample {
const receipt = ref('')
return {
receipt,
capture: (event) => {
const form = event.target as HTMLFormElement
if (!form.reportValidity()) return
const data = new FormData(form)
receipt(
`Message preview ready for ${String(data.get('name') ?? '')}: ${String(data.get('message') ?? '')}`,
)
},
}
}
const component = defineComponent<ContactFormExample>(
contactFormExampleTemplate,
{
context: createContactFormExample,
},
)
createApp(
{
components: {
ContactFormExample: component,
...defineContactFormComponents(),
...defineButtonComponents(),
...defineFlexComponents(),
...defineFormComponents(),
},
},
{ selector: 'app#contact-form-demo', template: html`<ContactFormExample />` },
)Adapt the copy
This fieldset disables submission while showing a second copy configuration.
<fieldset disabled class="p-3">
<legend>Support form configuration</legend>
<ContactForm
title="Ask for help"
description="Include the context needed to reproduce the issue."
action="#"
submitLabel="Send support request"
topicGeneralLabel="Usage question"
topicSupportLabel="Bug report"
topicPartnershipLabel="Integration"
messageLabel="What happened?"
messagePlaceholder="Describe the issue and expected result."
/>
</fieldset>Behavior and accessibility
The component renders a native form with required fields and enctype text/plain. Its props are resolved when the component is created, rather than designed as reactive refs. An action URL alone is not a delivery service; configure an endpoint that accepts the form’s encoding.
API reference
ContactForm contract
Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.
title
string - Default
Send a message
Text used for title.
description
string - Default
Share context and goals so we can route your request quickly.
Text used for description.
action
string - Default
mailto:team@purestack.dev
Submission destination. Always replace the default for your own site.
method
ContactFormMethod - Default
post
get or post; values other than get resolve to post.
submitLabel
string - Default
Send Message
Text used for submit label.
nameLabel
string - Default
Name
Text used for name label.
emailLabel
string - Default
Email
Text used for email label.
topicLabel
string - Default
Topic
Text used for topic label.
messageLabel
string - Default
Message
Text used for message label.
namePlaceholder
string - Default
Your name
Text used for name placeholder.
emailPlaceholder
string - Default
name@company.com
Text used for email placeholder.
messagePlaceholder
string - Default
Tell us what you are trying to solve.
Text used for message placeholder.
topicGeneralLabel
string - Default
General inquiry
Text used for topic general label.
topicSupportLabel
string - Default
Technical support
Text used for topic support label.
topicPartnershipLabel
string - Default
Partnership
Text used for topic partnership label.
Composition
No slots. Native submit events bubble from the nested form; handle them on a wrapper for local app behavior. Register defineContactFormComponents and defineButtonComponents.