Skip to main content
Main Article image

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

Here is a straightforward technique to integrate a Hubspot form into a Prismic slice

May 11, 2023

3 mins

Kris Bogdanov

Written by

Kris Bogdanov


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

<script charset="utf-8" type="text/javascript" src="//"></script>
    region: "na1",
    portalId: "2463560",
    formId: "366256h13-4bh4-52hb-25dg-g21grd574247"

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 }) => (
      <Component {...pageProps} />

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 Form = ({ slice }) => {
    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.

Related Posts