Handling Form Submissions

Contact forms, lead captures, and waitlists all follow the same shape: take user input from your frontend and store it. Instead of standing up a separate backend or reaching for a service like Formspree, you can save submissions straight into a Dyrected collection. This guide builds a contact form end to end.

1. Create a submissions collection

First, define a collection in your dyrected.config.ts to store the data. The key is setting the create access to true (or a function that returns true) so that anyone can submit the form.

// dyrected.config.ts
import { defineConfig } from '@dyrected/core'

export default defineConfig({
  collections: [
    {
      slug: 'contact-requests',
      access: {
        read: ({ user }) => user?.roles?.includes('admin'), // Only admins can read
        create: () => true,                            // Anyone can create
      },
      fields: [
        { name: 'name', label: 'Name', type: 'text', required: true },
        { name: 'email', label: 'Email', type: 'email', required: true },
        { name: 'message', label: 'Message', type: 'textarea', required: true },
      ],
    },
  ],
})

2. Submit with the SDK (recommended)

The most direct way to submit data is the .create() method on your collection.

import { createClient } from '@dyrected/sdk'

const client = createClient({
  baseUrl: 'https://your-site.com/api',
  siteId: 'your-site-id' // Required for Cloud mode
})

async function handleSubmit(data) {
  try {
    const result = await client.collection('contact-requests').create({
      name: data.name,
      email: data.email,
      message: data.message,
    })
    console.log('Success:', result)
  } catch (err) {
    console.error('Submission failed:', err.message)
  }
}

Next.js and Nuxt wrappers

If you are using the Next.js or Nuxt package, grab the same client from the framework helper instead of constructing it yourself:

// Next.js example
import { useDyrected } from '@dyrected/next'

const { client } = useDyrected()
await client.collection('contact-requests').create(data)

3. Submit with the REST API

If you aren't using the SDK, you can send a standard POST request to your collection endpoint.

const response = await fetch('https://your-site.com/api/collections/contact-requests', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-site-id': 'your-site-id' // Required for Cloud mode
  },
  body: JSON.stringify({
    name: 'Jane Doe',
    email: '[email protected]',
    message: 'Hello from the frontend!'
  })
})

const result = await response.json()

4. Manage submissions

Once submitted, each entry shows up in the Dyrected Admin under your collection.

Permissions: Keep read access restricted to admins so submitted data stays private.
Validation: Dyrected validates the data against your schema before saving. If the email is invalid or a required field is missing, the request fails with a 400 Bad Request and the details.
Notifications: To email your team when a submission comes in, add an afterChange hook to the collection — see Using Hooks and Sending Email.