Contact Routing Form
A contact section with validated channels and a fixed accessible form that posts to a same-origin endpoint.
Installation
npx payload-components add contact-routing-formWhat it installs
Copies 4 source files into your project:
src/blocks/shared/safeUrls.tssharedsrc/blocks/shared/contactUrls.tssrc/blocks/ContactRoutingForm/config.tssrc/blocks/ContactRoutingForm/Component.tsx
…and makes 4 edits to wire the block into your project:
| Registers the block | src/collections/Pages/index.ts |
| Maps the renderer | src/blocks/RenderBlocks.tsx |
| Regenerates types | src/payload-types.ts |
| Regenerates the admin import map | src/app/(payload)/admin/importMap.js |
src/collections/Pages/index.tssrc/blocks/RenderBlocks.tsxsrc/payload-types.tssrc/app/(payload)/admin/importMap.jssafeUrls.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.
Content model
The block combines validated contact channels with a fixed semantic form payload. The form posts
name, email, organization, phone, and message to the required same-origin action path.
Prop
Type
Each item in channels carries:
Prop
Type
formLabels contains required labels for name, email, organization, phone, and message,
each with a clear English default. Name, email, and message are required inputs; organization and
phone are optional. The form also includes an off-screen website honeypot.
Usage
ContactRoutingForm block to its layout.RenderBlocks on the frontend, fully typed — no extra wiring.Requirements
- Target
- payload-website-starter
- Payload
- v3
- Next.js
- 15 / 16
- shadcn UI
- badge, button, input, textarea
Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.
Layout adapted from tailark/blocks (MIT), retokenized onto the Payload Components design system.