Height not resizing to form height

[Taylor Stauss]

Very excited I found this plugin 🙌

Trying to get it set up in a NextJS implementation. I'm getting the following errors:

I have the following installed:

Active Plugins

Plugin	Version
Gravity Forms	by Gravity Forms - 2.6.1
Gravity Forms Iframe Add-on	by Cedaro - 2.0.2

Can't seem to get the iframe to resize to the full height of the form (I put a long one in for testing).

This is how I have it set up in my component if it's helpful:

<>
  <iframe
      src={`${process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL}/gfembed/?f=${formData?.gravity_form_id}`}
      width="100%"
      height="500"
      frameBorder="0"
      className="gfiframe"
    ></iframe>
    <Script
      src={`${process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL}/wp-content/plugins/gravity-forms-iframe-2.0.2/assets/scripts/gfembed.min.js`}
      strategy="beforeInteractive"
    />
  </>

[Taylor Stauss]

I think this was due to an environment issue (embedding it in Nextjs). I solved it with the following (for anyone who may stumble upon this), took inspiration from here: https://github.com/rottitime/react-hook-window-message-event:

export default function FormBlock({attributes}: Props): JSX.Element {
  const {data}: {data?: string} = attributes
  let formData: FormData = {}
  if (data !== undefined) {
    formData = JSON.parse(data)
  }

  const [height, setHeight] = useState(500)
  const [width, setWidth] = useState('100%')

  const onWatchEventHandler = useCallback(
    ({origin, data}) => {
      const {message, height, index, width} = data
      if (
        origin === process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL &&
        message === 'size' &&
        index === formData?.gravity_form_id
      ) {
        setHeight(height)
        setWidth(width)
      }
    },
    [formData?.gravity_form_id],
  )

  useEffect(() => {
    window.addEventListener('message', onWatchEventHandler)
    return () => window.removeEventListener('message', onWatchEventHandler)
  })

  return (
    <>
      <div className="max-w-4xl mx-auto">
        {formData?.gravity_form_id && (
          <iframe
            id="gfiframe"
            src={`${process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL}/gfembed/?f=${formData?.gravity_form_id}`}
            width={width}
            height={height}
            frameBorder="0"
            className="gfiframe"
            scrolling="no"
            onLoad={e => {
              const iframe = e.target as HTMLIFrameElement
              iframe.contentWindow.postMessage(
                {
                  message: 'size',
                  index: formData?.gravity_form_id,
                },
                '*',
              )
            }}
          ></iframe>
        )}
      </div>
    </>
  )
}

[Brady Vercher]

Thanks for the update and letting us know how you solved this @ttstauss!