Collect

Sanity Studio object

Register an object type named requestFormsForm. Give it formId and mode. Paste the published form id. Do not put an organization API key in sanity.config.ts. Those keys can create and edit forms.

Sanity object type

import {defineField, defineType} from 'sanity'

export const requestFormsForm = defineType({
  name: 'requestFormsForm',
  title: 'Request Forms embed',
  type: 'object',
  fields: [
    defineField({
      name: 'formId',
      title: 'Form ID',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'mode',
      title: 'Embed mode',
      type: 'string',
      initialValue: 'inline',
      options: {
        list: [
          {title: 'Inline', value: 'inline'},
          {title: 'Button modal', value: 'button'},
          {title: 'Link modal', value: 'link'},
        ],
      },
    }),
  ],
})

Add that object to a page document or to Portable Text. The site reads formId and mode from GROQ, then renders the embed.

Next.js embed

export function RequestForms({
  formId,
  mode = 'inline',
}: {
  formId: string
  mode?: 'inline' | 'button' | 'link'
}) {
  const attrs = { 'form-id': formId, ...(mode === 'inline' ? {} : { 'data-mode': mode }) }
  return (
    <>
      <request-forms-embed {...attrs}>
        <a href="https://requestforms.io/">Request Forms</a>
      </request-forms-embed>
      <script src="https://requestforms.io/embed.js" defer />
    </>
  )
}