---
title: How can I embed my form in a React app? | Paperform Help Center | Paperform
description: Embedding your form within your React app is slightly more complicated than simply copying and pasting some embed, but only slightly. This article provides guidance on how to embed Paperform in your React app.
url: "https://paperform.co/help/articles/how-can-i-embed-my-form-in-a-react-app"
type: static
generatedAt: "2026-04-04T00:42:01.652Z"
---

How can I embed my form in a React app?
### Embedding

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 perform this step 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

```js
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

```js
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](https://paperform.co/help/articles/embedding-guide/#attribute-reference).

To render the embed in your React app you just need to add some markup similar to:

```html
<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.

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

If you run into any issues, just let us know via [support@paperform.co](mailto:support@paperform.co) or Live Chat.

### Related Articles
  [What is oEmbed and how can I use it with Paperform?  Paperform is an official provider supported by Embedly. This makes embedding Paperform forms super easy for the thousands of sites that utilize Embedly directly, or the oEmbed protocol.](/help/articles/embed-ly-support-for-easy-embeds/)
[Can I embed a payment form in a non-SSL page?  While payments will still work when embedded on (non-secure) pages without an SSL certificate, this is not recommended and should be avoided where possible.](/help/articles/can-i-embed-a-payment-form-in-a-non-ssl-page/)
[Why doesn't my embedded form work?  There's a variety of reasons why embedded forms may not be working. We've compiled a list of the most common causes for your embeds to not appear within this article.](/help/articles/why-is-my-embed-not-working/)