Forms

Build fully customizable forms directly in the Payload admin, with Sanitation, Validation, and Rate Limiting (SVR) that runs server-side before a submission is accepted.

Overview

Forms in Atomic Payload are built the same way as the rest of your site: out of blocks in the dashboard. You drop a submit-form action block where the form should go, add input child blocks for the fields it collects, then attach SVR blocks that apply Sanitation, Validation, and Rate Limiting to the form and to its individual inputs.

Because every part of the form is content, you can build fully customizable forms without touching code: lay out the fields, then add the SVR blocks that decide how each submission is cleaned, checked, and throttled.

How it works

SVR is split into three concerns, each expressed as a block you attach to a form or an input:

• Sanitation: cleans incoming values before they are checked or stored.
• Validation: verifies values meet your rules and rejects bad submissions.
• Rate Limiting: throttles how often a form can be submitted.

Like Actions, SVR uses a block structure, so you can extend it by adding a new SVR block. The block list in the dashboard stays the source of truth for how a form behaves, so there is no separate config to keep in sync.

Submissions run through a validated, server-side pipeline. The submit-form action and its input blocks feed the submitForm server function, which loads the form's stored blocks and runs the rate-limiting, sanitation, and validation pipeline before it writes the submission. Only once every SVR check passes does the submission reach Payload.

Using it

In the Payload admin:

1. Add a submit-form action block where you want the form, and add an input child block for each field the form collects.
2. Attach SVR blocks to the form and to individual inputs: a Sanitation block to clean a value, a Validation block to enforce rules, a Rate Limiting block to throttle submissions.
3. To go beyond the built-ins, add a new SVR block; the pipeline picks it up automatically because the dashboard's block list drives behavior.

All of this works alongside the rest of Atomic Payload's block functionality, so form fields can be styled and made interactive the same way as any other block.

Configuration

Forms are provided by the forms namespace of @pro-laico/atomic, registered with formsPlugin():

import { buildConfig } from 'payload'
import { formsPlugin } from '@pro-laico/atomic/forms'

export default buildConfig({
  plugins: [formsPlugin()],
})

Relevant exports:

For installation, peers, and the full export surface, see the atomic plugin reference.

Provided by

Related