> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Rendering integrated forms

> Use ButterCMS form integration fields to embed Typeform, Jotform, and Formstack in your frontend.

<Info>
  Enable provider integrations in the dashboard first. See [Form integrations in the dashboard](../../create-content/creating-editing-content/forms/form-integrations).
</Info>

## Typeform

### API Response

```json theme={null}
{
  "fields": {
    "forms": {
      "id": "bMNMNfeT",
      "title": "Contact Form",
      "url": "https://yourcompany.typeform.com/to/bMNMNfeT",
      "type": "form"
    }
  }
}
```

### Embedding Typeform in React

```jsx theme={null}
import { Widget } from '@typeform/embed-react'

const Typeform = ({ id }) => {
  return (
    <Widget
      id={id}
      style={{ width: '50%' }}
      className="my-form"
    />
  )
}

export default Typeform
```

## Jotform

### API Response

```json theme={null}
{
  "form": {
    "createdAt": "2024-09-03 18:01:39",
    "id": "242466696151059",
    "title": "Jotform test form",
    "url": "https://form.jotform.com/242466696151059",
    "type": "LEGACY"
  }
}
```

### Embedding Jotform in React

```jsx theme={null}
import Iframe from 'react-iframe'

const Jotform = ({ form, height }) => {
  return(
    <div>
      <Iframe
        url={form?.url}
        id={form?.id}
        display='block'
        width='100%'
        height={height}
        position='relative'
        scrolling='no'
      />
    </div>
  )
}

export default Jotform
```

## Formstack

### API Response

```json theme={null}
{
  "form": {
    "createdAt": "2025-02-13 12:17:18",
    "id": "6099056",
    "title": "Contact form",
    "url": "https://buttercms.formstack.com/forms/contact_form",
    "type": ""
  }
}
```

### Embedding Formstack in React

```bash theme={null}
npm i react-iframe
```

```jsx theme={null}
import React from 'react';
import Iframe from 'react-iframe'

const Formstack = ({ form }) => {
  const { url, id, title } = form
  return (
    <>
      <h1 className='text-center'>{title}</h1>
      <Iframe
        url={url}
        id={id}
        display='block'
        width='100%'
        height='775'
        position='relative'
        scrolling='no'
      />
    </>
  )
}

export default Formstack
```