Contact
Preview Available in release assets
Collect an inbound message through a native, server-submitted form with visible expectations and no required JavaScript.
Contact in context
<section class="thin-contact" id="contact" aria-labelledby="contact-heading">
<div>
<h2 id="contact-heading">Reach the editorial desk</h2>
<p>Responses within two working days. We use these fields only to answer your message.</p>
</div>
<form action="/contact" method="post">
<div class="thin-field">
<label for="contact-name">Full name</label>
<input class="thin-input" id="contact-name" name="name" autocomplete="name" required />
</div>
<div class="thin-field">
<label for="contact-email">Email address</label>
<input class="thin-input" id="contact-email" name="email" type="email" autocomplete="email" required />
</div>
<div class="thin-field">
<label for="contact-message">Message</label>
<textarea class="thin-textarea" id="contact-message" name="message" rows="4" required>
</textarea>
</div>
<button class="thin-button" type="submit">Send message</button>
</form>
</section>Show code
<section class="thin-contact" id="contact" aria-labelledby="contact-heading">
<div>
<h2 id="contact-heading">Reach the editorial desk</h2>
<p>Responses within two working days. We use these fields only to answer your message.</p>
</div>
<form action="/contact" method="post">
<div class="thin-field">
<label for="contact-name">Full name</label>
<input class="thin-input" id="contact-name" name="name" autocomplete="name" required />
</div>
<div class="thin-field">
<label for="contact-email">Email address</label>
<input class="thin-input" id="contact-email" name="email" type="email" autocomplete="email" required />
</div>
<div class="thin-field">
<label for="contact-message">Message</label>
<textarea class="thin-textarea" id="contact-message" name="message" rows="4" required>
</textarea>
</div>
<button class="thin-button" type="submit">Send message</button>
</form>
</section>Anatomy
- Labelled section
- Purpose and response-time copy
- Post form
- Named fields with visible labels
- Native email input
- Native textarea for the message
- Submit button
Variants and sizes
- Name, email, and message
- Additional subject or topic field
- Consent checkbox when legally required
- Recovery message with server-preserved values
Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
- Empty
- Invalid email
- Missing required field
- Server error
- Pending submission
- Long localized labels
- Narrow container
Structured state fixtures are not published for this item yet.
Interaction and keyboard behavior
The native form posts to the server and uses browser validation without JavaScript; optional enhancement must preserve action, method, values, and returned errors.
Accessibility
Keep each label visible and connected to its input, associate persistent hints and server errors with the relevant field, return focus to an error summary when submission fails, and never preselect optional consent.
- Contract
NATIVE- Basis
- Native labelled forms, inputs, fieldsets, and submit controls; no APG widget
- Evidence
tests/unit/library/marketing-patterns.test.ts
API
Use section.thin-contact containing a native form, field skins, named inputs, and a submit button.
Behavior tier: css-only
Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.
Fallback
Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.
Assets and dependencies
/foundation.css/layouts.css/components.css/patterns/marketing.css/icons/sprite.svg
Dependencies: None
Source: packages/ui/src/items/marketing/style.ts
Composition
Derived from the examples and style specs, not authored.