Skip to content

⭐Embed Hubspot forms in your Next.js application

License

Notifications You must be signed in to change notification settings

saminightshift/next-hubspot

 
 

Repository files navigation

⭐ Hubspot Forms for Next.js

Embed HubSpot forms into your Next.js application using hooks.

npm (scoped) Bundle Size type definition License: MIT

🌳 Tiny and Tree-Shakable

🦄 Written in TypeScript

👾 Works with multiple forms

😎 Uses next/script component

Install

yarn add next-hubspot

or

npm install --save next-hubspot

Getting Started

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.

import { HubspotProvider } from 'next-hubspot';

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

Usage

import { useHubspotForm } from 'next-hubspot';

const HubspotForm = () => {
    const { loaded, error, formCreated } = useHubspotForm({
        portalId: 'XXXXXXX',
        formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
        target: '#hubspot-form-wrapper'
    });

    return (
        <div id="hubspot-form-wrapper" />
    )
}

All props are based on the HubSpot docs.

Related Official Hubspot Documentation:

TypeScript

The module is written in TypeScript and type definitions are included.

Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

LICENSE

MIT

About

⭐Embed Hubspot forms in your Next.js application

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.5%
  • JavaScript 4.1%
  • Shell 0.4%