# Contact blocks
Contact sections for a marketing site or an app's help page: a plain contact
form, cards per team, and a support form with opening hours. Each block is one
`.svelte` file built from `SvTextInput`, `SvTextArea`, `SvDropDownList`,
`SvSegmented`, `SvModal` and `SvButton`, themed from the `--sg-*` tokens.
## Installation
Add the whole group, or one block by its name (shown under each demo):
See them first with `npx @svgrid/ui try blocks/contact`. No project needed.
## Centered contact form
A heading and one line over a form: name, email, a topic dropdown, a message
with a 1000-character counter and a required privacy checkbox. Send it empty to
see every field error; a valid send shows the button's loading state, then
replaces the form with a confirmation that names the reply address. The form
carries a hidden `website` honeypot field for the server to check.
> Live demo: Centered contact form block - https://svgrid.com/demos/610-block-contact-centered/
`npx @svgrid/ui add contact-centered`
## Contact cards
Sales, Support, Press and Partnerships cards, each with an icon, one line, an
email link and a button. Book a demo opens an `SvModal` with name, work email and
team size; a sent request closes the dialog and marks the Sales card. Four cards
across, two below 980 px, one below 560 px.
> Live demo: Contact cards block - https://svgrid.com/demos/612-block-contact-cards/
`npx @svgrid/ui add contact-cards`
## Contact with support hours
A ticket form with a Low / Normal / Urgent priority next to a hours panel: the
week's hours with today highlighted, an "Open now" or "Opens at 8:00" badge
from the viewer's clock, and the reply time per channel. Changing the priority
changes the promised times, and the confirmation toast quotes the email time.
> Live demo: Contact with support hours block - https://svgrid.com/demos/614-block-contact-hours/
`npx @svgrid/ui add contact-hours`
## Handling the form in SvelteKit
Send contact mail from the server. A mail provider key in the browser is a key
anyone can use to send mail as you, and a client-side send skips your
validation. The pattern below posts the centered form to a form action, checks
every field again on the server, drops bots that fill the honeypot, and calls
the mail provider from server code.
Each block keeps its state in a core exported from its `
```
The other forms follow the same shape: `onSubmit` in the support-hours block,
`onBook` for the demo dialog in the cards block. Each
throws to keep what the user typed. Add a rate limit per IP address in the
action as well; a honeypot stops simple bots, not a person pasting into the
form.
## See also
- [UI blocks overview](https://svgrid.com/docs/help/ui-blocks/index/)
- [SvTextArea](https://svgrid.com/docs/help/ui-components/sv-text-area/)
- [SvModal](https://svgrid.com/docs/help/ui-components/sv-modal/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/contact/ . All docs: https://svgrid.com/llms.txt