Contact Routing Form

A contact section with validated channels and a fixed accessible form that posts to a same-origin endpoint.

v0.2.1Page blockContact familyContact section

New in 0.2.1 Version the current component and shared source, including explicit localization semantics where applicable.

Installation

npx payload-components add contact-routing-form

What it installs

Copies 5 source files into your project:

  • src/blocks/shared/safeUrls.tsshared
  • src/blocks/shared/contactUrls.ts
  • src/blocks/shared/contactFields.ts
  • src/blocks/ContactRoutingForm/config.ts
  • src/blocks/ContactRoutingForm/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the blocksrc/collections/Pages/index.ts
Maps the renderersrc/blocks/RenderBlocks.tsx
Regenerates typessrc/payload-types.ts
Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js
safeUrls.ts is shared source for this component family. Components that install the same path reuse that local copy, and re-running an install never overwrites a copy you have changed.

Re-running the CLI install detects existing source and wiring, then 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

Add the block to a page. In the Payload admin, open (or create) a Page and add the ContactRoutingForm block to its layout.
Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.
Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3
Next.js
15 / 16
shadcn UI
badge, button, input, textarea

Your project must already expose components.json, src/payload.config.ts — the surfaces patched by payload-components add. The CLI verifies this against the support matrix before touching anything.

Layout adapted from tailark/blocks (MIT), retokenized onto the Payload Components design system.

In this family

contact-routing-formcurrent
Contact Routing FormA contact section with validated channels and a fixed accessible form that posts to a same-origin endpoint.
contact-channels
Contact ChannelsA form-free contact section: heading, supporting copy, and a grid of validated email, phone, and URL channels.
contact-form-basic
Contact Form BasicAn accessible contact form with inline validation and confirmed submission feedback from your own endpoint.