Ben Borgers

How to embed Reform in a React app

October 13, 2021

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 = ''

    el.onload = () => {
      window.Reform('init', {
        url: '',
        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.

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.