How can I embed my form in a React app?

Embedding your form within your React app is slightly more complicated than simply copying and pasting some embed, but only slightly.

Adding the embed script

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);
};

Adding the embed target

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" />

Putting it all together

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}
    />
  );
}