Want to embed HubSpot forms directly into your Next.js app without relying on third-party plugins? This hands-on tutorial walks you through the exact steps to integrate HubSpot forms using a custom React component - perfect for developers looking for a clean, flexible, and reusable solution.
HubSpot forms are a powerful way to capture leads, track user behavior, and automate marketing workflows. But when you're working within a modern JavaScript framework like Next.js, embedding these forms requires a bit more setup than simply pasting a script tag. That’s where this guide comes in.
We’ll cover everything from grabbing the embed code to dynamically loading forms within your Next.js components, so you can deliver a seamless user experience while keeping your codebase maintainable. Whether you're building landing pages, gated content, or lead capture flows, this tutorial has you covered.
Step-by-Step Guide: How to Integrate HubSpot Forms in Next.js
Prerequisites
Before you start, make sure you have the following:
- Basic understanding of React and Next.js.
- HubSpot account with access to the forms you want to integrate.
- An existing Next.js project.
Step 1: Installation
Ensure that you have React and Next.js properly set up in your project. If not, you can follow the official documentation for React and Next.js.
Step 2: Create the HubSpot Form Component
Create a new file named HubSpotForm.js inside your components directory (create the directory if it doesn't exist).
In the HubSpotForm.js file, import the necessary dependencies and define the HubSpotForm component.
/**
* The HubSpotForm component is a React component that creates a HubSpot form and renders it in a
* specified target element.
*
* The portalId and formId can be obtained from the form embed code within hubspot.
*
* @returns The component is returning a `<div>` element with the id "hubspotForm" and the className
* "hubspotForm".
*/
import { useEffect } from 'react';
export default function HubSpotForm(){
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://js.hsforms.net/forms/v2.js';
document.body.appendChild(script);
script.addEventListener('load', () => {
if(window.hbspt){
window.hbspt.forms.create({
portalId: 'PLACE-PORTAL-ID',
formId: 'PLACE-FORM-ID',
target: '#hubspotForm'
});
}
});
}, []);
return(
<div id="hubspotForm" className="hubspotForm"></div>
);
}Make sure to replace 'YOUR-PORTAL-ID' and 'YOUR-FORM-ID' with your actual HubSpot portal ID and form ID.
Step 3: Import and Use the Component
In your desired Next.js page or component file, import the HubSpotForm component that we created in the previous step and embed the form by including the HubSpotForm component in your render function.
import HubSpotForm from '../components/HubSpotForm'; // Adjust the path as needed
//Embed the form by including the HubSpotForm component in your render function:
export default function Contact() {
return (
<>
<h1>Contact page</h1>
<HubSpotForm />
</>
);
}Step 4: Integration
The HubSpotForm component dynamically loads the HubSpot form script and creates the form within the specified target element.
By following these steps, you can seamlessly embed HubSpot forms and collect valuable user information. Feel free to customize the appearance of the form using CSS or apply any additional logic as needed. You can access the complete code by visiting my GitHub repository. Happy coding!