MACH DIGITAL - Mahmood Chowdhury

Integrating HubSpot Forms into Your Next.js Application

By Mahmood Chowdhury

HubSpot forms are a powerful tool for collecting user data, and integrating them into a Next.js application can enhance your user engagement. In this guide, we'll walk you through the process of seamlessly embedding HubSpot forms using a custom React component.

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:

import { useEffect } from 'react';

Define the HubSpotForm component:

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: 'YOUR-PORTAL-ID',
              formId: 'YOUR-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:

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!

Back to top