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: