Form Builder Plugin Submission Validation

[remote idol]

Hi folks, I'm getting started with payload and am figuring out the best way to handle form submission. Right now I'm testing the form builder plugin and am trying to figure out validation of submitted data. For example for a contact form with an email field might have email format validation. I see that, generally, there is a validation hook for the Field type, as well as a beforeValidation hook at the collection level.

However, I see in the plugin's code (https://github.com/payloadcms/payload/blob/main/packages/plugin-form-builder/src/collections/FormSubmissions/index.ts) that there's a mostly blank validation function stating it might not be usable. Is there a recommended way to get around this, or to add custom validation per Form? I.e. If I create a Contact Form and want to add custom validation to a field in it on submission, is there a standard way of doing that right now? My first thought is through the formSubmissionOverrides config. Also, zooming out, I'm wondering if maybe the plugin is overkill for such a simple form and I should just make a custom Contact Submissions collection instead?

Sorry if that was long winded, would love to hear your thoughts!

[woven spear]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• How To Build A Website, Blog, or Portfolio with Next.js - Features - Forms

Community-Help:

• Hello guys, in our company we always had form vali...

[vivid birch]

Making a custom "Contact Submissions" collection is where we usually start for simple websites. We only use the plugin when we truly need user-defined forms, stemming from the use-case that we recently built a custom marketing campaign builder which let users create entire campaign landing pages and used forms to convert visitors.

In that case I think there's two ways you can go about it, either you handle validation server-side during submit - e.g. we don't have public create access for form-submissions, instead we use a Next.js server action to handle the form data. You can put the validation in there by iterating through the form entries and matching them up with the form's fields and apply validation logic depending on the blockType, or you can add a custom validate to the form-submissions collection's submissionData.value field which uses the field name to match it to the form's field, and handle the validation in there.

If you're curious what the formOverrides look like and how you can easily update/add configuration take a look at how I added raw HTML email support.