@swrdsrvrswd/payload-form-submissions-admin

Readable admin UI for Payload's form-submissions collection (from @payloadcms/plugin-form-builder).

• List view — submissionData column shows name, email, phone, and message excerpt
• Detail view — submission fields render as a Field / Value table

Requirements

• Payload 3.x
• @payloadcms/plugin-form-builder

Install

npm install @swrdsrvrswd/payload-form-submissions-admin

Or link locally while developing:

cd payload-form-submissions-admin && npm run build && npm link
cd your-payload-app && npm link @swrdsrvrswd/payload-form-submissions-admin

Usage

Register after formBuilderPlugin:

import { formBuilderPlugin } from '@payloadcms/plugin-form-builder'
import { formSubmissionsAdminPlugin } from '@swrdsrvrswd/payload-form-submissions-admin'

export const plugins = [
  formBuilderPlugin({
    // your existing form-builder options
  }),
  formSubmissionsAdminPlugin({
    group: 'Content',
    preferredKeys: ['firstName', 'lastName', 'email', 'phone'],
    messageFieldKey: 'message',
    messageExcerptMax: 80,
  }),
]

Regenerate the admin import map:

npm run generate:importmap

Next.js (required)

Admin components ship as .tsx source. Add the package to transpilePackages in next.config.mjs:

const nextConfig = {
  transpilePackages: ['@swrdsrvrswd/payload-form-submissions-admin'],
}

Restart the dev server and open Admin → Form Submissions.

Options

| Option | Default | Description | |--------|---------|-------------| | group | 'Content' | Admin sidebar group | | defaultColumns | ['createdAt', 'form', 'submissionData'] | List view columns | | preferredKeys | ['firstName', 'lastName', 'email', 'phone'] | Fields used for list preview | | messageFieldKey | 'message' | Field key for message excerpt | | messageExcerptMax | 80 | Max characters for message excerpt |

How it works

This plugin patches the form-submissions collection created by the form builder plugin. It attaches custom admin field components to submissionData without replacing your form-builder configuration.

Development

npm install
npm run build

Publishing

npm login
npm run publish:public

Scoped packages publish publicly via publishConfig.access: "public". Bump version in package.json before subsequent releases.

License

MIT