Hubspot is a really awesome CRM tool that connects potential customers to any number of digital touchpoints in your websites & applications. Recently I was tasked with a Hubspot integration on a Gatsby build for a client.

For this project, we needed to hook up their forms feature to forms on the site. Typically when integrating with a third party form provider, there are a couple routes. You can either use embeddable code provided by the vendor, or if available, post data from your own UI elements to some API. Hubspot has both options, but their form embed code is just a javascript tag, and I'd like to load as few vendor scripts into the site as possible. Plus I prefer the control of writing my own components - so let's demo how to post form data to their API.

In this demo I'm just going to post straight to the Hubspot endpoint because no auth is required, but there actually is a web client on Github if you prefer that. I messed around with it for a few minutes but kept hitting some odd response codes. It'll probably work just fine for someone with a little more patience.

One dependency we'll be adding to the gatsby project is gatsby-plugin-hubspot -- which just loads Hubspot's basic tracking pixel elegantly. You'll want this for a couple reasons I'll outline in the snippet below. You'll also need to create the actual form you want to post data to in the Hubspot form builder.

Here's a stripped down demo of what my contact form component looks like. Hope this helps!