Formstack and ButterCMS Integration

Formstack

Formstack Forms is an intuitive, drag-and-drop form and workflow builder that allows businesses to collect information that matters and automate processes. With Formstack Forms, organizations can create professionally branded, mobile-friendly online forms in minutes and start gathering payments, feedback, event registrations, and more.

Note: A Formstack Forms plan is required for use with this integration. 

Enabling the integration

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

After you have integrated Formstack 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 Formstack account, 

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

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.

Now that we have our API response, we can use a few of the field properties and started rendering our form on the page.

Embedding Formstack on your website

While you’re in your Formstack account, navigate to the form that you want to embed via Butter. Then, click on the Share button tab.

Your sharing options page will look similar to the screenshot below:

If you’re using React, Formstack does not have a package to help you render your form. However, you can use one of the options in the Website Embed tab group — JavaScript, iFrame, and Lightbox.

In our code snippet, we will be using the React Iframe package so that can make our component more reusable.

npm i react-iframe

Our component can also be fairly simple:

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

Here, we’re deconstructing our props parameter with the form key. The form key is the API JSON response that we receive from Butter via the Formstack integration when we choose the form we embed.

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

In the code snippet, we added the title key to use with our <h1> and using our IFrame component. We will also pass our url and id properties into their respective props in the IFrame component.

Closing thoughts

Once we have everything setup with our reusable Formstack components, we have our desired end result: