Typeform and ButterCMS Integration

TypeForm

Typeform is an online form building and survey tool. It helps teams to create dynamic forms based on user needs. With Typeform, you can:

• Make your surveys instantly recognizable - Use brand kits to add logos, colors, and styles to your surveys, then smoothly embed them in landing pages and emails without any coding.
• Get survey takers to share more - Call people by their name, adapt follow-up questions to their answers, and end your survey on a personal note.
• Let the whole journey happen in your survey - Build surveys with AI, let people schedule time, run calculations, or score leads—and follow up with personalized, automated messages.

Enabling the integration

To enable your Formstack integration, just go to Settings > Integrations > and tick on the Typeform checkbox to enable it:

After you have integrated Typeform into your ButterCMS account, you will see a new content field that you can add to your schema when creating or editing your pages and/or page types.

Adding a form to your page

The first time you try adding a form to your page, the system will prompt you to log into your Typeform account.

We then dynamically load a list of all of your forms into the Butter dashboard right here.

That's it! Your form should now show up on your page(s). Here’s a sample of the API JSON response for how the forms get returned in our API.

Embedding Typeform on your website or app

Typeform has their own Embed library so that you can embed your typeforms easily. You can access their documentation for their React and Vanilla JS packages here.

If you’re using React, or a framework built on React, you can use the Typeform React Embed package.

To simply embed your typeform on a page, you can import the `Widget` component directly from the package and pass in the `id` property from your API response.

The `id` prop would the `id` key within our API response

"fields": {
    "forms": {
      ...
      "id": "bMNMNfeT",
      ...
     }
}

Your code for a Typeform component in your code may look something like this:

import { TypeformI } from '@/definitions/interfaces/_forms'
import { Widget } from '@typeform/embed-react'

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

export default Typeform

Adding more customization to your Typeform in Butter

In Butter, you can easily add more customization to your component that calls on Typeform by adding a Dropdown field.

Typeform offers a number of ways to embed a form within your website or app and you can call on the different embed options via the Dropdown field. Below, we have included three within our “Form embed” field.

Within the API response, the `form_embed` property will return a string with the values in the right column in the screenshot above — 'popup', 'side-tab', or 'slider'.

Expanding on our component

Let’s create a new component, a seamless button within our website navigation that can trigger our form to render.

Here, we created a new component within Butter named Navigation Link Typeform Button.

Our code looks like this:

// @/definitions/interfaces/_forms/index.ts
export interface TypeformI {
    id: string;
    embed: 'popup' | 'side-tab' | 'slider';
    embedRef?: RefObject<GenericEmbed | undefined>;
}

// @/definitions/interfaces/_navigation/index.ts
export interface NavigationLinkButtonI {
    label: string;
    form: TypeformI;
    formEmbed: 'popup' | 'side-tab' | 'slider';
}

// @/components/_page-elements/NavigationLinkTypeformButton/index.tsx
'use client'
import { NavigationLinkButtonI } from '@/definitions/interfaces/_navigation'
import TextContent from '@/components/_styled/TextContent'
import {
    ColorE,
    FontWeightE,
    FontSizeE
} from '@/definitions/enums'
import Typeform from '@/components/_styled/Typeform'
import { useRef } from 'react'
import { GenericEmbed } from '@typeform/embed-react';

const NavigationLinkTypeformButton: React.FC<NavigationLinkButtonI> = ({
    label,
    form,
    formEmbed
}) => {
    const embedRef = useRef<GenericEmbed>(undefined)

    const typeformOpenHandler = () => {
        embedRef?.current?.open()
    }
    return (
        <>
            <div className='absolute'>
                <Typeform id={form?.id} embed={formEmbed} embedRef={embedRef} />
            </div>
            <button onClick={typeformOpenHandler}>
                <TextContent
                    text={label}
                    fontSize={FontSizeE.XL}
                    color={ColorE.SECONDARY}
                    fontWeight={FontWeightE.MEDIUM}
                />
            </button>
        </>
    )
}

export default NavigationLinkTypeformButton

We created the `embedRef` reference so that we could store the `Typeform` embed instance and then based on a click event with our button, we can trigger our form to render as shown in the `typeformOpenHandler` function above.

Rendering Typeform

Expanding on the code snippet provided in the last section, our `Typeform` component looks like this:

import { TypeformI } from '@/definitions/interfaces/_forms'
import { PopupButton, Sidetab, SliderButton } from '@typeform/embed-react'

const Typeform: React.FC<TypeformI> = ({
    id,
    embed,
    embedRef,
}) => {

    return (
        <>
            {embed === 'popup' &&
                <PopupButton embedRef={embedRef} id={id} />
            }
            {embed === 'side-tab' &&
                <Sidetab
                    id={id}
                    embedRef={embedRef}
                />
            }
            {embed === 'slider' &&
                <SliderButton
                    id={id}
                    embedRef={embedRef}
                />
            }
        </>
    )
}

export default Typeform

PopupButton, Sidetab, and SliderButton are imported directly from Typeform’s React Embed package; they’re pre-built components. The embed prop conditionally renders the different embed options.

Once again, we use the `embedRef` prop so that we could pass the reference from the parent component (NavigationLinkTypeformButton) to allow the click event to trigger the form to render.

Closing thoughts

Now, you can render any of your forms from Typeform!