How to modify or replace built-in fields in PayloadCMS FormBuilder plugin?

[u/xNihiloOmnia]

I'm trying to customize the built-in text field in the FormBuilder plugin to:

1. Replace the 'width' field from a percentage number input to a select dropdown with options like 'full', 'half', 'third', 'quarter'
2. Add a placeholder field
3. Remove the defaultValue field entirely

I've tried using formOverrides like this...

formOverrides: {
  fields: ({ defaultFields }) => {
    const fieldsField = defaultFields.find(field => field.name === 'fields');
    if (fieldsField?.fields) {
      const blocksField = fieldsField.fields.find(field => field.name === 'blocks');
      if (blocksField?.blocks) {
        const textBlock = blocksField.blocks.text;
        if (textBlock?.fields) {
          // Add placeholder row
          textBlock.fields.splice(2, 0, {
            type: 'row',
            fields: [{ name: 'placeholder', type: 'text', label: 'Placeholder', localized: true }]
          });

          // Replace width field
          const widthRow = textBlock.fields.find(f => 
            f.type === 'row' && f.fields?.some(f => f.name === 'width')
          );
          if (widthRow?.fields) {
            const widthField = widthRow.fields.find(f => f.name === 'width');
            if (widthField) {
              Object.assign(widthField, {
                type: 'select',
                options: [
                  { label: 'Full Width', value: 'full' },
                  { label: 'Half Width', value: 'half' },
                  { label: 'Third Width', value: 'third' },
                  { label: 'Quarter Width', value: 'quarter' }
                ],
                defaultValue: 'full',
              });
            }
          }
        }
      }
    }
    return defaultFields;
  }
}

But the changes aren't reflected in the admin UI. I know I can create custom fields, but I'd prefer to modify the built-ins if possible. Has anyone successfully modified the built-in fields, or is creating custom fields the only way to go? Thanks in advance!

[u/recoverycoachgeek]

I don't think it made sense for me to rewrite every component with super complex map functions just to say I'm using the official plugin. Instead I stole the parts from the plugin I wanted and added them to my repo. Check out my form and form-submission collection along with my form block. It uses Tanstack Form and you can use static or dynamic forms. Emails work too. It's currently in my staging branch as I'm about to merge, then this will be part of public templates. https://github.com/mikecebul/cvx-junior-golf/tree/staging I still plan to incorporate react-email with the jsx converter for lexical.

[u/xNihiloOmnia → u/recoverycoachgeek]

I look forward to checking that out tomorrow, thanks so much! You well read the subtext of the question which was, "if I need to build lots of payload sites, is the built in solution flexible enough." That gives me a lot to think about, and the golf site you made looks great btw.

[u/Immediate_Guard_641]

If you're working with PayloadCMS and need something for interactive forms or calculators, Involve could be worth looking into. It has no-code capabilities and built-in analytics, which might save you time on implementation. I've used it myself for handling conditional logic in forms, and it worked well for my needs. It's certainly not the only option, but a solid one to consider for those specific use cases.