Form Block Rendering in Website Template

[Jeyadadvisory]

Describe the Bug.

The form block does not render fields with width less than 100% correctly for example when defining 2 text fields as 50% width they are rendered is separate lines!

Reproduction Steps

N/A

Environment Info

Binaries:
  Node: 22.11.0
  npm: 9.6.6
  Yarn: 1.22.19
  pnpm: 9.13.0
Relevant Packages:
  payload: 3.17.1
  next: 15.1.4
  @payloadcms/db-mongodb: 3.17.1
  @payloadcms/email-nodemailer: 3.17.1
  @payloadcms/graphql: 3.17.1
  @payloadcms/live-preview: 3.17.1
  @payloadcms/live-preview-react: 3.17.1
  @payloadcms/next/utilities: 3.17.1
  @payloadcms/payload-cloud: 3.17.1
  @payloadcms/plugin-form-builder: 3.17.1
  @payloadcms/plugin-nested-docs: 3.17.1
  @payloadcms/plugin-redirects: 3.17.1
  @payloadcms/plugin-search: 3.17.1
  @payloadcms/plugin-seo: 3.17.1
  @payloadcms/richtext-lexical: 3.17.1
  @payloadcms/translations: 3.17.1
  @payloadcms/ui/shared: 3.17.1
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Dec 19 21:06:34 UTC 2024
  Available memory (MB): 31755
  Available CPU cores: 20

[phil-sola]

I came to leave the same issue as well. Would love to see this fixed in the form plugin to make working with forms better.

It would be great to maybe add some row + column layout fields to the form as well so forms can be designed perfectly in the backend without hacking away at width, hoping to get the desired look.

i.e. within a Row, have 2x column fields, 1 Name input 1 email input and it just works... same for 3, 4 columns as needed with responsive styling to stack on mobile.

[brianFrizzera]

Update: New Component and Layout Adjustments

This was a bit tricky to adjust, but I've managed to find a solution.

Changes Made:

• Created a new Row component: This component handles the layout more efficiently.
• Modified the Width component: Made slight changes to improve functionality.
• Removed an unnecessary div: Eliminated the extra div that was causing the field block to both constrain itself and occupy redundant space.

Please review the changes below, and let me know if you have any questions.

---

// Form/Row/index.tsx

import { cn } from '@/utilities/ui'
import React from 'react'

interface RowProps {
  children: React.ReactNode
  gap?: number | string
  className?: string
}

export const Row: React.FC<RowProps> = ({ children, gap = '1rem', className = '' }) => {
  return (
    <div
      className={cn('justify-between', className)}
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap,
        width: '100%',
      }}
    >
      {children}
    </div>
  )
}

// Form/Width/index.tsx

import React from 'react'

interface WidthProps {
  children: React.ReactNode
  className?: string
  width?: number | string
}

export const Width: React.FC<WidthProps> = ({ children, className, width }) => {
  const computedWidth =
    width !== undefined ? (typeof width === 'number' ? `${width}%` : width) : '100%'

  return (
    <div
      className={className}
      style={{
        width: computedWidth,
        flex: 'none',
        boxSizing: 'border-box',
      }}
    >
      {children}
    </div>
  )
}

// Form/Component.tsx

'use client'
import type { FormFieldBlock, Form as FormType } from '@payloadcms/plugin-form-builder/types'

import { useRouter } from 'next/navigation'
import React, { useCallback, useState } from 'react'
import { useForm, FormProvider } from 'react-hook-form'
import RichText from '@/components/RichText'
import { Button } from '@/components/ui/button'
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'

import { fields } from './fields'
import { getClientSideURL } from '@/utilities/getURL'
import { Row } from './Row'

export type FormBlockType = {
  blockName?: string
  blockType?: 'formBlock'
  enableIntro: boolean
  form: FormType
  introContent?: SerializedEditorState
}

export const FormBlock: React.FC<
  {
    id?: string
  } & FormBlockType
> = (props) => {
  const {
    enableIntro,
    form: formFromProps,
    form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {},
    introContent,
  } = props

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const formMethods = useForm<any>({
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    defaultValues: formFromProps.fields as any,
  })

  const {
    control,
    formState: { errors },
    handleSubmit,
    register,
  } = formMethods

  const [isLoading, setIsLoading] = useState(false)
  const [hasSubmitted, setHasSubmitted] = useState<boolean>()
  const [error, setError] = useState<{ message: string; status?: string } | undefined>()
  const router = useRouter()

  const onSubmit = useCallback(
    (data: FormFieldBlock[]) => {
      let loadingTimerID: ReturnType<typeof setTimeout>
      const submitForm = async () => {
        setError(undefined)

        const dataToSend = Object.entries(data).map(([name, value]) => ({
          field: name,
          value,
        }))

        // Delay the loading indicator by 1 second.
        loadingTimerID = setTimeout(() => {
          setIsLoading(true)
        }, 1000)

        try {
          const req = await fetch(`${getClientSideURL()}/api/form-submissions`, {
            body: JSON.stringify({
              form: formID,
              submissionData: dataToSend,
            }),
            headers: {
              'Content-Type': 'application/json',
            },
            method: 'POST',
          })

          const res = await req.json()

          clearTimeout(loadingTimerID)

          if (req.status >= 400) {
            setIsLoading(false)

            setError({
              message: res.errors?.[0]?.message || 'Internal Server Error',
              status: res.status,
            })

            return
          }

          setIsLoading(false)
          setHasSubmitted(true)

          if (confirmationType === 'redirect' && redirect) {
            const { url } = redirect

            if (url) router.push(url)
          }
        } catch (err) {
          console.warn(err)
          setIsLoading(false)
          setError({
            message: 'Something went wrong.',
          })
        }
      }

      void submitForm()
    },
    [router, formID, redirect, confirmationType],
  )

  return (
    <div className="container lg:max-w-3xl">
      {enableIntro && introContent && !hasSubmitted && (
        <RichText className="mb-8 lg:mb-12" data={introContent} enableGutter={false} />
      )}
      <div className="rounded-[0.8rem] border border-border p-4">
        <FormProvider {...formMethods}>
          {!isLoading && hasSubmitted && confirmationType === 'message' && (
            <RichText data={confirmationMessage} />
          )}
          {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
          {error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}
          {!hasSubmitted && (
            <form id={formID} onSubmit={handleSubmit(onSubmit)} className="">
              <Row className="mb-6 flex flex-wrap gap-1 last:mb-0">
                {formFromProps &&
                  formFromProps.fields &&
                  formFromProps.fields?.map((field, index) => {
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    const Field: React.FC<any> = fields?.[field.blockType as keyof typeof fields]
                    if (Field) {
                      return (
                        <Field
                          key={index}
                          form={formFromProps}
                          {...field}
                          {...formMethods}
                          control={control}
                          errors={errors}
                          register={register}
                          className={''}
                        />
                      )
                    }
                    return null
                  })}
              </Row>

              <Button form={formID} type="submit" variant="default">
                {submitButtonLabel}
              </Button>
            </form>
          )}
        </FormProvider>
      </div>
    </div>
  )
}

Note: To display two fields on the same row, assign a width of 47 or less to both fields.

Final Result: