How to setup Hubspot embed forms into a Next.js Prismic website

Intro

Form on Hubspot can be shared and embedded via a script tag that looks like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "2463560",
    formId: "366256h13-4bh4-52hb-25dg-g21grd574247"
  });
</script>

We'd need to extract two pieces of info from this scrip tag

• portalId = your Hubspot account number - it's the same across all forms
• formID = your unique identifier for a Hubspot form - this is what we need to put into Prismic

Install "next-hubspot" package

Install next-hubspot package and follow the instructions to configure it into your app.

You can add the provider in _app.js then move to step 2

import { HubspotProvider } from 'next-hubspot';

const MyApp = ({ Component, pageProps }) => (
    <HubspotProvider>
      <Component {...pageProps} />
    </HubspotProvider>
)

Note: You can use this React library instead if you are not using Next.js

Create a new "Form" slice

The form slice can be as simple as adding a "formId" text field which users can configure.

The slice component in it's simplest form can look like

import React from "react";
import { useHubspotForm } from "next-hubspot";

const HUBSPOT_PORTAL_ID = "XXXXX";

const Form = ({ slice }) => {
  useHubspotForm({
    portalId: HUBSPOT_PORTAL_ID,
    formId: slice.primary.formId,
    target: "#hs-form",
  });

  return <div id="hs-form"></div>;
};
export default Form;

Your marketing team now have control of adding forms on their pages within Prismic!

Customise the Slice and update the styling (optional)

You can add more fields onto your Slice, for example, a title, an option for two columns, a background colour, etc.

You can also render the Hubspot form using HTML instead of an iframe (an option that you can set within the Hubspot dashboard), which will give you full control of what the form looks like.