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 = '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
.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.