Jotform and ButterCMS Integration

Jotform

Jotform is a powerful online form builder that makes it easy to create robust forms and collect important data.

• Build the form you need in minutes: Jotform's Online Form Builder allows you to create professional-looking forms with no coding. You can then style your forms with your own logo, fonts, and colors.
• Integrate your form with business apps: Automatically send form submissions to email marketing services, project management boards, CRMs, cloud storage apps, and more with Jotform’s 150+ integrations.
• Collect online payments seamlessly: Whether you’re selling a product, accepting a fee, or collecting a donation, Jotform allows you to get paid directly through your form.

Enabling the integration

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

After integrating Jotform into your ButterCMS account, you will see a new content field to 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 Jotform account.

Here’s a sample of the API JSON response for how the forms get returned in the API.

"my_form_field": {
    "createdAt": "2023-05-29T09:29:55.966154Z",
    "id": "Nw5w9soB",
    "title": "Are You a Good Cultural Fit For Our Startup?  (copy)",
    "url": "https://pi02g9pagar.typeform.com/to/Nw5w9soB",
    "type": "quiz"
}

Now that you have the API JSON response from Butter, you can start working on rendering your form on your page.

Embedding Jotform on your website

Within your Jotform account, click on the Publish tab on the orange bar at the top.

Below, you will see various options for embedding your form on a page:

If you’re using React, you may know that there are two Jotform embed libraries available. However, they are not actively maintained, and installing a library that is not regularly maintained with updates can put your website at risk.

Instead, use the React Iframe package to make your code more reusable.

npm i react-iframe

The Jotform component can be very simple:

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

Here, you're deconstructing your props parameter with the form and height properties. The form property is the API JSON response that you receive from Butter via the Jotform integration.

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

The height property is another field that you can add within Butter to set the height attribute on the Iframe component. The width property on the Iframe component can be 100%, so that it can stretch the length of the parent container element.

From this point, you can create other components in Butter and in your code to which you can add Jotform forms, like popups and slider drawers.

Closing thoughts

After setting up your reusable Jotform component, here is the desired result: