Rendering integrated forms

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

import { Widget } from '@typeform/embed-react'

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

export default Typeform

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

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

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

npm i react-iframe

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