How to embed Reform in a React app

Reform allows you to embed a form on your website, but the provided method of loading the script using a <script> tag won’t always work when navigating from another page of a React app using client-side navigation.

Instead, this is how I load the embedded form on a page of a React app:

import React, { useEffect } from 'react'

export default function PageWithForm() {
  useEffect(() => {
    const el = document.createElement('script')
    el.src = 'https://embed.reform.app/v1/embed.js'
    document.head.appendChild(el)

    el.onload = () => {
      window.Reform('init', {
        url: 'https://forms.reform.app/...',
        target: '#my-reform',
      })
    }
  }, [])

  return (
    <div id="my-reform"></div>
  )
}

The useEffect() function runs as soon as the page loads, and creates a script element in the <head> to load the Reform script.

Once this script is done loading (which we detect using the script tag’s onload event), we load the form into the div with ID my-reform.