Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Add placeholder to form builder plugin

default discord avatar
face44last year
3

I'm using

@payloadcms/plugin-form-builder

in a project and wandering if there is a way to add fields within the predefined fields?


As an example, I want to add placeholder to all the available fields like text, message, number, etc. I'm dead sure the screenshot is self explanatory. 😆



Thanks



@808734492645785600

tagging you because you know form-builder inside out. 🙂

  • discord user avatar
    jacobsfletch
    last year
    @1072829108523901018

    you should be able to do this using field overrides described here:

    https://github.com/payloadcms/plugin-form-builder#field-overrides

    . Basically just add a new field to the

    fields.text

    property in your plugin config.

  • default discord avatar
    face44last year

    Thank you

    @808734492645785600

    .


    The following code works but requires a

    @ts-ignore

    , the ts error is also attached.


    formBuilder({
          fields: {
            payment: false,
            state: false,
            country: false,
            text: {
              ...fields.text,
              fields: [
                //@ts-ignore
                ...fields.text.fields,
                {
                  type: 'text',
                  name: 'placeholder',
                },
              ],
            },
          },
          formOverrides: {
            fields: [{ name: 'webhook', type: 'text' }],
          },
        }),

    Am I doing it right or is my code is obviously crap?

  • default discord avatar
    ingrid741last year

    Hey, I had exactly the same need and your suggestion is the way to go, here's how you can rid of the TS error:


      plugins: [
        formBuilder({ // https://payloadcms.com/docs/plugins/form-builder#object-object-option
          fields: {
            text: {
              ...fields.text,
              fields: [
                ...(fields.text as Block).fields,
                {
                  name: 'placeholder',
                  type: 'text',
                },
              ],
            },

    Cast to

    Block

    to narrow the type so TS knows what to expect there.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.