How to add HubSpot contact form to React application?

Other Questions HubSpot
1

I’m working on a React website and need to embed a HubSpot contact form into one of my components. I have the HubSpot script code that needs to be integrated, but I’m not sure about the best way to include external scripts in React.

HubSpot script code:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    region: "eu1",
    portalId: "25082527", 
    formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f"
  });
</script>

My React component:

import React from 'react';
import PageHeader from "../components/PageHeader";
import MainLayout from "../components/MainLayout";
import GetInTouch from "../sections/contact/GetInTouch";

const ContactUs = () => {
    return (
        <>
            <PageHeader title="Get In Touch" description="Contact our team today"/>
            <MainLayout>
                <div className="page-wrapper">
                    <div className="contact-section py-5">
                        <div className="container">
                            <div className="row">
                                <div className="col-lg-12 text-center mb-4">
                                    <h2 className="section-title" 
                                        dangerouslySetInnerHTML={{__html: 'Ready To Get Started? <br /> Contact us today.'}}>
                                    </h2>
                                </div>
                            </div>
                            
                            {/* NEED TO ADD HUBSPOT FORM HERE */}
                            
                        </div>
                    </div>
                </div>
            </MainLayout>
        </>
    )
}
export default ContactUs;

I tried using Helmet to inject the scripts but it didn’t work properly. What’s the correct approach to embed external script tags like HubSpot forms in React components? Any suggestions would be really helpful.

2

Honestly, all this script loading and manual DOM manipulation is way more work than it needs to be. I’ve dealt with similar integrations dozens of times and there’s always timing issues, cleanup problems, or scripts that don’t load properly.

What I do now is skip all that complexity entirely. I use Latenode to handle the form submission logic instead of embedding HubSpot’s widget directly.

Here’s the approach:

Create your own React form component with the fields you need. Then use Latenode to connect it to HubSpot’s API when someone submits. You get way more control over styling, validation, and user experience.

The workflow is simple. Form submission triggers a Latenode scenario that sends the data straight to HubSpot using their contacts API. No external scripts, no loading delays, no cleanup headaches.

Plus you can add extra logic like sending confirmation emails, updating other systems, or handling errors properly. Much cleaner than wrestling with their embed code.

I set this up for our company forms last year and it’s been rock solid. No more dealing with HubSpot’s styling limitations or script conflicts.

3

I’ve used HubSpot forms in several React projects. The most reliable way is loading the script dynamically and creating the form after the component mounts. You can use a custom hook or just handle it in useEffect.

Here’s what works for me:

useEffect(() => {
  const script = document.createElement('script');
  script.src = '//js-eu1.hsforms.net/forms/shell.js';
  script.async = true;
  
  script.onload = () => {
    if (window.hbspt) {
      window.hbspt.forms.create({
        region: "eu1",
        portalId: "25082527",
        formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f",
        target: '#hubspot-form-container'
      });
    }
  };
  
  document.body.appendChild(script);
  
  return () => {
    document.body.removeChild(script);
  };
}, []);

Then add <div id="hubspot-form-container"></div> where you want the form. Wait for the script to load before calling hbspt.forms.create and specify a target element. This cleans up the script properly when the component unmounts.

4

i found react-helmet-async works better for loading scripts. gives more reliable timing. u could also drop the script in public/index.html, then call hbspt.forms.create when the component mounts. way easier than dynamic loadin.

5

Had this exact same issue a few months ago when migrating our contact page. Most solutions don’t handle re-renders properly and cause memory leaks. Here’s what actually works - check if the script exists before loading and use a ref to prevent duplicate forms:

const formRef = useRef(null);
const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  if (window.hbspt && !formRef.current) {
    createForm();
    return;
  }
  
  if (!document.querySelector('script[src*="hsforms.net"]')) {
    const script = document.createElement('script');
    script.src = '//js-eu1.hsforms.net/forms/shell.js';
    script.onload = createForm;
    document.head.appendChild(script);
  }
}, []);

const createForm = () => {
  if (formRef.current) return;
  
  window.hbspt.forms.create({
    region: "eu1",
    portalId: "25082527",
    formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f",
    target: '#hubspot-form',
    onFormReady: () => setIsLoaded(true)
  });
  formRef.current = true;
};

Main thing is stopping duplicate script tags and form instances. Use document.head instead of body for better performance. I’ve used this pattern across multiple projects - zero issues.