Hubspot forms in Next.js with no headache
npm install next-hubspotEmbed HubSpot forms into your Next.js application using hooks.


!type definition

š³ Tiny and Tree-Shakable
š¦ Written in TypeScript
š¾ Works with multiple forms
š Uses next/script component
``ssh`
npm install next-hubspot
or
`ssh`
pnpm add next-hubspot
or
`ssh`
yarn add next-hubspot
This package is now pure ESM. It cannot be require()'d from CommonJS.
Wrap your application with HubspotProvider. This will add Hubspot script to your document.
All props are passed directly to the Script tag, so you can use all props from the next/script documentation.
`TSX
import { HubspotProvider } from 'next-hubspot';
const MyApp = ({ Component, pageProps }) => (
)
`
`TSX
import { useHubspotForm } from 'next-hubspot';
const HubspotForm = () => {
const { isFormCreated, isError, error } = useHubspotForm({
portalId: 'XXXXXXX',
formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
target: '#hubspot-form-wrapper'
});
return (
All props are based on the HubSpot docs.
- hubspot-form-if-im-using-an-external-site
- forms/advanced_form_options
- building-blocks/forms
- buildung-blocks/forms#using-embed-code
The module is written in TypeScript and type definitions are included.
Contributions, issues and feature requests are welcome!
Give a āļø if you like this project!