Embedding your form within your React app is slightly more complicated than simply copying and pasting some embed, but only slightly.
The first step is to add the embed code script to your application.
You only need to do this once.
Depending on your app you may just add it directly to your HTML. Alternatively, you can add the script tag dynamically from a component using the useEffect
hook on a function component
React.useEffect(() => {
const script = document.createElement("script");
script.src = "https://paperform.co/__embed.min.js";
document.body.appendChild(script);
}, []);
or the componentDidMount
method on a class component
componentDidMount() => {
const script = document.createElement("script");
script.src = "https://paperform.co/__embed.min.js";
document.body.appendChild(script);
};
The embed script will mount forms on elements with the data-paperform-id
attribute.
Depending on what type of embed you are using, there may be other properties required or desired. Our embedding guide contains an attribute reference.
To render the embed in your React app you just need to add some markup similar to:
<div data-paperform-id="YOUR_FORM_SLUG" />
Here is an example function component that adds the embed script and renders the required markup.
import React from "react";
export default function PaperformEmbed(props) {
const { formSlug, showSpinner = "1" } = props
React.useEffect(() => {
const script = document.createElement("script");
script.src = "https://paperform.co/__embed.min.js";
document.body.appendChild(script);
}, []);
return (
<div
data-paperform-id={formSlug}
data-spinner={showSpinner}
/>
);
}